Let’s begin by figuring out why you might want to hide the Add to Cart button. One of the most effective ways to disable the purchase process for a specific product or store is to remove the Add to cart button. Even though it may seem odd, removing the Add to Cart button can be extremely useful in some circumstances.
There are many reasons why you might want to remove the Add to cart button from some pages of your store, aside from giving you more customization options:
- When a product is out of stock or is no longer available
- To deactivate the button based on logic (i.e. for specific user roles or products, non-logged-in users,etc.)
- The product isn’t yet available for purchase.
- When you want customers to use that button instead of the standard WooCommerce purchasing process to send a message or arrange an interview.
These are just a few examples of when you might want to hide or remove the Add to Cart button from your store. Let’s get started on removing the WooCommerce add-to-cart button from your store.
How to remove Add to cart button in WooCommerce
In this article, you’ll learn how to hide the add-to-cart button in various ways. We’ll show you how to do the following to give you more options:
- Remove or hide the Add to Cart button across the entire site.
- Hide the Add to Cart button for users who aren’t logged in.
- Remove the Add to Cart button on the basis of user roles.
- Hide Add to cart button on certain products.
- Disable Add to Cart button for only some categories
- Remove the button temporarily and it will reappear after a date.
- Let’s take a look at each of them in different sections.
Note: Since we’ll be editing core WordPress files, we recommend making a full backup of your site in case anything goes wrong. You can also utilize a child theme. If you don’t already have one, you can either make one yourself or use a child theme plugin.
1. Remove or hide the Add to Cart button across the entire site
There are several options for removing the Add to Cart button entirely from your store. One of the simplest is to place the following script in your child theme’s functions.php file:
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', 30 );
We remove the Add to cart button on the product page with the first remove action() hook, and we do the same on the shopping cart page with the second. Disabling the option to buy products, on the other hand, is a neater and more reliable solution. You’ll be able to make the products unavailable for purchase and prevent users from adding them to their cart this way.
With the following script, you can do that and make all of your products unavailable for purchase across your store:
add_filter( ‘woocommerce_is_purchasable’, ‘__return_false’);
This will disable the WooCommerce Add to Cart button, but not the button itself. It will simply be replaced with a Read more button, redirecting users to the product page, which will be free of any buttons.
If you want to hide the Read more button in addition to the Add to cart button, you should use a CSS rule. Customers, on the other hand, won’t be able to buy anything because they won’t be able to add products to the cart, even if they learn to use the browser developer tool to unhide it. Use the add filter() hook rather than the remove action() hook whenever possible.
Read More: How to Change Add to Cart Button Text
2. Hide the Add to Cart button for users who aren’t logged in
Assume you’re running a limited-time promotion for your registered users. You can create a unique landing page and send an email to only your registered users with the link, but what if they share it with others? You can remove the Add to cart button from your WooCommerce store only for non-logged-in users to avoid this happening and ensure that you only give discounts to the targeted consumer. To do so, paste the following script into your child theme’s functions.php file:
if (!is_user_logged_in()) {
// in product page
add_filter('woocommerce_is_purchasable', '__return_false');
}
We’ll disable the Add to cart button only for non-logged-in users by applying the is user logged in() native WordPress function.
3. Remove the Add to Cart button on the basis of user roles
Another brilliant option is to disable the Add to Cart button depending on the user’s role. Let’s take a look at how to make the button invisible to any admin user:
add_action('wp_loaded','get_user_role');
function get_user_role(){
$current_user = wp_get_current_user();
if(count($current_user->roles)!==0){
if($current_user->roles[0]=='administrator'){
add_filter('woocommerce_is_purchasable', '__return_false');
}
}
}
The WordPress user object is retrieved and two conditionals are applied to it by the script. The first is to determine whether a user has a role, and the second is to make products unavailable for purchase only if the user role matches the one we specify (administrator in this case). You can surely use this code and alter the role that you don’t want to see the Add to cart button by editing the role in if($current_user->roles[0]==’your_role’){.
4. Hide Add to cart button on certain products
Let’s say you’re out of stock for some items and want to temporarily hide the Add to Cart button for those items.
Copy and paste the following script into the functions.php file of the child theme to remove the button for specific products:
add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2);
function filter_is_purchasable($is_purchasable, $product ) {
global $product;
if( in_array( $product->get_id(), not_purchasable_ids() )) {
return false;
}
return $is_purchasable;
}
function not_purchasable_ids() {
return array( 624,625 );
}
The Add to Cart button is disabled for the products with IDs 624 and 625 in this sample script. Consider replacing those IDs with your WooCommerce product IDs to adjust it to your store. As you can see, you can allow unlimited products by simply using a comma to separate the IDs.
Go to your WordPress dashboard > WooCommerce > Products and hover your mouse over a product in the list to see its ID.
5. Disable Add to Cart button for only some categories
You can also disable the Add to Cart button for particular categories. For instance, if you wanted to hide the button from the category “Laptops,” you could use the following code:
add_action('wp', 'QL_remove_add_to_cart_from_category' );
function QL_remove_add_to_cart_from_category(){
if( is_product_category( 'laptops' ) ) {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
}
}
Simply copy this code and replace "laptops" in line 3 with the title of the category where the Add to Cart button should be hidden.
6. Remove the button temporarily and it will reappear after a date
Let’s take things to another level and put some of what we’ve read together. Assume you’re about to launch a product, and you’ve already created a product page with all of its features. If you want to use that page to aware your customers the launch and promote the product before it goes live, you can hide the Add to Cart button until the official launch and then have it automatically appear on launch day.
Let’s say you’re planning to introduce your product on December 15th, 2020, and you want to hide the Add to cart button until then, then reveal it again on December 15th. To do so, simply copy and paste the script below:
add_filter( 'woocommerce_is_purchasable', 'hide_add_to_cart_button_until_date', 10, 2 );
function hide_add_to_cart_button_until_date( $is_purchasable = true, $product ) {
$current_date = date('Y-m-d');
$release_date = date( 'Y-m-d', strtotime('2020-12-15') );
if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 624 ) {
$is_purchasable = false;
}
return $is_purchasable;
}
The Add to Cart button will be replaced with a Read more button that will take users to the product page until the launch date. Let’s take a closer look at how the script works now. The code compares the current date to the launch date, and if the current date is earlier, the product is unavailable for purchase.
The product will be available for purchase when the current date equals or exceeds the launch date, and the Add to cart button will appear automatically. Remember to include the date as well as the product ID (624 in our example).
You’ve learned several methods for removing the Add to Cart button in this guide. We’ve seen how to hide it across the entire store, for specific products, users, and user roles, and even how to hide it for a certain day and then automatically show it again. This gives you a little more leeway when it comes to customizing your store for different scenarios.
Simply use these scripts as a starting point and modify them to fit your store’s needs.
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!
Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.
and many more ...