This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

✨ Vultr and Linode are back on Cloudways! VIEW PLANS→

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

Updated on February 20, 2024

6 Min Read
woocommerce add to cart button hide remove or disable

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. You can use managed WordPress hosting by Cloudways to host your WooCommerce store.

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.

Experience the Ease of WooCommerce Customization with Cloudways!

Subtle changes can make a big difference. With Cloudways hosting, customizing your WooCommerce store is a breeze..

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.

img

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

product ID

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

    }

}

hide button

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.

Drive Your Online Store’s Growth with Autonomous!

“Step into the future of hosting with Cloudways Autonomous. Experience seamless scalability, unmatched speed, and ironclad security for your website.”

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:

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.

Host Your WooCommerce Stores on our WordPress Servers for a hassle-free experience!

Forget hosting management and enjoy lightning-fast performance results with Cloudways managed hosting. Focus solely on growing your brand.

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

Q: How do I get rid of the Add to Cart option?

A: There are three ways to eliminate the add to cart button on a WooCommerce store.

  1. Remove the figure from the price fields.
  2. Enable stock management and set the product stock to zero.
  3. Set “WooCommerce-is-purchasable” to false for the specific product id.

Q: How do I remove the update cart button in WooCommerce?

A: Follow the steps below to remove the update cart button on your WooCommerce store:

  1. Open your theme’s function.php file.
  2. Make a hook function to add all the above code in the website’s header or footer.
  3. Add the function “codedocx_update_cart_button()” to your active theme’s function.php file.
  4. Save the changes.

Q: How do I edit the add to cart button in WooCommerce?

A: Edit the add to cart button on WooCommerce by following the steps below:

  1. Install the WooCommerce Custom Add to Cart Button plugin on your WordPress site.
  2. Go to Appearance → Customizer → WooCommerce → Add to Cart. 
  3. Choose the relevant setting, such as changing color or text.
  4. Click the Publish button.

Q: How do I disable the WooCommerce cart?

A: Disable the WooCommerce cart by following the steps below:

  1. Open functions.php file.
  2. Include the following hook.
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');

Q: How do I hide the shopping cart in WooCommerce?

A: Following the steps below will hide the shopping cart on WooCommerce.

  1. Go to your WordPress Dashboard
  2. Select Appearance → Customize → WooCommerce → General → Menu Cart
  3. Uncheck the Menu Cart: Display

Q: How do I remove the Buy Now button in WooCommerce?

  1. Go to WooCommerce Dashboard.
  2. Click Settings Payments → Stripe
  3. Uncheck the “Enable payment request buttons”.

Share your opinion in the comment section. COMMENT NOW

Share This Article

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 Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now