How to Customize the Add to Cart Button in WooCommerce

Running an online store requires a lot of flexibility and customization to meet your specific business goals. The ‘Add to Cart’ button is a crucial part of any WooCommerce store, guiding customers towards making a purchase. However, there are times when you might want to hide, remove, or customize this button to better suit your store’s unique needs.

Whether you aim to enhance user experience, promote specific products in a unique manner, or manage the purchasing process, the strategic adjustment of this button’s visibility and functionality can be key, giving you a sense of control over your store’s performance.

In this guide, we will explore various use cases for modifying the ‘Add to Cart’ button on both the single product and shop pages. By following these steps, you’ll gain greater control over your store’s functionality and presentation, allowing you to create a shopping experience that aligns perfectly with your goals.

Key Takeaways

• Discover valid use cases for hiding the Add to Cart button in WooCommerce.
• Get step-by-step instructions and code snippets to disable the Add to Cart button on the shop page, product page, or for selected products only.
• Learn how to conditionally hide the button for guest users, administrators, or other roles to personalize the buying experience.
• Explore how to change the default “Add to Cart” text to something more engaging.

Why Would You Hide the Add to Cart Button in WooCommerce?

When running a WooCommerce store, there are several reasons why you might consider hiding the ‘Add to Cart’ button. This action effectively disables the purchasing process for specific products or your entire store. This section will explain common scenarios where hiding this button can improve your store’s functionality and enhance the user experience. Here are the reasons:

• If a product is temporarily out of stock, hiding the ‘Add to Cart’ button can prevent customers from trying to purchase an unavailable item, reducing frustration and enhancing the overall shopping experience.

• For products that are not yet available for purchase but still want to showcase, hiding the WooCommerce ‘Add to Cart’ button enables you to display the product without enabling purchases until it’s ready.

• You may need to remove the ‘Add to Cart’ button based on specific criteria, such as user roles, particular products, non-logged-in users, etc.

• Maybe you are running your WooCommerce store in catalog mode, which lets customers browse your offerings without the option to add items to their cart.

How to Hide the Add to Cart Button in WooCommerce?

This section will explain different scenarios and solutions for removing or hiding the ‘Add to Cart’ button, which can benefit your WooCommerce store.

Hide Add to Cart from WooCommerce Store

If you’re looking to customize your WooCommerce store, one helpful change you might consider is hiding the “Add to Cart” button. It can be particularly beneficial to showcase products that are not for immediate sale, such as items coming soon or products requiring more information before purchase. Hiding the button is a simple yet effective way to manage how customers interact with your store.

You can use several methods to hide the “Add to Cart” button. One straightforward approach is to use a code snippet that you need to add to your child theme’s functions.php file that can be found under the /wp-content/themes/your-theme-name/.

// Remove the 'Add to Cart' button from the shop page
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
// Remove the 'Add to Cart' button from the single product page
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

The first line of code hides the “Add to Cart” button on the shop page, and the second line hides it on individual product pages, as you can see in the screenshot below. You can use this code based on your needs.

Hide Add to Cart For Specific Products in WooCommerce

This section will explain how to remove the WooCommerce “Add to Cart temporarily” button for a specific product in your store. You might want to do this if the product is out of stock. Here are three simple ways to do this.

Learn: How to Add Products in WooCommerce.

Using WooCommerce Hooks

To hide the “Add to Cart” button for specific products in WooCommerce using hooks, follow these simple steps. WooCommerce hooks allow you to modify your store’s functionality without altering core files, making them a safe and efficient way to customize your site.

First, find the ID of the product for which you want to hide the “Add to Cart” button. Go to the Products in your WordPress admin area, then hover over the product you’re interested in. The product ID will be displayed there.

Next, you’ll add a small snippet of code to your child theme’s functions.php file. This file is where you can insert custom code to modify the default behavior of your WooCommerce store.

We’ll use the code below to hide the “Add to Cart” button for specific products with IDs “126” and “123”. You can change these IDs to match the products you want to target.

