How to Hide ‘Add to Cart’ Button in WooCommerce 2022 wordpress

The first few results looked pretty good. They were from credible sources, like wordpress.org, WooThemes, Themelocation and PootlePress. All of these, in a sense, asked me to do the same thing; and that was to remove two actions:

• woocommerce_template_loop_add_to_cart
• woocommerce_template_single_add_to_cart

Here’s the code for the same:

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', 30 );

The reason being that the ‘Add to Cart’ button is displayed on these two actions.

This sounded perfect. It was just what I needed.

I didn’t give it another thought, and went ahead and used it. The add to cart button was removed from the needed WooCommerce product pages.

Now, in my coding rulebook, there’s one rule I always follow: ‘Test any changes before you proceed’. So I did, and…..

Uh oh!

My changes had affected another plugin on the site. 🙁

I had to investigate the reason for this. And while doing so, I realized the approach I had chosen to hide the add to cart button was incorrect. But luckily, I found the right solution.

When Re-using Code… Understand What Every Line Does Before Using It

More often than not, developers like you and me turn to Google, for an answer. We think the same way- “I can’t be the only one who’s faced this problem”, “Surely there are others who’ve solved this”– And you try to search for an answer, to save time.

I’m not against re-using code.

But you’ve got to investigate the code, and test it well before using it.

The problem I faced was not critical. But the two lines of code which were seemingly innocent, packed some ammo I didn’t know I was unleashing.

You see, these actions (which are functions), fire additional hooks. For example, the woocommerce_template_single_add_to_cart function which resides in includes/wc-template-functions.php, contains the following piece of code:

function woocommerce_template_single_add_to_cart()
{
    global $product;
    do_action( 'woocommerce_' . $product->product_type . '_add_to_cart' );
}

As you can see, it calls a method based on the product type. So, if the product type is ‘Simple’, it will call woocommerce_single_add_to_cart, which calls another template function.

So at the end removing the hook leads us to remove template files, for each WooCommerce product. And while the intention of removing the hook was to hide the add to cart button, it ends up removing a lot more than that.

The Right Solution is Often Officially Documented

Now as mentioned, further investigation did lead me to the right answer. And with a plugin like WooCommerce, the right way to remove the add to cart button was using a simple filter.

If you look at the code single-product/add-to-cart/simple.php, you’ll notice a simple filter:

global $product;
if ( ! $product->is_purchasable() ) {
    return;
}

Quick note by WooCommerce on what this hook is used for:

The above code is run before any other functionality is checked. If the filter is_purchasable is set to true for the product, the ‘Add to Cart’ button is displayed, else the button is hidden.

And there lay the answer.

So, you just need to add the following:

add_filter( 'woocommerce_is_purchasable', '__return_false');

This small line of code will render the product unpurchasable and do it in a pretty simple way, and no hooks or templates will be removed, thus no incompatibility issues would creep up.

Quite often than not, we turn to Google (or Bing if you would prefer to do so), to look for an answer. But there isn’t a guarantee that the most popular answer is the right answer.

As a general guideline, always remember to do the needed research before implementing the solution.

That’s all from me for now! Until next time, happy coding 🙂

global $product;
add_filter( ‘woocommerce_is_purchasable’, ‘__return_false’);
if ( ! $product->is_purchasable() ) {
return;

}