It’s no secret that the Add to Cart button is one of the most important elements on a WooCommerce product page. This button allows customers to add products to their shopping cart, and is therefore a crucial part of the WooCommerce user experience.
There are times when you might want to hide or disable the Add to Cart button on your WooCommerce product pages. For example, you might want to disable the button for out-of-stock products, or products that are only available to purchase in-store.
In this article, we’ll show you how to hide or disable the Add to Cart button in WooCommerce. We’ll also provide some CSS code that you can use to style the button if you need to.
It’s worth noting that there are a number of plugins available that can help you manage your WooCommerce inventory, including plugins that allow you to disable the Add to Cart button for out-of-stock products. We recommend using a plugin like WooCommerce Product Availability Notifications if you need this functionality.
Once you have installed and activated the plugin, go to Products > Settings and select the ‘Notifications’ tab.
From here, you can choose to enable or disable the Add to Cart button for out-of-stock products. You can also specify whether you want to show a notification message or not.
If you’re not using a plugin, or if you want more control over how and when the Add to Cart button is displayed, you can use some code snippets. In the next section, we’ll share some code snippets that you can use to hide or disable the Add to Cart button in WooCommerce.
Code Snippets
The following code snippets can be used to hide or disable the Add to Cart button in WooCommerce. We’ll start with some code that will hide the Add to Cart button completely. You can add this code to your child theme’s functions.php file:
add_filter( ‘woocommerce_is_purchasable’, ‘__return_false’ );
/* Or */
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’);
remove_action( ‘woocommerce_simple_add_to_cart’, ‘woocommerce_simple_add_to_cart’);
remove_action( ‘woocommerce_-hooked-woo_-buttons’, ‘woocommerce__button’); /* 2.5 */
remove action(‘woocommerce_-product_-info’,’woocommerce__button’); /* 3+ */ /* Or */ add action(‘woocommerce_-product_-info’,’myprefix__button’); function myprefix__button(){ echo ‘My Button’; } ?> The code above will completely remove the Add To Cart buttons from your site. If you only want to remove these buttons for specific products, then you can use one of the following snippets: For specific product ID: function myprefix__is purchasable(){ global $product; if ( $product->get id() == 123 ){ return false; } else { return true; } } add filter( ‘woocommerce__is purchasable’ , ‘myprefix__is purchasable’ ); For specific product category: function myprefix__is purchasable(){ global $product; if ( has term( ‘mycategory’ , ‘product category) , $product->id ){ return false; } else { return true; } } add filter( ‘woocommerce__is purchasable’ , ‘myprefix__is purchasable’ ); For specific product tag: function myprefix__is purchasable(){ global $product; if ( has term( ‘mytag’ , ‘product tag) , $product->id ){ return false; } else { return true; } } add filter( ‘woocommerce__is purchasable’ , ‘myprefix__is purchasable’ ); The snippet above will hide the Add To Cart buttons for all products in the specified category or tag. You can also use these snippets to hide the buttons for specific product types: For specific product type (simple): function myprefix__simple _addtocart _url($url){ global $post; if ( get post type($post->ID) == “simple” ) { return “#”; } else { return $url; }} add filter(‘simple _addtocart _url’,’myprefix__simple _addtocart _url’); For specific product type (variable): function myprefix __variable _addtocart _url($url){ global $post; if ( get post type($post->ID) == “variable” ) { return “#”; } else { return $url; }} add filter(‘variable _addtocart _url’,’myprefix __variable _addtocart _url’); For specific product type (grouped): function myprefix ___grouped _addtocart _url($url){ global $post; if ( get post type($post->ID) == “grouped” ) { return “#”; } else { return $url; }} add filter(‘grouped _addtocart _url’,’myprefix ___grouped _addtocart _url’); The snippet above will hide the Add To Cart buttons for all grouped products on your site.
You can also use these snippets to hide the buttons for specific product variations: For specific product variation ID: function myprefix __variation _price ($price){ global $post, $wpdb;; if ( get post type($post->ID) == “variation” && get ID() == 123 ){ // Return Pricehtml here.. eg: “$9.99″ ; }} add filter(‘variation price’,’myprefix __variation price’); For all variations of a specific parent product: function myprefix __parent price ($price){ global $post, $wpdb;; if ( get post parent ID() == 123 ){ // Return Pricehtml here.99″ ; }} add filter(‘parent price’,’myprefix __parent price’); The snippet above will hide all variations of a specified product from your site frontend & backend . If needed following css rules could be used too : #content div .quantity input::before { content:””; float:left; width:20px;} #content div .quantity input::after{ content:””; float:right} With these snippets in place, users will still be able view information about products on your site frontend & backend . If they try click on “Add To Cart” they’ll see a message telling them that this functionality isn’t available for that particular product.
