Why hide or remove the “Add to Cart” button? Isn’t that how people buy your products? There are many reasons to hide the “Add too Cart” button. For example, many products today are launched prior to being available for purchase. Many store owners add detailed product descriptions to their stores to begin working on search rankings and early product promotions. In these cases, store owners may not want to have an “Add to Cart” button on their product page yet but they may still want customers to be able to leave their details. Another possible reason to remove the “Add to Cart” button is when you have a product that requires a quote or where you wish to speak with the customer first.
How to remove the “Add to Cart” button from WooCommerce
There are several ways to remove the WooCommerce “Add to cart” button from your online store. You can do this with code, WooCommerce Stock Control, the Elementor page builder, or with a plugin. Whatever method suits you the best, go for it and hide the “Add to Cart” button from your WooCommerce store front-end. Let’s explore how to do this by using code and plugins.
Removing the “Add to Cart” button from WooCommerce using code
If you are comfortable with editing your theme code, then this is the easiest way to disable the “Add to Cart” button from your WooCommerce store. Just add the following code snippet in the functions.php file file of your currently activated theme.
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', 20);
This code snippet will remove the “Add to Cart” button on the shop page as well as product pages. However, this solution is not very flexible.
Using a snippet of code like the example above is the most common method to hide the “Add to Cart” button, but it may not be the best solution for you.
Adding this code snippet to your functions.php file removes the “Add to Cart” button sitewide. You must delete the code to get your “Add to Cart” button back.
Hiding the “Add to Cart” button using code
The WooCommerce “Add to Cart” button also can be hidden using CSS in the theme customiser instead of editing the theme directly.
The exact code will depend on your theme. You will need to identify the CSS class for your “Add to Cart” buttons, or your entire add to cart form. This class may be different for variable products and simple products so you will want to check both.
The standard CSS classes for the “Add to Cart” button are:
- Product pages: .single_add_to_cart_button
- Product categories: .add_to_cart_button
The classes above are for the “Add to Cart” button only and have no impact at all on the quantity field or variable product options.
If you want to hide the quantity and variable product options you will need the CSS classes for the “Add to Cart” form.
The standard CSS classes for the “Add to Cart” form is:
- .single-product .cart
To use these CSS classes to hide your “Add to Cart” button, open up your theme customizer by going to Appearance > Customise in the WordPress dashboard.
Expand the “Additional CSS” section and if there is any code already there, scroll right to the end.
To just hide the button, start a new line and add this code:
.single_add_to_cart_button, .add_to_cart_button { display: none !important; }
Or to hide the quantity and variable product options, add this code:
.single-product .cart, .add_to_cart_button { display: none !important; }
Again, these code snippets will hide the “Add to Cart” button for your entire site and will need to be removed to bring the button back. It is possible to selectively hide the button if you know the product ID, but it does get complex, especially if you want to hide the “Add to Cart” button on a number of products.
If you know the ID of the product, your code would look like this:
.postid-2619 .single-product .cart, .post2619 .add_to_cart_button { display: none !important; }
In the above example, 2619 is the product ID. You would duplicate this snippet and update the number for each product you wanted to hide the button for. Eg,
.postid-2619 .single-product .cart, .post2619 .add_to_cart_button, .postid-2620 .single-product .cart, .post2620 .add_to_cart_button, .postid-2621 .single-product .cart, .post2621 .add_to_cart_button { display: none !important; }
Caveats of the code approach
Disabling or hiding the “Add to Cart” button using code is a quick way to remove the button but could be a headache if you only want to remove the “Add to Cart” button from a selection of products.
Instead of adding code, there are two other approaches that make managing the “Add to Cart” button on a per-product basis.
- You can use WooCommerce stock control functionality to disable the WooCommerce “Add to Cart” button.
- You can use a plugin to configure or disable the WooCommerce “Add to Cart” button for specific products or categories.
Removing the WooCommerce Add to Cart button using WooCommerce stock control
WooCommerce has stock control built-in. This stock control functionality can be used to prevent customers from buying a product that has a stock level of 0.
This approach adds a message to the product page telling customers that the product is currently sold out. As long as you do not permit backorders, the “Add to Cart” button will be disabled.
The downside of stock control is that you can’t really do anything else besides tell customers it is out of stock. You can allow customers to signup to be notified when the product is back in stock, but that’s it.
Removing the WooCommerce Add to Cart button using Elementor
The Elementor page builder is extremely powerful, and if you have the Pro version, you can customise your product and shop templates. I’m not going to go through the process of building your templates in this article, you can read more about how to do that here, but we are going to look at how you can remove the “Add to Cart” button. If your WooCommerce site wasn’t built with Elementor or at least with an Elementor compatible theme, then this option won’t be worth considering for your site as it will likely need a significant amount of work to get Elementor playing nicely with your theme.
Edit your product template in Elementor and look for the “Add to Cart” widget. This is the Elementor widget that handles displaying the “Add to Cart” button and the associated form for quantities and variable product options. If you just want to remove this from every product, you can simply delete the widget from the template. However, if you only want to remove it from some products, you have two choices.
The first choice requires creating a second product template in Elementor. This template should be identical, or almost identical to your main product template but without the “Add to Cart” widget. When you set the display conditions for this template, you will need to include only the products or categories that you don’t want to have the “Add to Cart” widget on. Using a second template also gives you the ability to add different widgets in for these products. For example, an enquiry or quote request form.
The second choice is to use the Dynamic.ooo plugin to add display conditions to the “Add to Cart” widget. This plugin is pretty handy as it lets you use all kinds of criteria to define when to display a widget. So, you could choose to hide the “Add to Cart” widget for specific products. You could also add a widget, like a quote request form and configure the display conditions so it is only visible for the people who can’t see the “Add to Cart” widget.
I use Dynamic.ooo anytime I have more complex display criteria for any widgets in Elementor where I don’t want to have two different templates. For example, if I wanted the products that have an “Add to Cart” button to have a distinctly different template from those that have the button hidden, I would use two separate templates. If I wanted the two kinds of products to have very similar templates and to always look the same, I would use Dynamic.ooo as this way, if I need to change any part of the template, the change applies to both without having to remember to apply the change to both.
Elementor gives you powerful ways of managing your “Add to Cart” button display, especially when combined with Dynamic.ooo, but it does require you to edit your Elementor templates and be comfortable working in the Elementor page builder. This isn’t particularly hard, but it can take some getting used to if you aren’t familiar with web concepts.
Removing the WooCommerce Add to Cart button using the “Hide Price, Hide Add to Cart” WooCommerce plugin
There are several plugins available for WooCommerce to manipulate the “Add to Cart” button. In this article, we are going to look at the “Hide Price, Hide Add to Cart” WooCommerce plugin.
With the WooCommerce “Hide Price & Hide Add to Cart” plugin, you can easily hide a product’s “Add to Cart” button, price and set custom text. You can also add a custom button instead of the “Add to Cart” button along with a custom price. text and an icon if desired. These custom buttons could be to an external link, starting a Skype call, or sending an email.
The “Hide Price, Hide Add to Cart” plugin is flexible and works with any WooCommerce theme to allow you to remove WooCommerce from your shopping cart.
Based on Specific Products or Product Single Page
Have you encountered a situation where you need to display products and would like to encourage some kind of user behaviour, but you don’t want to accept orders just yet? It could be because the product is out of stock or just not ready to sell yet. In these cases, if you don’t want to worry about code and you don’t want to disable the shopping cart button for any other items, a WooCommerce plugin like “Hide Price, Hide Add to Cart” is a great option.
On the Hide Price button and Add to Cart button on a product page, you can choose several options to customize a lead generation form using Contact Form 7 to capture lead data from interested customers for a specific product. You can also display “Contact Form 7” in tabs on a product page.
Works for both Category pages and specific Product pages
As we looked at earlier, different code snippets are required for product pages and product categories. Ideally, a plugin should handle both of those locations for us automatically.
The “Hide Price, Hide Add to Cart” plugin works at both the category and individual product page level.
If a store owner wants to remove the “Add to Cart” button from a specific product, they can do so. If they want to replace the “Add to Cart” button with an alternative button that encourages customers to enquire about the product, they can do so.
This can work really well where you provide quotes and sell some of your products on an enquiry basis.
You can specify settings on category pages and individual product pages.
Option to exclude product or category
You can also use the “Hide Price, Hide Add to Cart” plugin in reverse if you want to disable the “Add to Cart” button on most of your products. You can use the exclude options to exclude certain products and categories from having their “Add to Cart” buttons and prices impacted by the plugin.
Hide the “Add to Cart” button based on country
One of the things that I quite like about the “Hide Price, Hide Add to Cart” plugin is the flexibility of different ways you can control the button and pricing display. If you want to show the Price and Add to Cart button to all users, whether they are logged in or not, but just hide it users in a specific country, you have the option to do so.
Remove the “Add to Cart” button based on user role
You can use this method to remove the “Add to Cart” button for assigned user roles.
Let’s say we want to remove the “Add to Cart” button for the Publisher and Subscriber roles.
Under the Role-Based Pricing tab the first setting is to remove the “Add to Cart” button. Select the user roles whose “Add to Cart” button you want to remove. In our case, the Publisher and the Subscriber. Alternatively, you can enter placeholder text as shown in the following screenshot.
Wrapping up
In this guide, I’ve explained how to hide, remove, and disable the “Add to Cart” button using code, WooCommerce stock control and the WooCommerce “Hide Price, Hide Add to Cart” plugin.
Sometimes, the simplest solution (a small code snippet) is the best, but when you need more control over what products and how to hide the button, a plugin like “Hide Price, Hide Add to Cart” gives you much more flexibility.
If you need more help or want to share another method, please leave a comment below.
