Search the site:

Home Blog How to change the Add to Cart button on the WooCommerce Category and Shop pages and link it to the Product page

How to change the Add to Cart button on the WooCommerce Category and Shop pages and link it to the 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

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
11 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Kingsley Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
Kingsley
Guest

When I use the code, from the single product page, clicking on add to cart, doesn’t add to cart, it reloads to the sake page.
However, is there a way I can change the text add to cart in the single product page and when it being clicked on leads to the checkout page.
Regards: Daniel

from purchased

Subscribe for more offers