This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How To Hide, Remove or Disable Add to Cart Button in WooCommerce

Updated on December 10, 2021

3 Min Read
woocommerce add to cart button hide remove or disable

In this tutorial, I will discuss the important aspect of WooCommerce shop page customization that results in a better-customized user experience. As always, I assume that you have a working WooCommerce store with optimized settings (preferably on Cloudways. If not, sign up for your free trial). If you don’t, you can go through the WooCommerce tutorial I have created for your help.

Before you can customize the WooCommerce store, the first thing you need to do is install the WooCommerce plugin. You can download it for free from the WordPress repository or follow this guide on how to do it from your dashboard.

I will now discuss how to hide, remove, or disable the Add to Cart button on WooCommerce shop pages. There are many reasons why WooCommerce store owner can temporarily or permanently disable add cart button on their website, for instance, a product is out of stock. Initially, I thought that the solution to these related challenges was to edit the template files. However, I soon realized that this would be an overkill for such a simple task!

Managed WooCommerce Hosting Starting from $10/month.

Create, manage, and customize your WooCommerce store with complete freedom.

After some research, I realized that WooCommerce offers several hooks that could be utilized for removing the buttons and prices from various pages.

To demonstrate the process, first, go to the WooCommerce store and add a product. Give it a name and try to fill as many details as possible for this test product.  For help. please consult the following screenshot:

go to the WooCommerce store and add a product

In the frontend of the store, you will now see the product detail page (consult the screenshot below). I have circled the Add to Cart button in red!

Add to Cart button in red

Hide or Disable the Add to Cart Button

I will now demonstrate how to remove this button from product detail page and the shop page (product listing page). For this, I will add the following hooks:

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');

The good thing about these hooks is that you could place them anywhere appropriate. The common practice is to include these hooks in functions.php which is located in your theme folder. However, this might cause errors in some cases. I will, therefore, place these hooks in woocommerce.php (found in the plugins folder). To access this file, of 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.
 * @since  2.1
 * @return WooCommerce
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 done, save the file and refresh the page. Once the page loads, you will see that the Add to Cart button has been removed from the page.

Add to Cart button has been removed from the page.

Remove Add to Cart Button for Specific Products

There are times when you wish to remove the Add to Cart button from specific product pages. There are three ways of achieving this objective:

The first option is to simply remove the figure from the price fields. The product no longer has a price, and consequently the Add to Cart button.

The second option is to enable stock management and then set the product stock to zero.

Finally, the third option is to write a filer for the woocommerce_is_purchasable hook. Every time this filter detects the product id of the target product, it will return false. The result is that the price will be visible but in the place of Add to Cart button, a notice “Product cannot be purchased” will appear.

I will go with the third option, by adding the following code to functions.php (located in the theme folder).

add_filter('woocommerce_is_purchasable', 'woocommerce_cloudways_purchasable');
function woocommerce_cloudways_purchasable($cloudways_purchasable, $product) {
return ($product->id == your_specific_product_id (like 22) ? false : $cloudways_purchasable);


In this tutorial, I discussed how to hide, remove and disable Add to Cart button on WooCommerce product pages. The process is very simple and the results could be cleanly achieved by adding small snippets of code at the proper locations. No matter which WooCommerce theme you are using, the above mention method of removing Add cart button will be applicable. If you need further help or would like to share some other method leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great performance for the price, and plenty of control”

Sean P [SMB Owner]

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]


Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!


Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!