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

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;
}
}

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:

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.