WooCommerce is a powerful plugin for transforming your WordPress site into a fully-functional e-commerce platform.
Sometimes, you may need to disable the “Add to Cart” button for specific products or categories. Whether products are temporarily out of stock, you want a catalog without selling online, or you have other reasons, this guide will help you achieve your goal seamlessly.
Why Disable the “Add to Cart” Button?
Disabling the button can be useful in various situations:
-
Out of Stock: Prevent customers from purchasing items that are currently unavailable.
-
Catalogue Mode: Showcase your products without immediate purchase options.
-
Pre-launch Products: Display upcoming products to generate interest without selling yet.
-
Exclusive Products: Limit purchase options to certain user roles or members.
Methods to Disable the “Add to Cart” Button
1. Use a WooCommerce Plugin
The simplest way is by using a dedicated plugin.
Steps:
-
Install and Activate: Search for a plugin like YITH WooCommerce Catalog Mode in the WordPress repository.
-
Configure Settings: Enable catalog mode in the plugin settings. This disables the “Add to Cart” button site-wide or per selected category.
-
Customize: Some plugins allow custom messages or actions when the button is disabled.
2. Use a Code Snippet for Specific Products
For a hands-on approach, you can add custom code.
Steps:
-
Go to Appearance > Theme Editor in your WordPress dashboard. Open the
functions.phpfile of your active theme. -
Add this code to disable the button for specific product IDs:
function carter_disable_add_to_cart( $is_purchasable, $product ) {
// Define product IDs to disable the Add to Cart button
$disabled_product_ids = array( 123, 456 );
if ( in_array( $product->get_id(), $disabled_product_ids ) ) {
return false;
}
return $is_purchasable;
}
-
Save changes. The button is now disabled for the specified products.
3. Disable for Out-of-Stock Products
WooCommerce has a built-in option for this:
-
Go to WooCommerce > Settings > Products > Inventory.
-
Ensure Enable stock management is checked.
-
Check Hide out of stock items from the catalog.
4. Use CSS for a Quick Solution
For a temporary or design-specific fix, you can hide the button with CSS.
-
Go to Appearance > Customize > Additional CSS.
-
Add this code:
.woocommerce .add_to_cart_button {
display: none !important;
}
-
Click Publish to apply the changes.
Conclusion
Disabling the “Add to Cart” button can help you manage product availability and customer interactions strategically.
-
Plugins offer a simple, flexible solution.
-
Custom code gives precise control for specific products.
-
CSS is a quick and temporary fix.
Always back up your site before making code changes and test thoroughly to ensure everything works correctly.
By following these methods, you can confidently control your WooCommerce store’s functionality while maintaining a smooth shopping experience for your customers.