Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to hide the Add to Cart button in WooCommerce

How to hide the Add to Cart button in WooCommerce | tychesoftwares.com

If you are using WooCommerce for your store, there are many ways you can customize your store using different WooCommerce hooks & filters.

In this post, I will explain how you can hide the ‘Add to Cart’ button on the Shop & product page. But why would you need to hide the ‘Add to Cart’ button, you ask? Isn’t that how people will buy the products?

Well, there can be many reasons you want to hide the button. For example, nowadays, many products are introduced a few days before they are actually allowed to purchase. Many shop owners give detail specifications of the products before they are available to be bought. In such cases, they cannot have the ‘Add to Cart’ button on the page as they don’t want people to buy the product just yet.

Let’s look at how we can hide the button from the product page.

WooCommerce has a filter called ‘woocommerce_is_purchasable‘ in which you can check whether a product is purchasable or not.

For example – let’s hide the ‘Add to Cart’ button from a product whose ID is 335 –

In this example, we check if the current product ID is 335. If yes, then we return false i.e it is not purchasable. If the product ID is not 335, we return true (i.e the product is purchasable). If it is not purchasable, the ‘Add to Cart’ button will not be displayed on the product page.

The product page will look like this –

Hide Add to Cart button on product page
Hide Add to Cart button on Product page

 

Show Add to Cart button after a specific date:

Now let’s take this example a bit further. Suppose you want to display the ‘Add to Cart’ button on a specific date (which can be the product’s launch date). This can be achieved automatically without you having to do anything.

For example – Your product launch is after 10th of October, 2018. You want to hide the ‘Add to cart’ button until then. And display the button on 10th October so that people can buy the product.

Here we check if the current date is less than the release date i.e if the current date is not the release date. If yes, then return false i.e hide the ‘Add to Cart’ button.

Both the above examples will display ‘Read More’ for the product on the shop page with the link to the product page. This is how the product will be displayed on the Shop page –

Hide Add to Cart button
‘Add to Cart’ changed to ‘Read More’ on Shop page

 

These examples can be used if you want to give a sneak peak of your product to your customers. You can do this for a single product or multiple products. Try this technique on your store and let us know how it goes.

You can also achieve this with the below mentioned plugins. But if the above code snippet meets your needs, then there is no need to install a plugin.

  1. Woocommerce Hide Add To Cart Button

  2. Remove Add to Cart WooCommerce

 

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
4 Comments
Newest
Oldest
Inline Feedbacks
View all comments
james
3 years ago

I am having an unexpected error while removing add to cart button on my product page. I am using this tutorial for my reference code https://wpitech.com/hide-disable-add-to-cart-button-in-woocommerce-store/ . Is there any other way to hide add to cart button. This is the code that I am using to hide add to cart button on my product page

function flav() {
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();

Laura
4 years ago

This is great, thank you! How do you add multiple ID entries? Say two, for instance? I tried adding another ID with a comma but it produced an error. Thank you!!

keng007
1 year ago
Reply to  Laura

+1

Michael
9 months ago
Reply to  keng007

Whats’ the fix?

4
0
Would love your thoughts, please comment.x
()
x