WooCommerce by default shows the ‘Add to Cart’ button for all simple products and ‘view product’ button for all variable products. And to see detailed information on a product, users need to click on the product image or title of it. But, some customers really find this difficult to do.

So, what if you could show an additional ‘View Product’ button beside add to cart in WooCommerce archive pages? This would definitely help lots of customers to browse your products.

In a previous tutorial, I have shared a guideline on how to change WooCommerce ‘add to cart’ button ‘view product’. A user left a comment on that article that he wants to add a ‘View Product’ button along with ‘add to cart’ for his website.

So here is how to do it…

How to Add ‘View Product’ button before ‘Add to Cart’ in WooCommerce Archive pages

Along with the default WooCommerce ‘add to cart’ button, you can add an additional button with a “View Product” text (or anything you like) linking to the single product page.

WooCommerce Add to Cart

‘View Product’ button before ‘Add to Cart’

Use this Code to add ‘View Product’ button BEFORE the ‘add to cart’ button in WooCommerce shop or archive pages.

/**
* @snippet Add ‘View Product’ button before ‘Add to Cart’ in WooCommerce
* @source https://www.wptechnic.com/?p=6692
* @author Muhammad Tamzid
* @compatible WC 4.3.1
*/
add_action('woocommerce_after_shop_loop_item', 'wpt_custom_button_view_product', 5 );
function wpt_custom_button_view_product() {
    global $product;

    // Ignore for Variable and Group products
    if( $product->is_type('variable') || $product->is_type('grouped') ) return;

    // Display the custom button
    echo '<a style="margin-right:5px" class="button wpt-custom-button-view-product" href="' . esc_attr( $product->get_permalink() ) . '">' . __('View product') . '</a>';
}

This will make your shop or any other product archive pages look like this:

‘View Product’ button after ‘Add to Cart’

Alternatively, you can use this Code to add the ‘View Product’ button AFTER the ‘add to cart’ button in WooCommerce shop or archive pages.

/**
* @snippet Add ‘View Product’ button after ‘Add to Cart’ in WooCommerce
* @source https://www.wptechnic.com/?p=6692
* @author Muhammad Tamzid
* @compatible WC 4.3.1
*/
add_action('woocommerce_after_shop_loop_item', 'wpt_custom_button_view_product', 10 );
function wpt_custom_button_view_product() {
    global $product;

    // Ignore for Variable and Group products
    if( $product->is_type('variable') || $product->is_type('grouped') ) return;

    // Display the custom button
    echo '<a style="margin-left:5px" class="button wpt-custom-button-view-product" href="' . esc_attr( $product->get_permalink() ) . '">' . __('View product') . '</a>';
}

This will make your shop or any other product archive pages look like this:

How about changing the text ‘View Product’ to ‘Check detail’ or anything else?

Well, that can be done too. If you want to display anything else instead of “View Product”, you can replace the view product text from the highlighted line (9) with your own.

How to add PHP Snippet code to your WordPress site?

There are many ways of adding a PHP Snippet code to your WordPress website. You can add this PHP Snippet at the very bottom of your active child theme (or main theme) functions.php file. You can also add this code using any third-party plugin like ‘Insert Headers and Footers‘ or ‘Code Snippets‘ plugin.

Does this Code work for any theme?

This PHP Snippet code uses default WooCommerce Loop. Therefore, if your theme using the default WC loop to display the ‘Add to Cart’ button, then it surely will work.

However, if your theme has custom pages using custom page builder plugins that use different functions to show ‘add to cart’ button, then it may not work for your website. In that case, hire a Pro developer or contact your theme provider.

Did this code work for your website? Or you’re having difficulties? Either way, let me know by leaving a comment below right now.

Avatar for Muhammad Tamzid
Author

Muhammad Tamzid, the founder of WPTechnic, is a WordPress Enthusiast with a passion to help beginners learning WordPress. Also managing WPrevival, a 24/7 WordPress Website Development, Maintenance & Security Service company.

Write A Comment