Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to change Add to Cart button in WooCommerce Category & Shop pages & link it to Product page

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“.

How to change the Add to cart button on the WooCommerce Category and Shop pages and link it to the Product page - Default Add to cart button on Category Page

 

Similarly, you have the Add to cart button below the product image on the Shop Page too:

How to change the Add to cart button on the WooCommerce Category and Shop pages and link it to the Product page - Default Add to cart button on Shop Page

 

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;
}
}
  1. 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.
  2. 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.
  3. 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:

 

How to change the Add to cart button on the WooCommerce Category and Shop pages and link it to the Product page - Add to cart button changed on Category page

 

Shop Page:

How to change the Add to cart button on the WooCommerce Category and Shop pages and link it to the Product page - Add to cart button changed on Shop page

The button, when clicked, will take you to the product page where you can view more information:

How to change the Add to cart button on the WooCommerce Category and Shop pages and link it to the Product page - Product Page

 

In this way, the customer will be able to get more information about the product before they can buy it.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
14 Comments
Newest
Oldest
Inline Feedbacks
View all comments
ashwin
1 year ago

what if I want to add icon in place of add to cart button text can anybody show me ?

Shonari
1 year ago

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.

suellen
2 years ago

Thank you very much!
I was trying for hours to understand how it worked.

2 years ago

It worked 🙂 Great this one very helpful for me, applied on clients shop page
Thank you

Nabe
3 years ago

Hey? it’s worked, could you please share the code to apply this function for related products (in the single product page) also.

atena
3 years ago
Reply to  Nabe

just remove : if (is_product_category() || is_shop())

Nabe
3 years ago
Reply to  atena

Figured it out early, anyway thank you for your reply

14
0
Would love your thoughts, please comment.x
()
x