How to remove the add to cart button in WooCommerce
In this tutorial, we’ll see how you can remove or disable the add to cart button on your WooCommerce store. We are going to explore the different methods by using ready-made solutions in the form of an existing plugin or by writing our custom code snippets.
Customizability is one of the main advantages that WooCommerce has over its competitors. The combination of, a huge library of WordPress plugins and WooCommerce extensions makes it easy to add any additional functionality to your online store. In the remote chance that there isn’t already an existing plugin or WooCommerce extension with a solution for your problem, you can always write your custom code. Or hire someone to do it for you.
If you’re trying to create a more user-friendly experience on your store, you may want to remove the add to cart button.There are different situations when you might want to remove the add to cart button in WooCommerce, for exmample when you want to:
- Use WooCommerce as catalog
- Temporary disable the purchasing process
- Skip the add to cart process and redirect to checkout
As usual, there are few different approaches that we can take. But first, let’s start with the easiest and the fastest solution. That of course, is to just use a dedicated WordPress plugin that does all the work for us. All you have to do is the following 3 steps:
How to remove the add to cart button in WooCommerce
To remove the add to cart button in WooCommerce:
- Go to WordPress dashboard > Plugins and install the MMWD Remove Add To Cart for WooCommerce plugin.
- Navigate to Admin > WooCommerce > Settings > Products and select the Remove Add to Cart settings tab.
- Use the checkboxes to activate the Remove Add to Cart and/or Remove Prices options.
Now that we have the easiest option out of the way, let us dig a bit deeper into all the different customization we can do with a bit of code. Here are some of the custom things we are going to do:
- Remove the “add to cart button” from single product pages
- Make Products Non-Purchasable and therefore replace the add to cart button with “Read More”
- Remove or hide the Add to cart button from all the archive pages (Shop page, Product category pages, Product tag pages, search results )
- Remove Add to cart button based on page type
Hide add to cart button on a specific product
If you want to hide/remove the add to cart button on a specific product only, there are two little tricks that you can use.
First, you can remove your product price (remove not set to 0) from the General > Regular price field in the WooCommerce product settings. This will not only hide the price from the product page, but it will also automatically remove the add to cart button for that specific product.
Alternatively, you can also set your product inventory to “Out of stock”. This will remove the add to cart button and replace it with “out of stock” text.
This is not a very elegant solution and it’s not very scalable. What if you have thousands of products that you want to this for, or if you want to disable the add to cart button for a whole category of products. For that, we are going to have to write some code and use the woocommerce_is_purchasable filter.
Unlock the Full Potential of Your WooCommerce Customer Data
WooCommerce catalog mode: Making products Non-Purchasable
WooCommerce has the option to mark a product as “Non-Purchasable”. Activating this option will remove the “Add to cart” link and it will be replaced with the “Read more” link instead. This allows you to convert your WooCommerce store into a catalog of products. Your visitors can browse and see the products’ descriptions but they can not purchase the products. Sidenote: If you want to take a full advantage of the catalog mode you might want to consider using a dedicated plugin like the yith woocommerce catalog mode.
Once you activate this option, the product will be automatically removed from your customers’ shopping cart.
To mark all of your WooCommerce products as “Non-Purchasable” simply add the code below into your child theme’s functions.php file (or your snippet plugin):
|
1 |
add_filter( 'woocommerce_is_purchasable', '__return_false' ); |
We can use the ‘woocommerce_is_purchasable’ filter to set some custom conditions as well. So that you don’t have to activate WooCommerce catalog mode on the whole website. You can remove the add to cart button just for some specific products or a product category page. Let’s see how to hide the add to cart button on a specific product page (or a list of products). For this, we are going to use the woocommerce_is_purchasable hook to activate the catalog mode only for a product with id 23. Here is the code snippet:
|
1 2 3 4 5 6 7 8 9 10 |
/* * Disable product with ID = 23 from being purchased */ add_filter('woocommerce_is_purchasable', 'set_catalog_mode_on_for_product', 23, 2 ); function set_catalog_mode_on_for_product( $is_purchasable, $product ) { if( $product->get_id() == 23 ) { // you can set multiple conditions here return false; } return $is_purchasable; } |
We can do the same for applying the WooCommerce catalog mode only for a septic product category like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* * Disable products from category "Uncategorized" from being purchased no matter what */ add_filter('woocommerce_is_purchasable', 'set_catalog_mode_on_for_category', 10, 2 ); function set_catalog_mode_on_for_category( $is_purchasable, $product ) { if( has_term( 'uncategorized', 'product_cat', $product->get_id() ) ) { return false; } return $is_purchasable; } |
As you can see using the ‘woocommerce_is_purchasable’ provides us with a lot of flexibility so you can make all sorts of customizations. For example, you can remove the add to cart button based on a user role (by using the get_user_role), remove it only for non-logged users (by using the is_user_logged_in()), etc,
Removing it from all the WooCommerce archive pages
Another way of disabling the add to cart button is to use the Add to Cart actions. We have to keep in mind though that using them will be affecting anything else hooked into these actions. Here is a code that you can use:
|
1 |
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); |
Adding the above code into your child WordPress theme will remove the add to cart button completely from all of the WooCommerce archive pages. This includes the main shop page, product category pages, product tag page, and the search results page.
Similarly, as with the example above, we can apply conditional tags to customize what pages or ever users to disable the add to cart button for.
We can use the filter listed below to filter out what pages to apply the above code to:
- the is_product_category() to remove “Add to cart” from specific product category pages
- is_product_tag() to remove it from the product tag pages,
- is_search() – for the search results page only,
- is_shop() – from the main WooCommerce shop page
Conclusion
In this tutorial, we saw a few different methods to hide the Add to cart button. We have applied the customization for a certain product page, product category, or all the products site-wide.