How to Hide Add to Cart Button in WooCommerce [Guide]

Are you looking for a way to hide Add to Cart button in WooCommerce? If yes then you are in the right place because this short tutorial, I will provide you with a solution to this problem. If you are familiar with WooCommerce, then you know that WooCommerce shop page customization results in better-customized user experience. We all know that the default version needs some upgrade to make your store look better.

Table of Contents

However, before you can make all these changes, the first thing you need to do is install the WooCommerce plugin. It is available for free and you can download it directly at the back end of your site.

In this brief tutorial, I will show you how to hide the add to cart button for a particular product and for a specific amount of time on the product and shop page.

Before we get to the detailed steps to do this, you might wonder why you may hide the add to cart button for a specific product. There are many reasons why you might want to do this, for example, if you are dealing with electronics such as mobile devices, many products are introduced a few days before they are allowed to purchase.

The specifications are released early so many online shop owners give detailed specifications of the products before they are available to be bought.

This means that the store owner cannot have the ‘Add to Cart’ button on the page, as they do not want people to buy the product just yet until it is available for purchase.

Hide Add to Cart Button WooCommerce

With all that said, let us now move to the solution. When dealing with this particular problem, the first thought that can in mind was to edit the template the files.

This could be a great approach, but it is not a wise solution for such small customization like the one at hand. Then I realized that WooCommerce allows multiple hooks, and with the help of these hooks, we can remove prices and buttons. Now let us look at the steps that you need to follow to achieve this.

a) Steps to Hide Add to Cart Button in WooCommerce for a Particular Product

For this solution, we are going to use a filter called ‘woocommerce_is_purchasable’ in which you can check whether a product is purchasable or not.

Additionally, we will be using a product ID that you need to make the changes to the shop and product page. For this example, I will be using a product that I have on my WooCommerce store, with a product ID of 185 that looks like this:

Here are the simple steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will hide the add to cart button in WooCommerce for a particular product.
Add the following code to the php file:

/**

 * @snippet       Hide Add to Cart Button in WooCommerce

*/

add_filter( 'woocommerce_is_purchasable', 'woocommerce_hide_add_to_cart_button', 10, 2 );

function woocommerce_hide_add_to_cart_button( $is_purchasable = true, $product ) {

    return ( $product->get_id() == 185 ? false : $is_purchasable );

}

To see the outcome, simply refresh the page and you should see this:

How the Code Works

In the code above, we check if the current product ID is 185. If it is that product, then it returns a false meaning that this product is not purchasable. However, if the product ID is not 185, then it returns true.

This implies that the product is purchasable. The ‘Add to Cart’ button will not be displayed on the product page if it is not purchasable.

b) Steps to Show the Add to Cart Button, After a Specific Date

Now that we know how to hide the Add to Cart Button from the shop and product page, for a particular product let us look as to how you can hide it for a particular time.

It is very simple and all you need to do is follow these steps. You might need to do this if the particular product has a release date, and you do not want to make the customization twice.

This method will save you a lot of time as it will be done automatically in the background without you having to do anything. This means that you need a release or launch date, as for my case I will be showing the button after the 10th of August 2020.

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will show add to cart button after a specific date.
Add the following code to the php file:

/**

* @snippet   Show the Add to Cart Button, After a Specific Date

*/




add_filter( 'woocommerce_is_purchasable', 'woocommerce_hide_add_to_cart_button', 10, 2 );

function woocommerce_hide_add_to_cart_button( $is_purchasable = true, $product ) {

$current_date = date('Y-m-d');

$release_date = date( 'Y-m-d', strtotime('2020-08-10') );

if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 185 ) {

$is_purchasable = false;

}




return $is_purchasable;

}

To see the outcome, you need to refresh the product page, and you should see this:

After the time has elapsed, then you should see the Add to Cart button:

How the Code Works

In the code above, we first check if the current date is less than the release date. In other words, we are just checking if the current date is not the release date. If the case is so, then the code returns a false, meaning that the ‘Add to Cart’ button will not be displayed.

However, it is important to note that all the solutions in this article will display ‘Read More’ for the product on the shop page with the link to the product page. This is how the product will display on the Shop page:

Conclusion

In this tutorial, I have given you a detailed systematic guide of how you can hide Add to Cart button in WooCommerce on the product page. In the first example, I showed you how you can hide this button on the product page for a particular product. In the second one, I demonstrated how you can hide Add to Cart button in WooCommerce for a specific time. This could come in handy especially if a product has a launch or release date.

Editorial Staff

How to Hide Add to Cart Button in WooCommerce

Hide Add to Cart Button WooCommerce

a) Steps to Hide Add to Cart Button in WooCommerce for a Particular Product

How the Code Works

b) Steps to Show the Add to Cart Button, After a Specific Date

How the Code Works

Conclusion

Similar Articles

Related