How to hide the Add to Cart button in WooCommerce

If you are using WooCommerce for your store, there are many ways you can customize your store using different WooCommerce hooks & filters.

There could be several reasons why you may want to hide a button, such as the ‘Add to Cart’ button. For instance, many businesses nowadays introduce their products a few days before they are actually available for purchase. In such cases, they tend to provide detailed specifications of the products to generate interest. However, they may not want customers to buy the product just yet, and thus, they cannot have the ‘Add to Cart’ button on the page.

WooCommerce has a filter called woocommerce_is_purchasable in which you can check whether a product is purchasable or not.

In this post, we will explore how to hide the add to cart button on the shop, product, and category page in WooCommerce.

Where to Add Custom Code in WooCommerce?

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Solution: Hiding the Add To Cart Button in WooCommerce

Consider a situation where a new product model is about to be released, and the retailer wants to hide the “Add to Cart” button for the existing, soon-to-be-obsolete model on the shop, product, and categories pages.

Use Case 1: Hiding the Add To Cart Button on the Product Page

Let’s consider an example, where we want to hide the add to cart button on the product page whose product ID is 114.

add_filter( 'woocommerce_is_purchasable', 'woocommerce_hide_add_to_cart_button', 10, 2 );
function woocommerce_hide_add_to_cart_button( $is_purchasable = true, $product ) {
    return ( $product->get_id() == 114 ? false : $is_purchasable );
}

The code snippet above checks whether the current product ID is 114. If it is, the product is not purchasable and the function returns false. Otherwise, if the product ID is not 114, the function returns true indicating that the product is purchasable. When a product is not purchasable, the ‘Add to Cart’ button will not be displayed on the product page.

Output

The below output shows that for the product ID – 114, the add to cart button has been hidden.

Use Case 2: Show Add to Cart button after a specific date

Imagine you have a product and you want to show the “Add to Cart” button on a specific date, such as the product’s launch date. You can make this happen automatically without any manual intervention.

For example, let’s say your product launch is scheduled after 10th October 2023. You might want to hide the “Add to Cart” button until the launch date arrives and display it on 10th October so that customers can purchase the product.

Below is the code snippet

add_filter( 'woocommerce_is_purchasable', 'ts_hide_add_to_cart_button', 10, 2 );
function ts_hide_add_to_cart_button( $is_purchasable = true, $product ) {
    $current_date = date('Y-m-d');
    $release_date = date( 'Y-m-d', strtotime('2023-10-10') );
    if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 114 ) {
        $is_purchasable = false;
    }
  
  return $is_purchasable;
}

Here we check if the current date is less than the release date i.e if the current date is not the release date. If yes, then return false i.e hide the ‘Add to Cart’ button.

Output

On the shop page, the product will be displayed with a ‘Read More’ button that leads to the product page.

Use Case 3: Hiding the Add To Cart Button on the Shop & Categories Page

Let’s look into an example of hiding the “Add to Cart” button on the shop and category page.

woocommerce_after_shop_loop_item is an action hook provided by WooCommerce that is triggered in the template files of your WooCommerce shop and category pages after each individual product item is displayed. 

add_action( 'woocommerce_after_shop_loop_item', 'ts_remove_add_to_cart_buttons', 1 );

function ts_remove_add_to_cart_buttons() {
    if ( is_product_category() || is_shop() ) {
        remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
    }
}

By using this code, you can control the visibility of the “Add to Cart” button on the Shop and Category pages in WooCommerce, which can be useful for various customization and user experience purposes.

Output

The below output hides the add to cart button from the shop page for every product.

On the Category page, it hides the Add to Cart button (e.g. Accessories) as shown below.

Here’s the step-by-step explanation of the code:

• This line of code adds an action hook to the woocommerce_after_shop_loop_item hook. This hook is triggered after each product item on the Shop and Category pages is displayed. It calls the remove_add_to_cart_buttons function with a priority of 1.
• This is the definition of the remove_add_to_cart_buttons function, which will be executed when the woocommerce_after_shop_loop_item hook is fired.
• This conditional statement checks whether the current page being displayed is either a product category page (archive) or the main shop page.
• If the current page is a product category or the shop page, this line of code removes the woocommerce_template_loop_add_to_cart action hook from the woocommerce_after_shop_loop_item hook. This effectively removes the “Add to Cart” button from the product items displayed on the Shop and Category pages.

Use Case 4: Hide the Add To Cart button based on the Multiple Product ID

Let’s take another example for hiding the add to cart button for the product based on the multiple ID entries. Here is the code snippets below.

function ts_woocommerce_hide_add_to_cart_button_for_product_ids( $is_purchasable, $product ) {

  // Create an array of product IDs to hide the Add to Cart button for.
  $hidden_product_ids = array(114,112);

  // Check if the current product ID is in the array of hidden product IDs.
  if ( in_array( $product->get_id(), $hidden_product_ids ) ) {
    $is_purchasable = false;
  }

  return $is_purchasable;
}

// Add the filter to WooCommerce.
add_filter( 'woocommerce_is_purchasable', 'ts_woocommerce_hide_add_to_cart_button_for_product_ids', 10, 2 );

This function takes two parameters: $is_purchasable and $product. The $is_purchasable parameter is a boolean value that indicates whether the product is purchasable. The $product parameter is a WooCommerce product object.

The function first creates an array of product IDs to hide the Add to Cart button. In this case, the array contains two product IDs: 114 and 112.

The function then checks if the current product ID is in the array of hidden product IDs. If it is, the $is_purchasable variable is set to false, which will hide the Add to Cart button.

Finally, the function returns the $is_purchasable variable.

Output

In the below output, for the specific product ID (114) Add to Cart button has been hidden.

In another scenario, the product ID (112) Add to Cart button has also been hidden.

Conclusion

By implementing these techniques, you can hide the “Add to Cart” button in WooCommerce while preserving the overall functionality and user experience of your online store.

Let us know the usefulness of the code snippets in the comments section below.

You can also achieve this with the below mentioned plugins. But if the above code snippet meets your needs, then there is no need to install a plugin.

1. Woocommerce Hide Add To Cart Button

2. Remove Add to Cart WooCommerce