How to customize Add to Cart button in WooCommerce

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');
}

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';
}

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 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;
}

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:

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: 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 front end.

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.

For more information on how to remove the Add to Cart button, check out this step-by-step guide.

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.

Similar 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.

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:

---

This way, you can easily create a custom 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.

How to customize the Added-to-cart message

Apart from customizing the button, you can also edit the Added-to-Cart message. The easiest way to do that is to simply change the message by pasting the following script to the functions.php file.

add_filter( 'wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message' );
function quadlayers_custom_add_to_cart_message() {
   $message = 'Your product has been added to cart. Thank you for shopping with us!' ;
   return $message;
}

In this case, we’re changing the message to Your product has been added to your cart. Thank you for shopping with us!

To make it more personalized, you can display the name of the product the customer has just added to the cart as follows:

add_filter( 'wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2 ); 
 
function quadlayers_custom_wc_add_to_cart_message( $message, $product_id ) { 
    $message = sprintf(esc_html__('%s has been added to your cart. Thank you for shopping!','tm-organik'), get_the_title( $product_id ) ); 
    return $message; 
}

These are just a few examples but there’s a lot more you can do and add links and buttons to the message. For more information about that, check out our guide on how to change the WooCommerce Add-to-Cart message.

Bonus: Change the Add to Cart button text for different categories

Now let’s say you have different product categories and you want to have custom Add to Cart buttons for each category. For example, you may want to have a button that says “Buy Now” for product category 1 but display the text “Download” for category 2.

To do this, you should use the same function we used in point 1. add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

You need to get the categories of each product and then use a conditional to change the text depending on the taxonomy as follows:

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

My Add to Cart button doesn’t work. What can I do?

There may be several reasons why the Add to Cart button may not work. The most common ones are:

• Plugin/theme incompatibility
• Products with incomplete information
• Issues with cache
• Checkout endpoints
• Permalinks
• ModSecurity issues
• And more

To learn how to solve each of these issues, check out our guide on how to fix the Add to Cart button.

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, customizing the Add to Cart button can have a great impact on your business. That’s why we recommend you 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 or below 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