How to hide the “Add to cart” button in WooCommerce

Clearly, the ability to allow your customers to add a product to their cart is vital to the success of your WooCommerce store, but there are numerous circumstances in which you may want to hide the add to card button instead.

These include:

• Product unpurchasable – If the store has run out of product stock or otherwise it is unavailable for purchase, most sellers prefer to prevent its sale. Sure, you could remove the product from the catalog, but this is not the ideal situation for your store.
• Products that cannot be sold directly – This category includes all products (and services) that cannot be sold with a simple click but require communication with the customer, an exchange of quotes, or otherwise an indirect buying process.
• Restricted product – This can indicate either a restriction based on user type (thus creating exclusivity) or based on geographic location, with certain products or services unavailable outside certain areas.
• Push toward registration – By showing the button only to registered customers, you can get more registrations.

And in addition to these reasons, there can be dozens of others: style choices, experimentation, or more.

In the course of this article, we will see how to hide these types of buttons and how you can get the best results with minimal effort.

Using WooCommerce’s default settings

Of all the cases we have seen above, one of them is already included by WooCommerce itself. In fact, fortunately, WooCommerce already hides the add to cart button on out of stock products.

To take advantage of this feature, you just need to make sure to enable stock management and that the availability is specified in the various products.

Let’s see how.

How to hide the button for out-of-stock products on the website

In fact, this is what a product with available stock looks like:

Whereas, if the stock is zero, it will appear like this:

You only need to enable inventory management to achieve this.

Author’s note: Some online guides suggest enabling a specific feature to achieve this result, that is directly hiding the product in your catalog. If you want to show it but without offering the option to purchase, you only need to enable inventory management.

Inventory Management

We mentioned that to hide the add to cart button for out of stock products, you just need to enable inventory. To do this, go to your WordPress | WooCommerce site and go to WooCommerce > Settings > Products > Inventory:

Make sure that the “Manage stock” option is enabled. You can see other settings within this page, including the one mentioned above about hiding the product in the store, but this is the only one we’re interested in right now.

After enabling this option, all products that will have 0 in their inventory will lose their add to cart button. You must therefore make sure that your products have their own inventory. To do this go to the product page in question and scroll down to the Product Data section:

Go to the Inventory section and be sure to place a checkmark if the “Inventory Management” option is missing. You will then be able to specify the number in the inventory, which will automatically update after each sale. When this value becomes 0, the button will be hidden.

Clearly, this means that you can manually exploit this solution for your own purposes: in case you want to remove a given button at a product, you only need to manually set the stock value to 0 to remove it automatically.

Of course, this is not an ideal solution in most cases, so let’s see how to achieve a similar result with our guide.

Customization via the theme’s function.php file

What we have seen so far is the basic option offered by WooCommerce to hide your add to cart button. However, this is only applicable for out of stock products, and not enough for all the other cases we listed above.

You can further customize the behavior of your WooCommerce store using CSS code and your theme’s function.php file.

However, this requires the ability to both create custom code and place it within this file. In the following points we will look at a quicker and easier solution to achieve these and more results, but for now we have asked our developer team for some code that you can use on your theme (this code may change from theme to theme and some themes may not offer the ability to customize, in which case move on to the next method via plugins).

As mentioned above, this method is only valid for classic themes, but it can still cause some difficulties in case you do not have FTP access to your theme files, and in general, it can cause problems if the code is inserted in the wrong place.

As for block themes, on the other hand, the modification appears to be easier since the latter allows you to customize the visual appearance of the various pages, but you will find that it requires numerous steps that then have to be repeated for each page where you want to apply this type of modification. Again, using a plugin can save you time and effort.

Creating hooks and custom functions

If you have decided to try using codes via hooks that can be placed in the functions.php file of your theme. It is usually advisable to implement such changes on the Child theme, which is a subordinate version of your theme that allows you to modify without having detrimental impacts on your theme (FTP access is usually required for this).

In that case, you will then have to locate the functions.pho file and insert a couple of code snippets depending on the result you want to achieve.

In case you want to hide the add to cart button in the various WooCommerce Loop pages, you can use the following code:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

Also, if you want to hide the same button on single product pages, you will need to insert this snippet:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart'); 

Clearly, this function can only take place if the theme you are using on your WooCommerce store respects the WooCommerce hooks and template structure.

In case of difficulty, we recommend an alternative method to avoid running the risk of unnecessary damage to your website.

Recommended plugins for hiding the add to cart button

If using custom code proved too complex for your case or was not applicable due to the nature of your theme, don’t despair: as in many other cases, you can add this feature using WooCommerce extensions.

