WooCommerce lets us add products to our virtual shopping cart through multiple ways. You can click on the “Add to cart” button situated below the product image on the Category page itself (such as in the example depicted by the image below) or on the Shop page, or by visiting the Product page and clicking on “Add to cart“.
Similarly, you have the Add to cart button below the product image on the Shop Page too:
Possible problems faced when a product is added to the cart from the Category or Shop Page:
In a lot of cases, it is important to know more about the product before one can add it to the cart. For instance, in the example depicted above, the dimensions of the bar stools would be an important factor to consider before making the decision to buy them. Product dimensions, zoomed-in photos or in some cases, photos of the product from various angles are all important factors that you would want the customer to look at, in order to avoid consequences where the customer’s expectations may not match with what is being offered. Such situations may eventually also lead to a dissatisfied customer, besides causing the product to be returned.
This detailed description of the product is only available on the Product Page and not on the Category or Shop pages.
In such cases, we need to change the “Add to cart” button to say something such as “View Product” or “Buy”, and link this button to the Product page instead of it directly adding the product to the cart. This way, the customer can see the product properly, read the description and then decide whether they want to buy it.
The code snippet below, when added to the functions.php file of your child theme, enables you to change the Add to cart button on the WooCommerce Category and Shop pages and link it to the Product page. (To know why we edit the functions.php of the child theme and not directly the functions.php file, read this post.)
add_filter( 'woocommerce_loop_add_to_cart_link', 'ts_replace_add_to_cart_button', 10, 2 ); function ts_replace_add_to_cart_button( $button, $product ) { if (is_product_category() || is_shop()) { $button_text = __("View Product", "woocommerce"); $button_link = $product->get_permalink(); $button = '<a class="button" href="' . $button_link . '">' . $button_text . '</a>'; return $button; } }
- woocommerce_loop_add_to_cart_link is a WooCommerce filter associated with the “Add to cart” button, to which a hook/function known as “ts_replace_add_to_cart_button” is added.
- Inside the function, we check whether the page is a Category or a Shop page using built-in conditional tags, and execute the subsequent lines only if so.
- The get_permalink() function returns the absolute URL of the product page.
The text and behaviour of the button on the Category and Shop pages will be thus changed.
Category page:
Shop Page:
The button, when clicked, will take you to the product page where you can view more information:
In this way, the customer will be able to get more information about the product before they can buy it.
what if I want to add icon in place of add to cart button text can anybody show me ?
Can I specify the products this works on? I only want some products to have this behaviour, not all products on the shop page. Just some of them.
Yes, you can list down the ids of those products in an array, and check if the id of the product matches any of the ids in the array. You would then need to add an extra “if” loop for the same. Please refer to the code below for this, I have tested it: add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘ts_replace_add_to_cart_button’, 10, 2 ); function ts_replace_add_to_cart_button( $button, $product ) { $id = $product->get_id(); $ids=array(36,37,38); //here you can add the ids of the products for which you want the View Product button if (in_array($id, $ids)) { if (is_product_category() || is_shop()) { $button_text = __(“View Product”,… Read more »
Thank you very much!
I was trying for hours to understand how it worked.
Most welcome!
It worked 🙂 Great this one very helpful for me, applied on clients shop page
Thank you
You’re welcome!
Hey? it’s worked, could you please share the code to apply this function for related products (in the single product page) also.
just remove : if (is_product_category() || is_shop())
Figured it out early, anyway thank you for your reply