How to Disable Add to Cart Button in WooCommerce

If you are running an online store using WooCommerce, there may be times when you need to temporarily or permanently disable the “Add to Cart” button for certain products. Whether you’re doing maintenance, managing out-of-stock items, or building a catalog-style website, you need to know how to disable this essential feature. In this guide, we’ll explore several methods to accomplish this in a straightforward and easy-to-understand manner (disable add to cart button woocommerce).

Method 1: Using Custom CSS & Jquery

This option is handy if you want more control over the styling of the button or if you want to hide it temporarily. Follow these steps:

Log in to your WordPress dashboard.
Go to “Appearance” and select “Customize.”
In the Customizer, select “Additional CSS.”
Add the following code & Click “Publish” to save your changes.

				
					/* Hide the Add to Cart button on single product pages */
.single-product .cart {
    display: none;
}

/* Reduce the button opacity to indicate it's disabled */
.single-product .cart .button {
    opacity: 0.5;
    cursor:default;
}

You can also use jQuery to disable the “Add to Cart” button dynamically on your website. Here’s how:

Log in to your WordPress dashboard.
Go to “Appearance” and select “Theme Editor.”
On the right, find and click on your theme’s “footer.php” file to open it.
Add the following jQuery code just before the closing </body> tag:

				
					<script>window.addEventListener('DOMContentLoaded', function() {
    jQuery(document).ready(function($) {
        // Replace .single-product with your product page's class or ID
        $('.single-product .cart .button').attr('disabled', 'disabled');
    });
});</script>

				
					<script>window.addEventListener('DOMContentLoaded', function() {
    jQuery(document).ready(function($) {
        // Replace .single-product with your product page's class or ID
        $('.single-product .cart .button').click(function(e) {
            e.preventDefault();
        });
    });
});</script>

Click “Update File” to save your changes.

This jQuery code will disable the “Add to Cart” button on the product page.

Note: Use any one of the above Javascript code

Method 2: Editing Theme Functions (For Advanced Users)

For advanced users who are comfortable editing code, you can disable the “Add to Cart” button by modifying your theme’s ‘functions.php’ file. Here’s how:

Log in to your WordPress dashboard.
Go to “Appearance” and select “Theme Editor”.
On the right, find and click “Theme Functions” (functions.php) to open it.
Add the following code at the end of the file & Click “Update File” to save your changes.

				
					/* Disable the Add to Cart button on single product pages */
add_filter('woocommerce_is_purchasable', '__return_false');

This method is more technical but gives you complete control over the functionality of your online store.

Conclusion

Disabling the “Add to Cart” button in WooCommerce can serve various purposes, from maintenance to showcasing products in a catalog-style manner. We’ve discussed two methods. Choose the method that best suits your skill level and requirements, and take control of your WooCommerce store with ease.

I hope this article helped you to learn How to disable add to cart button woocommerce. If you have any doubts or problem with the code, comment below to find the solutions. Also share this blog if you find this useful.

Want to build professional website for your Business or Store, Get a free quote here

Click here to get Premium Plugins and Themes at rs.249. Get 20% Off on your first order “WELCOME20”