How to customize the Add to Cart button in WooCommerce

The Add to Cart button is one of the most important buttons for any online business. It’s the button that shoppers press to show their interest to buy a product and can have a great impact on your store. So, in this guide, we’ll show you how to customize the Add to cart button in WooCommerce.

Why customize the Add to Cart button in WooCommerce?

WooCommerce is the most popular eCommerce plugin for WordPress. Although it works well with its default settings, you can take your store to the next level by customizing it. One of the most efficient ways to get more customers is by improving the purchase process, making it more user-friendly and simple.

We’ve already seen different options to customize the checkout page and optimize it to maximize conversion rates and avoid drop-offs. However, the previous step in your sales funnel is also very important.

The “Add to Cart” button is useful for stores where customers usually buy more than one product, or when users are expected to navigate through products, adding and removing them from the cart before going to the checkout page. Many other eCommerce stores, on the other hand, have simpler purchase processes and prefer to skip the “Add to Cart” step and direct the customers directly to the checkout. This works especially well in one-product stores, or when the customer is expected to purchase a single product.

Even though shorter purchase processes tend to work better, it depends on the type of product you sell. There’s no one size fits all approach. That’s why in this guide, we’ll show you how to customize the Add to Cart button in WooCommerce so you can optimize your store.

How to customize the Add to Cart button in WooCommerce

There are many ways in which you can customize the Add to Cart button. In this tutorial, we’ll show you different options so you can choose the one that best suits your needs. We’ll use some plugins and a bit of coding but all the options are beginner-friendly.

In this guide, we’ll show you how to:

  1. Change the Add to Cart button text
  2. Add text above/under Add to Cart button
  3. Change the color of the Add to Cart button
  4. Remove the Add to Cart button and add a Direct Purchase button on the Shop Page
  5. Customize the Add to Cart button and add a Direct Purchase button on the Product Page

Let’s have a look at how to do each of these things step-by-step.

Before you start

  • As we’re going to edit some core files, before you start, we recommend you create a child theme. You can use plugins or generate a child theme following this guide.
  • Place the PHP code snippets at the end of your child theme functions.php file
  • Paste the CSS snippets in your child theme style.css file.

1) How to change the Add to Cart button text

Let’s start with something simple and customize the text of the Add to Cart button. Let’s say that you change the Add to Cart text to “Buy this item”. To do this, simply copy and paste the following code:

('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');
function QL_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}


As you can see, this code is for single products and the button text takes the values we’ve specified in the customize_add_to_cart_button_woocommerce() function.

2) How to add text above/under the Add to Cart button

Another very interesting and simple change you can do to customize the Add to Cart button in WooCommerce is to add a text above the Add to Cart button. This is a great option to mention free shipping, return policy, guarantee, and so on. Let’s say you want to add the following text “14-day money-back guarantee“. To do this, we use the echo statement and add the following snippet to the functions.php file of the child theme.

add_action( 'woocommerce_single_product_summary', 'QL_add_text_above_add_to_cart', 20 );
function 'QL_add_text_above_add_to_cart'() {
  echo '14-day money-back guarantee';
}

On the other hand, you can also add a text under the Add to Cart button. This can be useful to notify shoppers that there might be discounts for bulk purchases for example. To add a text below the Add to Cart button, you can use this code snippet:

add_action( 'woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart' );
function QL_add_text_under_add_to_cart() {
  echo 'Contact us for bulk purchases';
}

Customize Add to Cart Button - Add message

As you can see, these are very easy changes that you can do to increase your conversion rates in no time.

3) Change the color of the Add to Cart button

Now, let’s see how to customize the Add to Cart button by changing its color. Even though most WordPress and WooCommerce themes come with default colors for the buttons, you should make sure that they match your store’s style.

To customize the color of the Add to Cart button in WooCommerce, you will need to add a CSS code snippet to the style.css file. You can access it with an FTP client or from the WordPress dashboard by going to Appearance > Customize > Additional CSS.

Here there are two options:

  1. Change the color of the Add to Cart button on Single Products
  2. Change the color of the Add to Cart button on Archive Pages

3.1) Change the color on Single Products

Paste this code in the style.css file and change the colors to the ones you want. In this case, we’ll have a red background and a silver text.

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

3.2) Change Add to Cart button color on Archive Page

