E-LEARNING BLOG

E-LEARNING PORTAL

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.

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 the 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 create a custom Add to Cart button in WooCommerce so you can optimize your store and boost your sales.

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 or below 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 in WooCommerce

Let’s start with something simple and create a custom Add to Cart button by editing the text of the 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:

add_filter('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/below 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, a return policy, a 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 text below 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';
}

3) Change the color of the Add to Cart button

Now, let’s see how to edit 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 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;
}

 

Print Friendly, PDF & Email