How to Hide, Remove or Disable the Add to Cart Button in WooCommerce

A reader left a comment wondering how to hide, remove or disable "Add to cart" button. For this reason, I have put together a simple tutorial for you!

To accomplish this, you need a higher level of customization ability to update the store's functionality on demand.The vast library of WordPress plugins and WooCommerce extensions provides a wide range of customization options, resulting in a more user-friendly experience.

In this article, we'll show you how to hide, remove, or disable the "Add to Cart" button in your WooCommerce store for sold out items or when only the product catalog is displayed.

Why should I hide, remove or disable the "Add to Cart" button?

"Add to cart"Buttons are a key component in any WooCommerce store.
It bridges the gap from browsing to buying and is the first step in the customer's buying journey. However, if there is a need to hide, remove or disable this button.

For example, the store is a display-only product catalog with no direct purchasing capabilities; or, you want certain products to be viewable but not available for purchase. Whatever the reason, knowing how to operate this button gives you greater control over the store's functionality.

Understand the difference between "Hide" and "Remove".

Hiding the "Add to Cart" button makes it invisible on the page, while removing the button removes it completely from the site's code. This means that even if someone checks the site's code, they won't find the button. This can be very useful if you want to prevent skilled users from bypassing your store's processes.

💡 take note of: Before making any changes, be sure toMake a backup of your website.. If something goes wrong, you can quickly restore the site to its previous state.

How to Hide "Add to Cart" Button from WooCommerce Product Page

Below are the steps to remove the "Add to Cart" button from WooCommerce product detail pages and store pages (product listing pages). In order to do this, you can use the following hooks:

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');

These hooks can be inserted wherever you see fit. Typically, these hooks are added to the theme folder in the functions.php Documentation is the most common practice.

Recommended file location

Although adding the code to the functions.php file is common, but may cause errors in some cases. Therefore, it is more recommended to place these hooks in the plugins folder in the woocommerce.php Documentation.

Here is a visit to woocommerce.phpSteps for documentation:

• Navigate to WordPress → wp-content.
• Click Plugins → WooCommerce → woocommerce.php.

Next add the following code:

/**

 * Main instance of WooCommerce.

 /***

 * Returns the main instance of WC to prevent the need to use globals.

 *

 * @since 2.1

 * @return WooCommerce

 */

function WC() {

    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' );;

    return WooCommerce::instance();

}

After adding the code, save the file and refresh the page. If done correctly, you should see "Add to cart" button has been removed from the page.

Conditional Hide WooCommerce Add to Cart Button

In some cases, if you only want to hide the "Add to Cart" button for a specific product. In this case, you need to use the conditional method.

Hide product-specific Woocommerce Add to Cart buttons

Follow the steps below to hide the "Add to Cart" button for a specific product:

• Navigate to WordPress Dashboard → Products → All Products.
• Hover over the product for which you want to hide the Add to Cart button and make a note of the product ID (in this example, the ID is 25).

Next, add the following code to the site'sfunctions.phpDocumentation:

add_action( 'woocommerce_after_shop_loop_item', 'hide_add_to_cart_for_specific_product', 10 );

function hide_add_to_cart_for_specific_product() {

    global $product.

    if ( 25 == $product->get_id() ) {

        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 );

    }

}

With this code, the "Add to Cart" button for product ID 25 will be hidden. In this example, it is a customizable cup.

Hide Woocommerce prices on store and category pages

To remove WooCommerce prices on store and category pages, you need to open thefunctions.phpfile and add the following code;

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

By adding this code, you can remove product prices from store and category pages. The result is as follows:

Remove the "Add to Cart" button for specific products

There are three ways to remove the "Add to Cart" button from a specific product page:

1. Remove the value from the Price field. This will cause the product to no longer have a price, thus removing the Add to Cart button.
2. Enable Inventory Management and set Product Inventory to zero.
3. Using woocommerce_is_purchasableHooks for filters.

Using the woocommerce_is_purchasable Hook

Here a filter is used to remove the "Add to Cart" button for a specific product ID.

Whenever this filter recognizes the product ID of our target product, it will return false, so while the price will still be visible, the Add to Cart button will be replaced with a notification that says"Unable to purchase product"The

To accomplish this, add the following code to the websitefunctions.phpfile is sufficient.

add_filter('woocommerce_is_purchasable', 'woocommerce_cloudways_purchasable');

function woocommerce_cloudways_purchasable($cloudways_purchasable, $product) {

return ($product->id == your_specific_product_id (like 22) ? false : $cloudways_purchasable);

}

Disable rather than hide or remove the "Add to Cart" button.

Disabling the "Add to Cart" button is not the same as hiding or removing it.

When the button is disabled, it remains visible but not clickable. This is useful if you want to show that a product is normally available but is currently out of stock or unavailable for some other reason.

Here is how to disable the "Add to Cart" button using custom code:

• Navigate to Appearance → Theme Editor and findfunctions.phpDocumentation.
• Add the following code to disable the Add to Cart button:

add_filter( 'woocommerce_is_purchasable', 'disable_add_to_cart_button' );

function disable_add_to_cart_button( $is_purchasable ) {

    // You can add conditions here to disable the button for specific products.

    return false; // return false disables the 'Add to Cart' button

}

•  Click "Updated documents" to save your changes.

The "Add to Cart" button should now be disabled in the WooCommerce store.

summarize

In this blog, the power of WooCommerce is explored, with a focus on how to hide, remove, or disable the "Add to Cart" button, and the unique benefits of these methods.

Frequently Asked Questions

1. How to disable the "Add to Cart" button in WooCommerce?

This can be done in the theme's functions.php The file uses a code snippet to disable the "Add to Cart" button, either for a specific product or for the entire site:

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);

2. How to remove WooCommerce shopping cart icon?

To remove the shopping cart icon, either in the theme's customizer or in the style.css file with the following custom CSS code:

.woocommerce-cart .cart-contents {
    display: none;
}

3. How do I change the "Add to Cart" button in WooCommerce?

If you need to change the text of a button, you can do so in the functions.php Add the following code to the file:

add_filter('woocommerce_product_add_to_cart_text', function() { return 'Your Custom Text'; });

If you need to change the style or functionality, you can customize the HTML and CSS of the button.

4. How do I empty my WooCommerce shopping cart?

The WooCommerce cart can be emptied programmatically with the following code:

WC()->cart->empty_cart();

Add the code to an appropriate location (e.g., plugin or functions.php file) after which the cart contents will be emptied.