How to Remove the Add To Cart Button in WooCommerce

The Add to cart button plays a crucial part in your WooCommerce store. It functions as a useful call-to-action button for any online business. But sometimes, you are probably not selling your products for some reason or want your potential clients to connect you prior to implementing a purchase.

Regardless of which cases, you will need to remove this kind of button. So, keep track of this article because we will take you a tour over how to remove an Add to Cart button in WooCommerce. Then, you could find out the proper way that meets your need to apply to your WooCommerce store.

Why do you need to remove the add to cart button?

Before going into details on how to remove the add to cart button WooCommerce, take some seconds to have a glance at why you need to do it. Getting rid of this button has become a perfect method to disable the order process for specific stores as well as products. In the contemporary time, it seems to be among the most sought-after questions that store owners seek.

At first, you might find this activity quite counter-intuitive. But after this article, you will explore that it would be extremely helpful in several situations. Not to mention the ability to offer various options to customize your online store, there exists a number of reasons that require you to remove the add to cart button.

• You are probably turning your WooStore into catalog mode.

• Your product might be out of stock, so deleting the add to cart button makes it not available for customers to buy.

• You expect users to schedule, arrange an interview or send one message by using this button rather than keep track of the conventional purchasing process on WooCommerce.

• There are cases when you want to distribute the add to cart button for different logic conditions.
• Your product is not for sale anymore.

How to remove the add to cart button in WooCommerce

There are more cases that you wish to hide this kind of button. Now, let’s indulge yourself in numerous ways that you can use to execute the removal process. Here we are about to mention different methods with detailed steps to assist you in processing easily and correctly.

One piece of advice for you is that you should make a careful backup on your site. Because you should be aware of something that may go wrong when we edit the core files in WordPress, you could utilize the child theme to enable the removal to be easier. If you do not own one, create one by following our below instructions or using a plugin for the child theme.

1. Delete the WooCommerce add to cart button throughout your site

Initially, WooCommerce’s add to cart button is by default. This is to say; it is neither customizable nor removable. Hence, you could not modify its text or even connect it to one contact form rather than add any product to customers’ carts. If you wish to remove the button add to cart completely from your store’s all products, this is a useful way to go. As soon as you have finished the process of putting in a product as well as configuration, you can notice a product display on your site with its default settings. So, there are a few steps that you are required to do to remove this button.

The most straightforward way is to apply the script from the child theme’s functions.php file. You can notice that this button Add to cart is on the right alongside the product. What you need to do is to add the below code on your file functions.php. Be noted that this script may break this kind of file. Therefore, it would be better if you put the code in your woocommerce.php file.

Your task is to enter the WordPress directory if you want to access this file. After that, you approach plugins to select both woocommerce.php file or functions.php file once you see the folder wp-content.

With the 1st hook “remove_action()”, you could disable the button add to cart on your store’s product page. In the meantime, the second hook can be used for disabling the button Add to cart on your store’s shop page. Nevertheless, a smarter way is to aim at disabling the selection to purchase products. Therefore, you can make your products and items unpurchasable; thus, preventing customers from adding products to their cart.

Furthermore, you can also perform that to enable your products to be unpurchasable throughout your store with the below helpful script:

Bear in mind that this only disables the WooCommerce add to cart button without removing it. Instead, it is replaced by the button “Read more”. This will redirect users to your store’s product page, where no button could be found.

In case you ever wish to hide the button “Read more” apart from Add to cart button, using the CSS rule is a great solution. But consumers can not purchase anything because of not being able to add any product to their cart. So, if possible, the recommendation for you is to apply hook “add_filter” rather than “remove_action()”.

2. Hide WooCommerce’s add to cart button for non-registered users

As your site always has registered users and non-registered ones. Suppose you are running a campaign with special offers and discounts for only logged-in users. To do that, you could build one landing page, then send them a special email that includes a link for the registered customers only.

Do you think that your logged-in clients might share the link with the others? One tip to avoid this situation is to ensure that the right consumers will receive a special offer from your WooCommerce store. And you could remove this button Add to cart from WooStore only for non-registered users. Follow us strictly with the below code in the child theme’s functions.php file.

Thanks to this function from native WordPress “is_user_logged_in()”, you could easily disable the button add to cart for only non-registered users.

3. Remove WooCommerce add to cart button for a few products

There are some situations in which you want to keep the add to cart button WooCommerce out of sight for specific products. Here are several ideas that you could apply to obtain this.

3.1. Empty your WooCommerce’s products

First of all, navigate to specific products that you want to remove an add to cart button from them. After that, make their price fields empty. Keep going by approaching the dashboard and select the section “Products” before clicking “All products”. Continue to access the section “Quick edit”.

Once you enable your selected products to be empty, these products are never available for adding to the cart. It seems that this is easy as a piece to execute in this way. Thus, if you encounter difficulties in working with woocommerce.php or functions.php files, code, or snippets, add this to your pocket list to follow easily.

3.2. Put in a filter

Another easy-to-use solution to hide the button Add to cart for specific products is to utilize the familiar functions.php file. Copy the below script and paste it to your child theme’s file functions.php.

Looking at the sample script, the WooCommerce add to cart button will be disabled for products having IDs 624 & 625. So, you can alter your store on WooCommerce by simply replacing these IDs with IDs of your WooStore’s products. It is your choice to add as many products as you want. Remember to separate those IDs with the use of a comma.

