How to Hide Read More and Add to Cart Button WooCommerce

WooCommerce Hide Read More and Add to Cart Button

This brief tutorial will discuss the important aspect of WooCommerce shop page customization that results in a better-customized user experience.

However, before you customize your WooCommerce Store, the first thing you need to do is install the WooCommerce plugin. It is available for free on the WordPress repository.

WooCommerce Hide Read More and Add to Cart Button

Additionally, I will discuss how to hide, remove, or disable the Read More and add to Cart button on the shop page.

There are many reasons a WooCommerce store owner might want to hide the Read More button.

For example, you can hide this button if it is out of stock. When I was trying to come up with a solution, I thought that editing the template files might do the trick.

However, later on, I realized that it would be an overkill for this easy task.

Therefore, I researched and realized that WooCommerce offers several hooks that could be utilized to remove the buttons and prices from various pages. This is how the button is displayed:add to cart and read more button

Steps to Hide or Disable the Add to Cart Button and Read More Button

Here are the steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to hide this button from the product detail page and the shop page (product listing page).
  3. Add the following code to the functions.php file:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');
  1. This is the outcome on the front end:removing the read more and add to cart button

The best thing about using hooks is that you can place them anywhere appropriate.

Alternatively, instead of including the hooks in the functions.php file, which is located in your theme folder, you can place these hooks in woocommerce.php (found in the plugins folder).

This will not cause any errors to your site. To access it go to WordPress > wp-content > plugins > woocommerce > woocommerce.php.

/**

* Main instance of WooCommerce.

*

* Returns the main instance of WC to prevent the need to use globals.

*

*/

function WC() {

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');

return WooCommerce::instance();

}

Once you add this code, save the file, and refresh the shop or product page.

You will see that the Add to Cart and Read More buttons have been removed from the page.

Steps to Hide the Add to Cart Button or Read More Button for Specific Products

There are some situations where you need to hide the Add to Cart button from specific product pages.

You can remove the figure from the price fields, meaning that the product will no longer have a price and, consequently, the Add to Cart button.

Alternatively, you can write a filer. This filter will detect the product id of the target product and return a false. This will remove the Add to Cart button.

Here are the steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to hide the Add to Cart button or read more button for specific products.
  3. Add the following code to the functions.php file:
/**

* Hide the button for the product with ID = 10 AND for variable products

*/

add_filter('woocommerce_loop_add_to_cart_link', function( $add_to_cart_html, $product ) {

if( $product->get_id() == 604 || $product->is_type( 'variable' ) ) {

return '';

}

return $add_to_cart_html;

}, 10, 2 );
  1. Remember to add the correct product ID. This is the outcome:remove add to cart button for specific products

Conclusion

In this tutorial, I discussed how to hide or remove the Add to Cart and Read More buttons on the WooCommerce product pages.

This process is simple, but you need to place the code snippet at the proper location. Moreover, this solution works for any theme that is compatible with WooCommerce.

Similar Articles