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 the Add to Cart Button in WooCommerce

Updated on September 16, 2022

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

There are plenty of reasons you might want to hide, remove, or disable the add to cart button on your WooCommerce store. Perhaps the product displayed on your store is not on sale, or you want to show the product catalog, or your products have gone out of stock.

That’s why you need greater customizability to update your store’s functionality per your demands.

A huge repository of WordPress plugins and WooCommerce extensions offers users extensive customization options that result in a more user-friendly experience.

This tutorial will demonstrate how to hide, remove, or disable the Add to Cart button on WooCommerce stores. 

I assume you already have a functional WooCommerce store. If you don’t, set up your WooCommerce store now with Cloudways’ managed hosting to easily deploy any PHP-based application in just one click.

From launching to customizing your WooCommerce stores, Cloudways is at your service.

Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.

How to Add a Product to Your WooCommerce Store

You must have products in your store to play with the Add to Cart functionality. Therefore, I’ll first show you how to add products to your WooCommerce Store.

  • Go to WooCommerce Dashboard.
  • Click Products > Add products.
  • Name the product and fill in the details.

Note:  For help, please consult the following screenshot.

go to the WooCommerce store and add a product

  • You will see the product detail page with the Add to Cart button on your store’s front end.

Add to Cart button in red

This is how you add products to your store.

How to Hide or Disable the Add to Cart Button

I will now demonstrate how to hide or disable the add to cart button from the 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');

You can place these hooks anywhere you deem appropriate. The common practice is to include these hooks in functions.php, 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). 

Follow the steps below to access the woocommerce.php file:

  • Go to WordPress > wp-content 
  • Click 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. 

Congratulations! The Add to Cart button has been removed from the page.

Add to Cart button has been removed from the page.

How to Remove the Add to Cart Button for Specific Products

There are three specific ways to remove the Add to Cart button from specific product pages:

  1. Remove the figure from the price fields. The product will no longer have a price, removing the Add to Cart button. 
  2. Enable stock management and set the product stock to zero.
  3. Use the filter for the woocommerce_is_purchasable hook.

How the woocommerce_is_purchasable Hook Works

We will set the filter that only includes the particular product-id from which we wish to remove the Add to Cart button. 

Every time this filter detects the product id of the target product, it will return false. Thus, the price will be visible, but in place of the Add to Cart button, a notice will appear that says “Product cannot be purchased”.

I will use 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);
}

Conclusion

In this tutorial, I discussed hiding, removing, and disabling the Add to Cart button on WooCommerce product pages. The process is simple, and can be implemented by adding small code snippets at the proper locations. 

You may use the methods mentioned in this blog to remove the Add to Cart button regardless of your WooCommerce theme. 

If you need further help with this, leave a comment below!

Frequently Asked Questions

Q1: How do I get rid of the Add to Cart option?

There are three ways to get rid of the Add to Cart button on a WooCommerce store.

  1. Remove the figure from the price fields
  2. Enable stock management and set the product stock to zero
  3. Set “WooCommerce-is-purchasable” to false for the specific product id.

Q2: How do I remove the update cart button in WooCommerce?

Follow the steps below to remove the update cart button on your WooCommerce store:

  1. Open your theme’s function.php file
  2. Make a hook function to add all the above code in the website’s header or footer.
  3. Add the function “codedocx_update_cart_button()” to your active theme’s function.php file.
  4. Save the changes.

Q3: How do I edit the Add to Cart button in WooCommerce?

Edit the Add to Cart button on WooCommerce by following the steps below:

  1. Install the WooCommerce Custom Add to Cart Button plugin on your WordPress site.
  2. Go to Appearance > Customizer > WooCommerce > Add to Cart. 
  3. Choose the relevant setting, such as changing color or text.
  4. Click the Publish button.

Q4: How do I disable the WooCommerce cart?

Disable the WooCommerce cart by following the steps below:

  1. Open functions.php file
  2. Include the following hook

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

Q5: How do I hide the shopping cart in WooCommerce?

  1. Go to your WordPress Dashboard 
  2. Select Appearance > Customize > WooCommerce > General > Menu Cart
  3. Uncheck the Menu Cart: Display

Following the steps above will hide the shopping cart on WooCommerce.

Q6: How do I get rid of the Buy Now button in WooCommerce?

  1. Go to WooCommerce Dashboard.
  2. Click Settings > Payments > Stripe.
  3. Uncheck the “Enable payment request buttons.
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!