There are several alternatives on the market, but we recommend the WooCommerce Catalog Mode, a plugin created to allow the transformation of WooCommerce from a traditional store to a browse-only catalog, which is ideal for the function you are looking for and is continuously updated.

Let’s find out how to use it.

YITH WooCommerce Catalog Mode

The operation of the plugin is quite straightforward and can easily be used either for those who want to hide the add-to-cart button for all products in the store (thus creating a catalog) or in case you want to implement this change for a single product.

In both cases, after installing and activating the plugin, you need to go to the side menu and click on YITH > Catalog Mode. You will then be taken to the settings page:

In this first part, you can choose certain behaviors of the plugin, including whether to activate its functions only for guests or for all users, whether to activate geolocation filters (in case you want to disable adding to the cart for certain countries) and more.

Immediately below, in Step 2, are the settings for hiding the add to cart button. They can be used either in case you want to hide the button from all products, or you want to hide it only on some of them or show it only on some of them.

Hiding the add to cart button on all WooCommerce pages.

The first case is the easiest and you just need to use the following settings:

In the “Add to cart” settings for Catalog Mode, you just need to make sure that in the three boxes it is selected:

• Hide “Add to Cart”
• All Pages or Product Page (depending on where you want to hide it)
• All Products

This way you will have hidden the add to cart button on every type of page on your site, for every type of product.

Tips and tricks for better customization

If, on the other hand, you want to show the add the cart button on most products and hide it only on some, you should set it up like this:

With the boxes that should contain:

• Hide “Add to Cart”
• All Pages or Product Page (depending on where you want to hide it)
• Exclusion List products only.

This way you can specify later (and we’ll show you where) for which products to hide the add to cart button.

Similarly, if the result you want to achieve is the opposite (that is, hiding the add to cart button on most products and show it only on some) you can achieve this result with:

And the options you have to select are:

• Show “Add to Cart”
• All Pages or Product Page (depending on where you want to hide it)
• Exclusion List products only

And the exclusions list you can easily find by going back to the top of the page and clicking on “Exclusions List” instead of “Settings”.

Here you will be shown the products on the list (if you have already added any) and you can add more easily by clicking on “Add exclusion”:

You will be able to search for specific products, categories or tags, then whether or not to show a contact form and other custom options.

As mentioned, the whole thing is extremely intuitive and you can get the result you want (whatever it is) in a matter of very few minutes.

Frequently asked questions

Why hide the “Add to Cart” button in WooCommerce?

There can be any number of reasons, from an out-of-stock product, to one that is unavailable to certain customers or geographic ranges.

Is there a specific plugin to hide the “Add to Cart” button in WooCommerce?

The best plugin to achieve this is WooCommerce Catalog Mode.

Is it possible to hide the “Add to Cart” button only for certain product categories?

The WooCommerce Catalog Mode plugin allows you to hide the button only on specific products, categories or tags, depending on your needs.

How can I hide the “Add to Cart” button without changing the code on my site?

You can achieve this by using WooCommerce’s basic settings (which allows you to hide the button only on out-of-stock products) or by using a plugin such as WooCommerce Catalog Mode, which allows you to create a highly customizable catalog with the choice of where and when to show buttons.

By hiding the button, will users still be able to see the product price?

Yes, removing the button only prevents adding to the cart.

Is it possible to hide the “Add to Cart” button only for certain users or user roles?

You can only achieve this by using a plugin like WooCommerce Catalog Mode. Among its settings, you can enable the feature for all users, only guest users, and even site administrators if you want to see the result personally.

After hiding the button, can I easily restore it if I change my mind?

If you hid the button by including custom code to your php files, you will need to remove that code. Using the plugin, however, you can do this by simply removing that product from the exclusions list or by changing the plugin rules on the settings page.

Are there alternatives to completely hiding the “Add to Cart” button?

The plugin allows you to replace the button with other buttons and contact forms, such as WhatsApp, Email and more.

If I hide the “Add to Cart” button, can I still offer a “Request a Quote” option instead?

Yes, you can include a contact form so that you can be reached by the customer. Alternatively, you can use this plugin in conjunction with the WooCommerce Request A Quote plugin (which offers seamless integration) to allow the customer to add different products to the quote request and send it to you. You can accept or modify it and send it to the customer.

Conclusion

There can be numerous reasons why you want to hide the “Add to cart” button on WooCommerce. As much as the platform allows you to hide it only for out-of-stock products, using the WooCommerce Catalog Mode plugin you will be able to hide it whenever and wherever you want, thanks to the intuitive system and the exclusion list that provides a more user-friendly experience.

Apply the strategy you prefer with just a few clicks.