If you are running an eCommerce business, then you will surely at some point want to remove or hide the "Add to Cart" button on your store. There are a number of reasons or situations that may demand you to hide or remove the "Add to Cart" button on your store.
Many WooCommerce store owners have come to us asking how they can do the same in their store, so we have decided to write an article on how to hide or remove the "Add to Cart" button on your WooCommerce store.
Note that this guide involves modifying WooCommerce or theme files. For users unfamiliar with coding, consider creating a backup or using a child theme to avoid causing any issues with your live store.
Why Hide or Remove the “Add to Cart” Button on Your WooCommerce Store?
As I mentioned before, the decision to remove or hide the "Add to Cart" button either temporarily or permanently can be due to a number of reasons.
Out of Stock Products
One of the most commonly seen reasons for removing the "Add to Cart" button on a store is that the product is out of stock.
Unavailable or Discontinued Products
The "Add to Cart" button is often removed on products that are no longer sold on the website. Some websites choose not to take down the product entirely in case it may become available again in the store.
Sales Strategy
The eCommerce stores also choose to hide or remove the "Add to Cart" button in case a product is running low on stock but is high in demand. The product is made available to the public by enabling the "Add to Cart" button again as part of a sales strategy.
Hiding or Removing the "Add to Cart" Button on Your WooCommerce Store
You can hide or remove the 'Add to Cart" button on your WooCommerce store either using a plugin or with a simple code. Most developers prefer to use a code to implement this, and although this can be done via CSS, JS, or PHP, the most preferred choice is often the PHP. However, for non-developers, plugins might be a more manageable option.
Recommended Plugin Alternatives
If you're not comfortable editing files, consider using plugins like WooCommerce Disable Add to Cart, which allow you to easily hide the button without touching the code. Plugins also have the added benefit of easier management across different theme updates.
Most developers prefer using PHP for this task, though CSS and JavaScript are also valid methods.
How to Hide/Remove the "Add to Cart" Button?
WooCommerce offers you a number of hooks that you can use to remove buttons on your WooCommerce site or even remove the prices if you want. One of the best things about the hooks shown above is that they can be used anywhere as long as it's appropriate there.
Although the most common practice involves using the hooks in the theme folder under functions.php, it is not ideal as it can cause errors. Here's how you can hide the "Add to Cart" button using code.
Important: Backup and Child Theme
Before making changes to core files or theme files, ensure you have created a full backup of your website and are using a child theme. Editing core files without a backup could lead to errors that are difficult to reverse.
Remove "Add to Cart" Button Via woocommerce.php
So where else can we do? Where is it best to use the WooCommerce hook so that you can remove the "Add to Cart" button? The answer lies in the plugin folder, where you can find the woocommerce.php file.
Steps to Reach woocommerce.php and Applying the Hooks
1. Navigate to your WordPress directory → 2. Go to wp-content → plugins → woocommerce → woocommerce.php 3. Open the file in a text editor.
Once you have navigated yourself to woocommerce.php, following the steps given above, you can use the hooks here for removing the "Add to Cart" button from your WooCommerce store. Given below is the hook you can utilize to remove the "Add to Cart" button from your WooCommerce store.
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');
After applying the hooks, all you have to do is save the file and refresh the page. If everything has gone well, then the "Add to Cart" button must be removed now. However, if you are noticing some error, you need not worry about it because we'll explain what you can do if that is the case.
Remove "Add to Cart" Button Via Filter
The "Add to Cart" button can also be removed using a simple filter. If you look for it, you'll notice the following code in your WooCommerce store.
global $product;
if ( ! $product->is_purchasable() ) {
return;
}
The purpose of the code given above is to display the "Add to Cart" button as long as the filter "is_purchasable" is set to true else the button is hidden. It would be best if you also kept in mind that the above code is run before any functionality check. The solution here is pretty evident, and all you have to do is add a simple line of code.
add_filter( 'woocommerce_is_purchasable', '__return_false');
By adding the code above, you can render the product unpurchasable. However, the best part is that it has no compatibility issues, and neither does it remove any hooks or templates.
Remove the "Add to Cart" Button for Specific Products
More often than not, you would want to hide the "Add to Cart" button for a specific product, and three methods can accomplish this.
- The easiest way to hide the "Add to Cart" button is to remove the figure from the products price field simply. Removing the price would automatically mean that it can not be purchased and, consequently, removes the "Add to Cart" button.
- The next thing you can do is to enable stock management. By doing so, you'll be able to set the product stock on your WooCommerce store. Setting the stock to zero also accomplishes what you need and removes the "Add to Cart" button.
- The third option employs a much more precise method, where we make use of a filer for the woocommerce_is_purchasable hook. The filter detects the product ID of the product in question and returns a false value. This enables you to display the product with the price but shows a notice that says, "Product can not be purchased."
To implement the last option, all you have to do is access functions.php inside the theme folder and add the code given below.
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
The "Add to Cart" button is often removed for various reasons, and WooCommerce store owners must be proficient in doing it whenever it's necessary. The "Add to Cart" button may be removed for all the products or specific products depending on the business's requirement.
For non-technical users, it’s advisable to explore plugin options to achieve the same effect with less risk. However, if you’re comfortable with coding, these methods provide a lightweight and customizable solution.
Remember to follow best practices such as using a child theme and backing up your site before making any changes.
