How to Remove Add to Cart Button in WooCommerce (9 Ways)

How to Remove Add to Cart Button in WooCommerce (9 Ways)

WooCommerce is a powerful eCommerce platform that empowers you to sell a wide range of products online. By default, every product in your WooCommerce store comes with an “Add to Cart” button. This button is a fundamental element on your product pages, allowing customers to add items to their shopping cart. However, there are instances where you may want to remove this button. In these situations, you need to learn How to Remove Add to Cart Button in WooCommerce.

If you find yourself in any of these scenarios and are searching for ways to hide the “Add to Cart” button in WooCommerce, this guide has you covered. We’ll explore nine effective methods to remove the “Add to Cart” button, providing you with the flexibility to tailor your WooCommerce store to your specific needs.

Why You Might Want to Remove the Add to Cart Button

There are several compelling reasons for removing the “Add to Cart” button from your WooCommerce shop. For instance, if you sell services that can’t be added to a cart, want to encourage customers to explore product information further before making a purchase, or you simply want a more tailored shopping experience. Let’s delve into the nine methods to achieve this customization:

How to Remove Add to Cart Button in WooCommerce

1) Remove Add to Cart Button from the Single Product Page

You can disable the “Add to Cart” button on a single product page by adding a PHP code snippet to your website. To do this, follow these steps:

  1. Log into your WordPress admin Dashboard.
  2. Go to Appearance > Theme File Editor.
  3. Locate the function.php file on the right side of your screen.  How To Remove Add To Cart Button In WooCommerce (9 Ways)

Open the function.php file and add the following code snippet at the bottom:

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

We recommend using the Code Snippet plugin to add custom code instead of the function.php file. This ensures that your custom code remains intact when changing themes in the future. Please make sure to back up your site before customizing your codes.

2) Remove Add to Cart Button from Shop Page

To remove the “Add to Cart” button from your shop pages, add the following PHP code snippet:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

You can place this code in the Code Snippet plugin or the function.php file.

3) Remove Add to Cart Button for Specific Products

If you wish to remove the “Add to Cart” button for specific products, follow these steps:

Step 1:

  • Navigate to your WordPress Dashboard.
  • Go to Products > All Products.
  • Find the product for which you want to remove the “Add to Cart” button and note down the Product ID. How To Remove Add To Cart Button In WooCommerce (9 Ways)

Step 2:

After obtaining the Product ID, paste the following code in the function.php file or the Code Snippet plugin, replacing ‘105’ with your product’s ID:

add_filter('woocommerce_is_purchasable', 'my_woocommerce_is_purchasable', 10, 2);
function my_woocommerce_is_purchasable($is_purchasable, $product) {
        return ($product->id == 105 ? false : $is_purchasable); // 105 is the product ID
}

This code will remove the “Add to Cart” button from your shop page for the specified product and replace it with a “Read More” button.

4) Disable Add to Cart Button for Specific Product Using Checkbox

If you want a more dynamic approach to disable the “Add to Cart” button for specific products, consider adding a checkbox to your product settings. This allows you to enable or disable the button without the need for custom code. Here’s how:

function action_woocommerce_product_options_inventory_product_data() {
    // Checkbox
    woocommerce_wp_checkbox( array( 
        'id'             => '_prevent_add_to_cart_button',
        'label'          => __( 'Disable Add to Cart', 'woocommerce' ),
        'desc_tip'       => false,
        'description'    => __( '', 'woocommerce' )
    ) );
}
add_action( 'woocommerce_product_options_inventory_product_data', 'action_woocommerce_product_options_inventory_product_data', 10, 0 );

// Save Field
function action_woocommerce_admin_process_product_object( $product ) {
    $checkbox = isset( $_POST['_prevent_add_to_cart_button'] ) ? 'yes' : 'no';
    $product->update_meta_data( '_prevent_add_to_cart_button', $checkbox );
}
add_action( 'woocommerce_admin_process_product_object', 'action_woocommerce_admin_process_product_object', 10, 1 );

This code will add a “Disable Add to Cart” checkbox in your product settings. When checked, it disables the “Add to Cart” button for the product.

function filter_woocommerce_is_purchasable( $purchasable, $product ) {
    $hide_add_to_cart_button = $product->get_meta( '_prevent_add_to_cart_button' );
    if ( $hide_add_to_cart_button == 'yes' ) {
        $purchasable = false;
    }
    return $purchasable;
}
add_filter( 'woocommerce_is_purchasable', 'filter_woocommerce_is_purchasable', 10, 2 );

This code ensures that the “Add to Cart” button is disabled for products with the checkbox checked.

5) Remove Add to Cart Button from Specific Product Category

To remove the “Add to Cart” button from specific product categories, use the following code. Replace ‘Category Name’ with your desired category name:

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( 'Category Name', 'product_cat', $product->get_id() ) ) {
    return false;
  }
  return $is_purchasable;
}

This code disables the “Add to Cart” button for products in the specified category.

6) Disable Add to Cart Button from Non-Logged In Users

To encourage guest users to register and collect their email addresses, you can disable the “Add to Cart” button for non-logged in users with the following code:

if (!is_user_logged_in()) {
add_filter('woocommerce_is_purchasable', '__return_false');
}

This code ensures that only logged-in users can use the “Add to Cart” button.

7) Disable Add to Cart Button Based on User Roles

You can selectively disable the “Add to Cart” button based on user roles, such as administrator, editor, author, contributor, or subscriber. Use the following code:

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

This code removes the “Add to Cart” button for administrators.

8) Hide Add to Cart Button With CSS Code

If you prefer using CSS to hide the “Add to Cart” button, follow these steps:

  1. Open your WordPress Dashboard.
  2. Go to Appearance > Customize.
  3. Scroll down to the bottom and find the Additional CSS tab.

Add the following CSS code:

remove_action.single-product div.product form.cart {
    display: none !important;
}

This code hides the “Add to Cart” button on your single product page.

9) Remove the Add to Cart Button Using the WordPress Plugin

For those who prefer not to use code to remove the “Add to Cart” button, you can achieve this through a WordPress plugin. The “MMWD Remove Add To Cart for WooCommerce” plugin offers a user-friendly solution:

  1. Install and activate the MMWD Remove Add To Cart for the WooCommerce plugin. How To Remove Add To Cart Button In WooCommerce (9 Ways)
  2. Navigate to WordPress Dashboard > WooCommerce > Settings.
  3. Open the Products tab and locate Remove add to Cart.
  4. Check the box to remove the “Add to Cart” button. How To Remove Add To Cart Button In WooCommerce (9 Ways)
  5. Save your changes, and the button will be successfully removed.

This plugin also offers the flexibility to remove product prices, providing additional customization options.

Wrapping it Up

By following these nine methods, you can effectively remove the “Add to Cart” button in WooCommerce to suit your specific needs. If you’ve already removed the button and are now concerned about the “Read More” button that appears in its place on the shop page, worry not; we’ve got a solution for that too.

FAQs

What is the code for add to add-to-cart function in WooCommerce?

WC()->cart->add_to_cart( 1326 ); However, if you want to add a more complex logic, you’ll need to use variables. Additionally, with the $product_id variable, the code is easier to understand and helps keep it organized, something very important when dealing with long lines of code.

What is added to cart Ajax function?

Ajax add to cart for WooCommerce allows users to include single products or variable products in the cart without the need to reload the entire site each time.

What is the add-to-cart button action?

An add-to-cart button is a small, clickable graphic that allows customers to add products to their online shopping cart when they click them. Add-to-cart buttons can be used throughout your website, but are typically found on your product and category pages.