Removing the \u201cAdd to Cart\u201d button from WooCommerce using code<\/h2>\n\n\n\n
If you are comfortable with editing your theme code, then this is the easiest way to disable the “Add to Cart” button from your WooCommerce<\/a> store. Just add the following code snippet in the functions.php file file of your currently activated theme.<\/p>\n\n\n\n This code snippet will remove the \u201cAdd to Cart\u201d button on the shop page as well as product pages. However, this solution is not very flexible.<\/p>\n\n\n\n Using a snippet of code like the example above is the most common method to hide the \u201cAdd to Cart\u201d button, but it may not be the best solution for you.<\/p>\n\n\n\n Adding this code snippet to your functions.php file removes the \u201cAdd to Cart\u201d button sitewide. You must delete the code to get your \u201cAdd to Cart\u201d button back.<\/p>\n\n\n\n The WooCommerce<\/a> \u201cAdd to Cart\u201d button also can be hidden using CSS in the theme customiser instead of editing the theme directly.<\/p>\n\n\n\n The exact code will depend on your theme. You will need to identify the CSS class for your \u201cAdd to Cart\u201d buttons, or your entire add to cart form. This class may be different for variable products and simple products so you will want to check both.<\/p>\n\n\n\n The standard CSS classes for the \u201cAdd to Cart\u201d button are:<\/p>\n\n\n\n The classes above are for the \u201cAdd to Cart\u201d button only and have no impact at all on the quantity field or variable product options.<\/p>\n\n\n\n If you want to hide the quantity and variable product options you will need the CSS classes for the \u201cAdd to Cart\u201d form.<\/p>\n\n\n\n The standard CSS classes for the \u201cAdd to Cart\u201d form is:<\/p>\n\n\n\n To use these CSS classes to hide your \u201cAdd to Cart\u201d button, open up your theme customizer by going to Appearance > Customise in the WordPress dashboard.<\/p>\n\n\n\n Expand the \u201cAdditional CSS\u201d section and if there is any code already there, scroll right to the end.<\/p>\n\n\n\n To just hide the button, start a new line and add this code:<\/p>\n\n\n\n Or to hide the quantity and variable product options, add this code:<\/p>\n\n\n\n Again, these code snippets will hide the \u201cAdd to Cart\u201d button for your entire site and will need to be removed to bring the button back. It is possible to selectively hide the button if you know the product ID, but it does get complex, especially if you want to hide the \u201cAdd to Cart\u201d button on a number of products.<\/p>\n\n\n\n If you know the ID of the product, your code would look like this:<\/p>\n\n\n\n In the above example, 2619 is the product ID. You would duplicate this snippet and update the number for each product you wanted to hide the button for. Eg,<\/p>\n\n\n\n Disabling or hiding the \u201cAdd to Cart\u201d button using code is a quick way to remove the button but could be a headache if you only want to remove the \u201cAdd to Cart\u201d button from a selection of products.<\/p>\n\n\n\n Instead of adding code, there are two other approaches that make managing the \u201cAdd to Cart\u201d button on a per-product basis.<\/p>\n\n\n\n WooCommerce<\/a> has stock control built-in. This stock control functionality can be used to prevent customers from buying a product that has a stock level of 0.<\/p>\n\n\n\n This approach adds a message to the product page telling customers that the product is currently sold out. As long as you do not permit backorders, the \u201cAdd to Cart\u201d button will be disabled.<\/p>\n\n\n\n The downside of stock control is that you can\u2019t really do anything else besides tell customers it is out of stock. You can allow customers to signup to be notified when the product is back in stock, but that\u2019s it.<\/p>\n\n\n\n The Elementor<\/a> page builder is extremely powerful, and if you have the Pro version, you can customise your product and shop templates. I’m not going to go through the process of building your templates in this article, you can read more about how to do that here<\/a>, but we are going to look at how you can remove the “Add to Cart” button. If your WooCommerce<\/a> site wasn’t built with Elementor<\/a> or at least with an Elementor<\/a> compatible theme, then this option won’t be worth considering for your site as it will likely need a significant amount of work to get Elementor playing nicely with your theme.<\/p>\n\n\n\n Edit your product template in Elementor and look for the “Add to Cart” widget. This is the Elementor widget that handles displaying the “Add to Cart” button and the associated form for quantities and variable product options. If you just want to remove this from every product, you can simply delete the widget from the template. However, if you only want to remove it from some products, you have two choices.<\/p>\n\n\n\n The first choice requires creating a second product template in Elementor. This template should be identical, or almost identical to your main product template but without the “Add to Cart” widget. When you set the display conditions for this template, you will need to include only the products or categories that you don’t want to have the “Add to Cart” widget on. Using a second template also gives you the ability to add different widgets in for these products. For example, an enquiry or quote request form.<\/p>\n\n\n\n The second choice is to use the Dynamic.ooo plugin<\/a> to add display conditions to the “Add to Cart” widget. This plugin is pretty handy as it lets you use all kinds of criteria to define when to display a widget. So, you could choose to hide the “Add to Cart” widget for specific products. You could also add a widget, like a quote request form and configure the display conditions so it is only visible for the people who can’t see the “Add to Cart” widget. <\/p>\n\n\n\n I use Dynamic.ooo<\/a> anytime I have more complex display criteria for any widgets in Elementor where I don’t want to have two different templates. For example, if I wanted the products that have an “Add to Cart” button to have a distinctly different template from those that have the button hidden, I would use two separate templates. If I wanted the two kinds of products to have very similar templates and to always look the same, I would use Dynamic.ooo<\/a> as this way, if I need to change any part of the template, the change applies to both without having to remember to apply the change to both.<\/p>\n\n\n\n Elementor gives you powerful ways of managing your “Add to Cart” button display, especially when combined with Dynamic.ooo<\/a>, but it does require you to edit your Elementor templates and be comfortable working in the Elementor page builder. This isn’t particularly hard, but it can take some getting used to if you aren’t familiar with web concepts.<\/p>\n\n\n\n There are several plugins available for WooCommerce<\/a> to manipulate the \u201cAdd to Cart\u201d button. In this article, we are going to look at the \u201cHide Price, Hide Add to Cart<\/a>\u201d WooCommerce<\/a> plugin.<\/p>\n\n\n\n With the WooCommerce<\/a> “Hide Price & Hide Add to Cart<\/a>” plugin, you can easily hide a product’s \u201cAdd to Cart\u201d button, price and set custom text. You can also add a custom button instead of the \u201cAdd to Cart\u201d button along with a custom price. text and an icon if desired. These custom buttons could be to an external link, starting a Skype call, or sending an email.<\/p>\n\n\n\n The \u201cHide Price, Hide Add to Cart<\/a>\u201d plugin is flexible and works with any WooCommerce<\/a> theme to allow you to remove WooCommerce<\/a> from your shopping cart.<\/p>\n\n\n\n Have you encountered a situation where you need to display products and would like to encourage some kind of user behaviour, but you don\u2019t want to accept orders just yet? It could be because the product is out of stock or just not ready to sell yet. In these cases, if you don\u2019t want to worry about code and you don\u2019t want to disable the shopping cart button for any other items, a WooCommerce<\/a> plugin like \u201cHide Price, Hide Add to Cart\u201d is a great option.<\/p>\n\n\n\n On the Hide Price button and Add to Cart button on a product page, you can choose several options to customize a lead generation form using Contact Form 7 to capture lead data from interested customers for a specific product. You can also display “Contact Form 7” in tabs on a product page.<\/p>\n\n\n\n As we looked at earlier, different code snippets are required for product pages and product categories. Ideally, a plugin should handle both of those locations for us automatically.<\/p>\n\n\n\n The \u201cHide Price, Hide Add to Cart\u201d plugin works at both the category and individual product page level.<\/p>\n\n\n\n If a store owner wants to remove the \u201cAdd to Cart\u201d button from a specific product, they can do so. If they want to replace the \u201cAdd to Cart\u201d button with an alternative button that encourages customers to enquire about the product, they can do so.<\/p>\n\n\n\n This can work really well where you provide quotes and sell some of your products on an enquiry basis.<\/p>\n\n\n\n You can specify settings on category pages and individual product pages.<\/p>\n\n\n\n You can also use the \u201cHide Price, Hide Add to Cart\u201d plugin in reverse if you want to disable the \u201cAdd to Cart\u201d button on most of your products. You can use the exclude options to exclude certain products and categories from having their \u201cAdd to Cart\u201d buttons and prices impacted by the plugin.<\/strong><\/p>\n\n\n\n One of the things that I quite like about the \u201cHide Price, Hide Add to Cart<\/a>\u201d plugin is the flexibility of different ways you can control the button and pricing display. If you want to show the Price and Add to Cart button to all users, whether they are logged in or not, but just hide it users in a specific country, you have the option to do so.<\/p>\n\n\n\n You can use this method to remove the \u201cAdd to Cart\u201d button for assigned user roles.<\/p>\n\n\n\n Let’s say we want to remove the \u201cAdd to Cart\u201d button for the Publisher and Subscriber roles.<\/p>\n\n\n\n Under the Role-Based Pricing tab the first setting is to remove the \u201cAdd to Cart\u201d button. Select the user roles whose \u201cAdd to Cart\u201d button you want to remove. In our case, the Publisher and the Subscriber. Alternatively, you can enter placeholder text as shown in the following screenshot.<\/p>\n\n\n\n In this guide, I’ve explained how to hide, remove, and disable the \u201cAdd to Cart\u201d button using code, WooCommerce<\/a> stock control and the WooCommerce<\/a> \u201cHide Price, Hide Add to Cart<\/a>\u201d plugin.<\/p>\n\n\n\n Sometimes, the simplest solution (a small code snippet) is the best, but when you need more control over what products and how to hide the button, a plugin like \u201cHide Price, Hide Add to Cart<\/a>\u201d gives you much more flexibility.<\/p>\n\n\n\n If you need more help or want to share another method, please leave a comment below.<\/p>\n","protected":false},"excerpt":{"rendered":" Why hide or remove the \u201cAdd to Cart\u201d button? Isn’t that how people buy your products? There are many reasons to hide the \u201cAdd too Cart\u201d button. For example, many products today are launched prior to being available for purchase. Many store owners add detailed product descriptions to their stores to begin working on search … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":10915,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[445],"tags":[394,444],"jetpack_featured_media_url":"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/Add-to-Cart-Header-Image.jpg","_links":{"self":[{"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/posts\/10891"}],"collection":[{"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/comments?post=10891"}],"version-history":[{"count":12,"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/posts\/10891\/revisions"}],"predecessor-version":[{"id":10917,"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/posts\/10891\/revisions\/10917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/media\/10915"}],"wp:attachment":[{"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/media?parent=10891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/categories?post=10891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/terramedia.com.au\/wp-json\/wp\/v2\/tags?post=10891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}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', 20);<\/pre>\n\n\n\nHiding the \u201cAdd to Cart\u201d button using code<\/h3>\n\n\n\n
![\"WordPress](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/WordPress-Customise-Menu.jpg\")
<\/figure><\/div>\n\n\n\n![\"WordPress](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/WordPress-Customise-Additional-CSS-472x1024.jpg\")
<\/figure><\/div>\n\n\n\n.single_add_to_cart_button, .add_to_cart_button { display: none !important; }<\/pre>\n\n\n\n.single-product .cart, .add_to_cart_button { display: none !important; }<\/pre>\n\n\n\n.postid-2619 .single-product .cart, .post2619 .add_to_cart_button { display: none !important; }<\/pre>\n\n\n\n.postid-2619 .single-product .cart, .post2619 .add_to_cart_button, .postid-2620 .single-product .cart, .post2620 .add_to_cart_button, .postid-2621 .single-product .cart, .post2621 .add_to_cart_button { display: none !important; }<\/pre>\n\n\n\nCaveats of the code approach<\/h3>\n\n\n\n
Removing the WooCommerce Add to Cart button using WooCommerce stock control<\/h2>\n\n\n\n
![\"WooCommerce](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/WooCommerce-Stock-Control-Settings-1024x631.jpg\")
<\/figure><\/div>\n\n\n\nRemoving the WooCommerce Add to Cart button using Elementor<\/h2>\n\n\n\n
![\"Delete](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/Delete-Add-to-Cart-Widget-Elementor.jpg\")
<\/figure><\/div>\n\n\n\n![\"Dynamic.ooo](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/Dynamicooo-Visibility-Options-332x1024.jpg\")
<\/figure><\/div>\n\n\n\nRemoving the WooCommerce Add to Cart button using the \u201cHide Price, Hide Add to Cart\u201d WooCommerce plugin<\/h2>\n\n\n\n
![\"Hide](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/Hide-Price-and-Add-to-Cart-Plugin-Image.jpeg\")
<\/a><\/figure><\/div>\n\n\n\nBased on Specific Products or Product Single Page<\/h3>\n\n\n\n
![\"Exclude](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/Exclude-by-Product-1024x999.jpg\")
<\/figure><\/div>\n\n\n\n![\"Enable](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/Enable-Form-Display-1024x539.jpg\")
<\/figure><\/div>\n\n\n\nWorks for both Category pages and specific Product pages<\/h3>\n\n\n\n
![\"Exclude](\"https:\/\/terramedia.com.au\/wp-content\/uploads\/2020\/12\/Exclude-by-Category.jpg\")
<\/figure><\/div>\n\n\n\nOption to exclude product or category<\/h3>\n\n\n\n
Hide the \u201cAdd to Cart\u201d button based on country<\/h3>\n\n\n\n
Remove the \u201cAdd to Cart\u201d button based on user role<\/h3>\n\n\n\n
Wrapping up<\/h2>\n\n\n\n