In case you are not familiar with finding out your product ID. Simply navigate to the section “WordPress dashboard”. Then pick up “WooCommerce” and choose “Products”. Next, hover over the list of products as below image:

An alternative method to explore the ID of a product is by clicking on a certain product, you could notice its ID, which lies in your browser’s URL.

3.3. Disable the button add to cart for that specific products

This might be the easiest way to disable this kind of button for selected products. When you disable it, your clients can not purchase it anymore.

4. Delete WooCommerce’s add to cart button for store’s user roles

When it comes to user roles on your WooStore, we also come up with a solution to hide this button for specific user roles. Let’s take an easy-to-understand example. In case you are fond of removing the add to cart button for the only admin user. See the below script:

This kind of script will retrieve the user object in WordPress, then apply these two conditionals. The first conditional is to indicate if one user comes with a role; whereas, the other will make your products unpurchasable when this user role is exactly matching with the previously specified one. In this situation, the user role will be the administrator.

The above case is for the administrator role. So, if the user role is different, you could adapt this script to modify which roles you do not wish them to see WooCommerce’s add to cart button. To implement this function, just edit the specific role in “if($current_user->roles[0]==’your_role’){“.

5. Hide the store’s add to cart button from archive pages as well as the homepage

In the first method, we come up with the idea and code to remove WooCommerce’s add to cart button for the whole site. But, if you want to remove only archive pages and the homepage, we could help you. Your task now is to apply the below code for not only functions.php files but also woocommerce.php files.

Furthermore, there is also a different way to disable the add to cart button from your archive pages. It involves applying add-to-cart actions. However, you need to bear in mind that using these actions might affect anything that is hooked into those actions. To hide this button, simply use the following code:

Once you have finished adding the above-listed code into the WordPress child theme, you are done removing the button add to cart from archived pages of your WooCommerce store. This removal will include search result pages, product tags page, pages of product category, and the shop page.

Likewise, you could also use conditionals tags for customizing the pages as well as the users that you wish to remove the add to cart button. To be more specific, you could apply the below filter to indicate the pages that you are about to use the above-listed code to:

6. Disable add to cart button WooCommerce temporarily

In case, you only want to enable this button removal temporarily. Now, it is time for you to take further steps to create a combination of things you have known from the above-mentioned methods. Let’s say you are going to release a product. Then you will build your product page, encompassing all features of the product.

If you are interested in using the created page for constructing some hype; thereby boosting the promotion of the product itself prior to its launch. In this situation, you could remove the button Add to cart up till its launching date. After that, you hope it will display it at the launching day automatically.

Here is a practical example. You are about to launch a product on 2021, July 30th. Therefore, you want to hide the WooCommerce add to cart button until then. Next, you are keen on displaying it on that certain date. It is a piece of cake to do that. Follow the below script:

This code aims at replacing the button add to cart with another button named “Read more”. Then this “Read more” button will redirect users to your store’s product page up to the launching date. So, do you know how this type of script will work? It is simple to understand. This code will make a comparison between the launching date and its current date and whether this current day will be earlier or not, it enables that product to be unpurchasable.

If this current date seems to equal or might be later than its launching date, this means your product is at its availability for buyers to purchase. Moreover, this also means that the button Add to cart will be displayed automatically. One important note is that you should not forget to specify the ID of your product, in addition to the date.

Bonus: To make your store and products more impressive, you can customize the button Add to cart to your expectation. Aside from hiding or removing this button, one more thing you can do is to modify its color or text. And you could also choose where you could add the wanted text or edit the button behavior.

Let us cite an easy-to-understand example involving how to modify the button add to cart text. If you are fond of displaying a text such as “Buy this item” rather than “Add-to-cart”, you could follow strictly the below code in the file functions.php:

As regards changing the button color to make it more appealing to customers, you could use the following script, and select that color that you are going to apply to your single buttons.

Besides these two typical examples, you can even perform more actions to customize your WooCommerce buttons in many different ways.

7. Remove the button add to cart for specific categories

Another not-to-be-missed method to help you remove this button on your WooCommerce store is to delete it for your specific categories. When you need to hide this kind of button from a certain category while remaining in the other categories. To do this, just simply apply the below snippet:

To make it work for your store’s categories, the <CATEGORY_SLUG> will be replaced by the product category’s actual slug. Follow our specific instance as below.

You navigate to your dashboard. Next, navigate to the section “Products” and select “Categories”. Here, you could notice every category of your products, coupled with their slugs. For example, if your product is hoodies. You take a fancy to hide this button from products in that category for hoodies. The following snippet is useful for you:

After applying the above snippet, you will be the result in which the store’s hoodies category will not display that button Add to cart anymore.

We would like to take a second example to help you practice it easily within your store product category. If your business is to sell laptops. And you want to need to hide the button Add to cart from the “Laptops” category, you could use the following code:

As you could see the third line with the category name. There you only need to replace the category “Laptops” with your product category. As a result, you could disable the button Add to cart for that product category.

Final thoughts

You have come a long way with us to know about many different methods to hide, delete, remove, or disable WooCommerce’s add to cart button. Reading here means that you have understood how to remove Add to Cart button from the whole WooCommerce site, for specific products, categories, user roles, or hide it temporarily. Our guide will undoubtedly provide you with flexibility in customizing your WooStore in many different situations. So, take no hesitation to share this piece of the article if you are keen on it. And hope and find it useful for you. Keep track of us for further tips and tricks to customize and improve your WooCommerce business.