/* Hide Add to Cart Button for Specific Products */
add_action('woocommerce_before_shop_loop_item', 'customize_add_to_cart_visibility');
function customize_add_to_cart_visibility() {
    if (is_shop() || is_product_category() || is_product_tag()) {
        global $product;
        $excluded_product_ids = array(126, 123); // List of product IDs for which the button should be hidden

        if (in_array($product->get_id(), $excluded_product_ids)) {
            remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);
        } else {
            add_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);
        }
    }
}

On the shop page, you’ll notice that the “Add to Cart” button is removed for the product IDs we specified.

To hide the “Add to Cart” button for specific products on the single product page, add the following code to the functions.php file of your child theme.

add_action('woocommerce_single_product_summary', 'customize_cart_button_visibility_single', 1);
function customize_cart_button_visibility_single() {
    global $product;
    $hidden_product_ids = array(126); // List of product IDs to hide the button for

    if (in_array($product->get_id(), $hidden_product_ids)) {
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
    }
}

On the single product page, the “Add to Cart” button will be hidden for the specified products.

Removing the Product Price

Another method to remove the “Add to Cart” button from specific products in WooCommerce is by removing the price display. By hiding the price, the “Add to Cart” button will automatically be disabled. Here’s how you can do it:

• Navigate to the WooCommerce ➝ Products ➝ Edit Product.
• Under the “Product Data” settings, click the General tab and look for the Regular Price field to manage pricing visibility.
• Then, remove or leave this field blank to hide the price display for the product.
• After making this change, remember to update the product to apply the settings

When you remove a product’s price in WooCommerce, the WooCommerce “Add to Cart” button is automatically hidden from the shop page. Instead, a “Read more” button is displayed, indicating that the product details can be viewed but not purchased directly.

Managing the Stock Management

If you want to hide the “Add to Cart” button for specific products in WooCommerce, another method is through stock management. This approach is particularly useful if you’re dealing with products that are temporarily out of stock or not available for purchase. By setting the stock status of these products to “Out of Stock,” you can automatically hide the “Add to Cart” button on their pages.

Go to your WordPress Dashboard ➝ Products ➝ Edit Product. Scroll down to the Product Data section and click on the Inventory tab. In this section, you will find the Stock Status option. Change the stock status to “Out of Stock” and update the product.

Once saved, WooCommerce will automatically hide the “Add to Cart” button for this product on your store’s frontend.

Hide or Remove Button Depending on User Roles

To hide the “Add to Cart” button in WooCommerce based on user roles, you can control who sees the button depending on their role on your site. It helps differentiate what different types of users can do. For instance, you should hide the button for specific roles, like guests or administrators, while keeping it visible for others, like subscribers.

Check our detailed article to learn more about the Various User Roles in WordPress.

This can be achieved using code snippets that conditionally remove or hide the button based on the logged-in user’s role. To do this, add the code below to the functions.php file of your child theme.

// Hook into 'wp_loaded' after WordPress and theme files are loaded.
add_action('wp_loaded', 'disable_add_to_cart_for_admins');

//Function to disable the "Add to Cart" button for administrators
function disable_add_to_cart_for_admins() {
     // Get current user info
    $current_user = wp_get_current_user();
    // Check if the current user has the 'administrator' role
    if (in_array('administrator', $current_user->roles, true)) {
        add_filter('woocommerce_is_purchasable', '__return_false');
    }
}

This code will hide the “Add to Cart” button for admin users and show a “Read More” button instead. To hide the button for a different user role, change the role name in the code.

Remove or Hide For Non-Logged-In Users

Hiding the WooCommerce ‘Add to Cart’ button for non-logged-in users can be a valuable strategy to encourage visitors to create an account or login before purchasing. It can help you gather customer information and provide a more personalized shopping experience.

Imagine you run an online store. To make the shopping experience more engaging, you want customers to create an account and log in before they can add items to their cart. Here’s a straightforward way to achieve this: Access your Theme’s functions.php file and insert the following code at the end of the file.

/* Disable Add to Cart Button for Non-Logged-In Users */
if (!is_user_logged_in()) {
    // Prevent purchase on product pages for non-logged-in users
    add_filter('woocommerce_is_purchasable', '__return_false');
}

