How to Remove “Add to Cart” from WooCommerce: A Beginner’s Guide
So, you’re running a WooCommerce store, but you’ve decided the “Add to Cart” button isn’t quite right for your business model. Maybe you’re:
* Selling digital products where immediate downloads are preferred.
* Running a catalogue website where you just want to showcase products without direct sales.
* Building Discover insights on Woocommerce How To Remove Rating From Products a quotation-based system where customers need to request a price before purchasing.
Whatever the reason, removing the “Add to Cart” button can streamline the customer journey. Don’t worry; it’s easier than you might think! This guide will walk you through several methods, catering to different technical skill levels.
Why Remove “Add to Cart” Anyway? Real-Life Scenarios
Before diving in, let’s understand *why* you might want to ditch the “Add to Cart” button. Consider these scenarios:
* Sarah’s Digital Art Studio: Sarah sells high-resolution digital art prints. Instead of adding them to a cart, she prefers customers download the file directly after purchase. Removing the “Add to Cart” button allows her to replace it with a “Download Now” button, offering a smoother, instant gratification experience.
* Tom’s Antique Furniture Collection: Tom uses WooCommerce as a catalogue to showcase his unique antique furniture pieces. He wants customers to contact him directly to discuss pricing and shipping, as each piece requires special handling. Removing the “Add to Cart” and replacing it with a “Contact for Quote” button encourages direct engagement and personalized service.
* Lisa’s Consulting Services: Lisa doesn’t sell products; she sells consulting services. Displaying her packages in a product format with a “Get a Quote” button instead of “Add to Cart” helps clarify the purpose and drives qualified leads.
Method 1: Using a WooCommerce Plugin (Easiest for Beginners)
This is the recommended method if you’re not comfortable with code. Several plugins simplify the process of removing or modifying the “Add to Cart” button.
1. Find a Suitable Plugin: Search the WordPress plugin repository for terms like “remove add to cart,” “WooCommerce catalogue mode,” or “WooCommerce custom button.” A good example is “WooCommerce Catalog Mode, Disable Cart, Hide Prices” as it offers simple solutions.
2. Install and Activate the Plugin: Go to *Plugins > Add New* in your WordPress dashboard, search for your chosen plugin, install, and activate it.
3. Configure the Plugin Settings: The plugin will usually have its own settings page (often found under *WooCommerce* or in the general *Settings* area). Explore the options to:
* Completely remove the “Add to Cart” button.
* Hide prices alongside removing the button.
* Replace the “Add to Cart” button with a custom button (e.g., “Contact Us,” “Get a Quote”).
* Apply the changes globally or to specific product categories.
Example: Using the “WooCommerce Catalog Mode, Disable Cart, Hide Prices” plugin, you can enable “Catalog Mode,” which automatically removes the “Add to Cart” button across your entire store. You can then customize the text that appears in its place or leave it blank.
Method 2: Using Custom Code (For the More Adventurous)
This method involves adding code snippets to your theme’s `functions.php` file or using a code snippets plugin. Important: Always back up your website before editing code!
#### 1. Removing the “Add to Cart” Button Globally
This code snippet removes the “Add to Cart” button from *all* product pages and shop pages:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
Add this code to your theme’s `functions.php` file (child theme recommended!) or use a code snippets plugin.
#### 2. Replacing “Add to Cart” with a Custom Button (e.g., “Contact Us”)
This snippet removes the “Add to Cart” button and replaces it with a “Contact Us” button that links to your contact page:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( ‘woocommerce_single_product_summary’, ‘custom_contact_button’, 30 );
function custom_contact_button() {
echo ‘Contact Us‘; // Replace “/contact-us/” with your contact page URL
}
Remember to replace `/contact-us/` with the actual URL Check out this post: How To Connect Stripe With Woocommerce of your contact page. You can also customize the button’s appearance by adding CSS.
#### 3. Removing the “Add to Cart” Button for Specific Product Categories
This snippet removes the “Add to Cart” button only for products belonging to a specific category (replace `”your-category-slug”` with the actual slug of your category):
function remove_add_to_cart_for_category() { global $product;
$product_id = $product->get_id();
if ( has_term( ‘your-category-slug’, ‘product_cat’, $product_id ) ) {
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
}
}
add_action( ‘woocommerce_before_single_product’, ‘remove_add_to_cart_for_category’ );
add_action( ‘woocommerce_before_shop_loop_item’, ‘remove_add_to_cart_for_category’ );
To find the category slug, go to *Products > Categories* in your WordPress dashboard and hover over the category name. The URL in the browser’s status bar will show the slug (e.g., `tag_ID=10&taxonomy=product_cat&post_type=product&wp_http_referer=/wp-admin/edit-tags.php?taxonomy=product_cat&post_type=product`).
Method 3: Editing WooCommerce Templates (Advanced)
This is the most advanced method and requires a good understanding of PHP and WooCommerce templates. You should only use this method if you are comfortable with code and understand the potential risks.
1. Copy the Template File: Using FTP or your hosting file manager, locate the `add-to-cart.php` template file. It’s typically found in `wp-content/plugins/woocommerce/templates/single-product/add-to-cart/` or `wp-content/plugins/woocommerce/templates/loop/add-to-cart.php`.
2. Create a Child Theme: Crucially, create a child theme! Directly editing WooCommerce plugin files will cause your changes to be overwritten during updates.
3. Paste the Template File into Your Child Theme: Create the same directory structure in your child theme (e.g., `your-child-theme/woocommerce/single-product/add-to-cart/`). Paste the `add-to-cart.php` file into this new directory.
4. Edit the Template File: Open the file in your child theme and either:
* Completely remove the code: This will remove the “Add to Cart” button.
* Comment out the code: Use “ or `// …` to comment out the code. This allows you to easily Discover insights on How To Change Id On Product Woocommerce revert the changes later.
* Modify the code: Add custom HTML or Explore this article on How To Set Up Payment Woocommerce PHP to change the button’s appearance or functionality.
Example: To simply remove the button, you could open `your-child-theme/woocommerce/single-product/add-to-cart/add-to-cart.php` and remove the entire content of the file or comment it out like this:
<?php /**
- Single product add to cart
- * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart.php.
- * HOWEVER, on occasion WooCommerce will need to update template files and you
- (the theme developer) will need to copy the new files to your theme to
- maintain compatibility. If you copy this file to your theme, will not be able to update the template file.
- Instead, use hooks - see https://docs.woocommerce.com/document/template-structure/
- * @package WooCommerceTemplates
- @version 7.4.0
/*
if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}
global $product;
do_action( ‘woocommerce_before_add_to_cart_form’ ); ?>
<form class="cart" action="get_permalink() ) ); ?>” method=”post” enctype=’multipart/form-data’>
<?php
do_action( ‘woocommerce_before_quantity_input’ );
woocommerce_quantity_input(
array(
‘min_value’ => apply_filters( ‘woocommerce_quantity_input_min’, $product->get_min_purchase_quantity(), $product ),
‘max_value’ => apply_filters( ‘woocommerce_quantity_input_max’, $product->get_max_purchase_quantity(), $product ),
‘input_value’ => isset( $_POST[‘quantity’] ) ? wc_stock_amount( wp_unslash( $_POST[‘quantity’] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
)
);
do_action( ‘woocommerce_after_quantity_input’ );
?>
<button type="submit" name="add-to-cart" value="get_id() ); ?>” class=”single_add_to_cart_button button alt”>single_add_to_cart_text() ); ?>
<?php do_action( 'woocommerce_after_add_to_cart_form' );
*/
?>
Choosing the Right Method
* Beginner: Use a plugin. It’s the safest and easiest option.
* Intermediate: Use custom code snippets in your `functions.php` Discover insights on How To Change Attribute Title Woocommerce file or a code snippets plugin. Remember to back up your website first!
* Advanced: Edit WooCommerce templates. This offers the most flexibility but requires a strong understanding of code and template structure.
Testing Your Changes
After implementing any of these methods, thoroughly test your website to ensure that the “Add to Cart” button is removed correctly and that other functionalities are not affected. Test on different browsers and devices.
Conclusion
Removing or modifying the “Add to Cart” button in WooCommerce can significantly enhance the user experience and align with your specific business needs. Choose the method that best suits your technical skill level and remember to always back up your website before making changes. Good luck!