To customize the Add to Cart button and change its color on the WooCommerce Archive Page, use this code and change the Hex Codes to the ones that make sense for your store.

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

4) Remove the Add to Cart button and add a Direct Purchase button on the Shop Page

Now, let’s have a look at a more advanced option. Having a purchase process with several steps increases the chances of shoppers dropping off at each stage. That’s why shortening the funnel is a great way to optimize the checkout and improve conversion rates. In this section, we’ll show you how to remove the Add to Cart button and replace it with a direct purchase one using Direct Checkout for WooCommerce.

This plugin has both free and premium versions and comes with many features to help you simplify the checkout. Additionally, it allows you to skip the cart page and redirect users directly to the checkout page, making the purchase process shorter. So, let’s see how to completely remove the Add to Cart button and replace it with a direct buy button.

Change the function of the Add to Cart button

First, you need to install and activate Direct Checkout. You can download the free version from this link or have a look at one of the premium plans that start at 19 USD (one-time payment).

After activating the plugin, in your WordPress dashboard, go to WooCommerce > Direct checkout > General and fill out the options as follows:

replace add to cart text and redirect to checkout
Set the “Added to cart redirect” option to YES

Note that besides switching the Added to cart redirect option to Yes, you need to select which page you want to redirect the users to. This will usually be the checkout page, but you can also use a custom URL. On top of that, you can replace the cart URL to make the cart page completely inaccessible.

For more information on how to customize the WooCommerce shop page, have a look at this full guide.

Change the Add to Cart button text

After setting up the options in the General tab, the Add to Cart button will redirect users to the checkout page. However, you should also edit the text of the button as you’ve changed its function. The button doesn’t add products to the cart anymore, so it’s better to change it to something like Purchase now, for example. To do this, go to the Archives tab and fill out the options as follows:

replace add to cart text and redirect to checkout

Here you can change the button text for specific product types. We’ll apply the changes to all types of products by selecting all of them in the corresponding field.

After that, it’s time to check the frontend. As you can see, we’ve customized the Add to Cart button in our WooCommerce store and replaced the Add to Cart button with a Purchase now button that will take customers from the shop page directly to the checkout page. On top of that, we’ve completely removed the cart functionality from our store.
customize Add to cart button WooCommerce

5) Customize the Add to Cart button and add a Direct Purchase button on the Product Page

Finally, we can do something similar and customize the Add to Cart button to redirect the users from the product page to the checkout. Similarly to what we did in point 4, the idea is to shorten the purchase process to increase conversion rates.

To do this, in your WordPress dashboard, go to WooCommerce > Direct checkout > General. Once again, select Yes in the Added to cart redirect field and select the Checkout in both the Added to cart redirect to and Replace cart URL fields.

replace add to cart text and redirect to checkout

As now the Add to cart button will add the product and redirect customers to the checkout page, you need to change the text of the button. Let’s replace the Add to Cart text with Purchase it now. To do this, go to the Products tab and set it up as follows:customize Add to cart button WooCommerce - Direct checkout plugin

Direct Checkout


This way, you can easily customize the Add to Cart button in WooCommerce on both the Shop and Products page. And the best part is that you can have different buttons on each page.

NOTES

  • The settings you save in the Archives section of the plugin options panel will apply to the base Shop and Product categories pages, while the settings in the Products section will apply only to the Product pages.
  • For this demo, we’ve used the Storefront theme but you can use any theme compatible with WooCommerce.
  • Even though most themes will integrate without any issues, some themes may alter the default WooCommerce features and can cause issues when using Direct Checkout.
  • We’ve covered some basic features of Direct Checkout. For more advanced features, check out the Premium plans that will help you take your store to the next level.

Conclusion

All in all, the Add to Cart button can have a great impact on your business. That’s why we recommend you customize it and adapt it to your store’s needs.

In this guide, you’ve learned different ways to customize the Add to Cart button both programmatically and with plugins:

  • Change the text of the Add to Cart button
  • Add text above/under the Add to Cart button
  • Change the color of the Add to Cart button
  • Remove the Add to Cart button and add a Direct Purchase button on the Shop Page
  • Customize the Add to Cart button and add a Direct Purchase button on the Product Page

Finally, for more guides to make the most of your WooCommerce store, check out the following guides:

Do you have any questions about how to customize the Add to Cart button? Let us know in the comments section below! We’ll do our best to help you out.