How to Hide, Remove, or Disable the Add to Cart Button in WooCommerce

There are plenty of reasons you might want to hide, remove, or disable the add-to-cart button on your WooCommerce store. Perhaps the product displayed in your store is not on sale, or you want to show the product catalog or your products have gone out of stock.

That’s why you need greater customizability to update your store’s functionality per your demands. A huge repository of WordPress plugins and WooCommerce extensions offers users extensive customization options that result in a more user-friendly experience.

In this article, I will show you how to hide, remove, or disable the add-to-cart button on your WooCommerce store, catering to out-of-stock scenarios or product catalog displays.

Why Hide, Remove, or Disable the ‘Add to Cart’ Button?

The ‘Add to Cart’ button is a crucial component of any WooCommerce store.

It’s the gateway between browsing and buying, serving as the first step in the customer’s purchasing journey. But there might be scenarios where you want to hide, remove, or disable this button.

Perhaps you’re running a catalog site with no direct purchases or want to make certain products viewable but not purchasable. Whatever your reason, understanding how to manipulate this button gives you greater control over your store’s functionality.

Understanding the Difference Between Hiding and Removing

While hiding the ‘Add to Cart’ button makes it invisible, removing it entirely deletes the button from your site’s code. This means that even if someone inspects your site’s code, they won’t find the button. This can be useful if you want to prevent savvy users from bypassing your store’s intended flow.

💡 Note: Before making any changes, ensure your WooCommerce site is backed up. If anything goes wrong, you can restore your store to its previous state.

Hide Add to Cart Button From WooCommerce Product Page

Let’s start with removing the ‘Add to Cart’ button from both the product detail page and the shop page (product listing page). To implement this, I will use the following hooks:

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

You can insert these hooks wherever you find suitable. Typically, these hooks are added to the functions.php file located in your theme folder.

However, in some instances, this might lead to errors. Therefore, I recommend placing these hooks in the woocommerce.php file located in the plugins folder.

Here are the steps to access the woocommerce.php file:

• Navigate to WordPress → wp-content.
• Click on Plugins → WooCommerce → woocommerce.php.

Next, add the following code:

/**

 * Main instance of WooCommerce.

 *

 * Returns the main instance of WC to prevent the need to use globals.

 *

 * @since  2.1

 * @return WooCommerce

 */

function WC() {

    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();

}

After adding the code, save the file and refresh your page. If done correctly, you should see that the ‘Add to Cart’ button has been removed from your page.

Hide WooCommerce Add to Cart Button Conditionally

There may be instances where you only want to hide the ‘Add to Cart’ button for specific products. In such cases, a conditional approach is required.

Hide Woocommerce Add to Cart button for a Specific Product

Follow these steps to hide the ‘Add to Cart’ button for a specific product:

• Navigate to WordPress Dashboard → Products → All Products.
• Hover over the product for which you want to hide the ‘Add to Cart’ button and note down the product ID (in this example, the ID is 25).

Next, add the following code to your functions.php file:

add_action( 'woocommerce_after_shop_loop_item', 'hide_add_to_cart_for_specific_product', 10 );

function hide_add_to_cart_for_specific_product() {

    global $product;

    if ( 25 == $product->get_id() ) {

        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 );

    }

}

With this code, the ‘Add to Cart’ button will be hidden for the product with ID 25. In this case, it’s a customizable mug.

Hide Woocommerce Prices on the Shop and Category Pages

To remove WooCommerce prices on the shop and category page, you need to open the functions.php file and add the following code;

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

By adding this code, you remove the product price on the shop and category pages. Here’s the result:

Remove the Add to Cart Button for Specific Products

There are three methods to remove the ‘Add to Cart’ button from specific product pages:

1. Remove the value from the price fields. This will result in the product no longer having a price, which in turn removes the ‘Add to Cart’ button.
2. Enable stock management and set the product stock to zero.
3. Use the filter for the woocommerce_is_purchasable hook.

Use woocommerce_is_purchasable Hook

I will use a filter that targets a specific product ID for which I want to remove the ‘Add to Cart’ button.

Whenever this filter identifies the product ID of our target product, it will return false. As a result, while the price will still be visible, a notice will replace the ‘Add to Cart’ button stating, “Product cannot be purchased”.

To implement this, add the following code to your functions.php file.

add_filter('woocommerce_is_purchasable', 'woocommerce_cloudways_purchasable');

function woocommerce_cloudways_purchasable($cloudways_purchasable, $product) {

return ($product->id == your_specific_product_id (like 22) ? false : $cloudways_purchasable);

}

Disable Instead of Hide or Remove Add to Cart Button

Disabling the ‘Add to Cart’ button differs from hiding or removing it.

When you disable the button, it remains visible but becomes unclickable. This can be useful if you want to show that a product is normally available but is currently out of stock or unavailable for other reasons.

Here’s how you can disable the ‘add to cart’ button with a custom code:

• Navigate to Appearance → Theme Editor and find the functions.php file.
• Add the following code to disable the ‘Add to Cart’ button:

add_filter( 'woocommerce_is_purchasable', 'disable_add_to_cart_button' );

function disable_add_to_cart_button( $is_purchasable ) {

    // You can add conditions here to disable the button for specific products

    return false; // return false disables the 'Add to Cart' button

}

•  Click ‘Update File’ to save your changes.

Now, the ‘Add to Cart’ button should be disabled on your WooCommerce store. Remember, this will prevent customers from adding items to their cart, so ensure this aligns with your store’s strategy.

Summary

In this blog post, we’ve unlocked the power of WooCommerce by mastering the ‘Add to Cart’ button. I’ve shown you how to hide, remove, or disable it, each with its own unique benefits.

I encourage you to try these methods and see the difference they can make in your store. Whether you’re looking to streamline your catalog or manage product availability, these techniques offer a new level of control.

So why wait? Dive in and start customizing your WooCommerce store today!

Frequently Asked Questions

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

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

Get Connected on: Twitter Community Forum