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:
- Log into your WordPress admin Dashboard.
- Go to Appearance > Theme File Editor.
- Locate the
function.php
file on the right side of your screen.
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.
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:
- Open your WordPress Dashboard.
- Go to Appearance > Customize.
- 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:
- Install and activate the MMWD Remove Add To Cart for the WooCommerce plugin.
- Navigate to WordPress Dashboard > WooCommerce > Settings.
- Open the Products tab and locate Remove add to Cart.
- Check the box to remove the “Add to Cart” button.
- 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.