With this code, any visitor who isn’t logged in will see the products without the “Add to Cart” button. Instead, they’ll see a “Read More” button to view product details.

How to Customize the Add to Cart Button in WooCommerce?

Customizing the “Add to Cart” button in WooCommerce can help you create a more personalized shopping experience for your customers. Whether you want to change the button text or apply custom styling, these adjustments can make your store stand out. So, let’s start customizing the Add to Cart button.

Change WooCommerce Add to Cart Button Text

Changing the “Add to Cart” button text in WooCommerce is a simple way to customize your store and make it more user-friendly. Instead of the default “Add to Cart,” you might want to use a phrase like “Buy Now,” “Add to Basket,” or anything that better fits your brand’s voice.

To change the button text, add a small code to your Theme’s functions.php file. Here’s a code for changing the text to “Buy Now.”

 /* Customize Add to Cart Button Text on Shop Page */
 add_filter('woocommerce_product_add_to_cart_text', 'customize_cart_button_text_archive');
 function customize_cart_button_text_archive() {
	 return __('Buy Now', 'woocommerce'); // Add to Cart Button Text for archive page
 }

Adding this code snippet to your functions.php file will display the “Add to Cart” button on shop pages. You can replace “Buy Now” with any text that suits your needs.

You can also change the “Add to Cart” button text on the single product page. To do this, replace the code above with the following code:

 /* Customize Add to Cart Button Text on Single Product Page */
 add_filter('woocommerce_product_single_add_to_cart_text', 'customize_cart_button_text_single');
 function customize_cart_button_text_single() {
	 return __('Buy Now', 'woocommerce'); // Add to Cart Button Text for Single page
 }

With this change, the “Add to Cart” button will now show as “Buy Now” on the single product page.

How to Style the WooCommerce Add to Cart Button with CSS?

Styling your WooCommerce “Add to Cart” button can make it more attractive and better suited to your store’s design. By adjusting the button’s appearance, you can create a more engaging shopping experience for your customers.

To start styling your “Add to Cart” button, you’ll need to add the CSS code below to your child’s theme style.css file.

/* Customize Add to Cart Button for Shop Page */
.archive .add_to_cart_button.button {
    background-color: #0b16e3; /* Custom background color */
    color: #ffffff; /* Text color */
    padding: 12px 20px; /* Padding for button */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size */
}

This CSS code changes the button background to a custom color, adjusts the text color, adds padding, etc, on your shop page. You can modify these values to match your store’s design.

To apply the styling to the “Add to Cart” button on your single product page, replace the first line of code or the class name with the one provided below.

/* Customize Add to Cart Button for Single Product Page */
.single-product .product .single_add_to_cart_button.button {
   /* add styling code here */
}

After adding the CSS code, check the single product page to see if the new styling has been applied to the “Add to Cart” button.

Final Thoughts on Managing the Add to Cart Button in WooCommerce

Customizing the “Add to Cart” button in WooCommerce allows you to tailor your store’s functionality and appearance better to meet your needs and those of your customers. Whether you’re looking to hide the button based on user roles, prevent it from displaying for non-logged-in users, or remove it for specific products, you can enhance your store’s shopping experience.

Additionally, applying custom styling can make your button stand out and align with your store’s design. Following the steps outlined in this article, you can enhance your WooCommerce store’s usability, ensuring a smoother and more engaging shopping experience for your customers.

Bonus Tip: Include the Custom Add to Cart Button Anywhere in WooCommerce(No Code!)

If you’re using Bricks Builder for your WooCommerce store, you don’t have to rely on code snippets to modify the Add to Cart button.

Our plugin Bricks Ultra includes a dedicated “Add to Cart” widget designed specifically for WooCommerce. This widget gives you full visual control over the button’s position, text, styling, alignment, and behavior—right from the Bricks interface.

Learn more about adding the Custom Add to Cart widget in Bricks Ultra.

FAQs on Customizing Add to Cart Button in WooCommerce