How to Change Add to Cart Button text in WooCommerce? 2021
Logo
Back To Blog

How to Change Add to Cart Button text in WooCommerce?

how_to_change_add_to_cart_button_text

Introduction 

Do you want to know how to change add to cart button text

It’s not that simple to change the add to cart button. But we have some custom piece of code which can help you change the button text to your liking. Also, we have a plugin suggestion as well. Both the processes are simple. But one is better than the other. 

We will be showing you how to add a custom piece of code to your WooCommerce site and change the text. This process, though a bit technical, is the better of the 2 processes we will be showing you. 

So, let’s get started! 

How to Change Add to Cart Button Text in WooCommerce: Adding Custom Code Snippets 

There are two custom pieces of code you can add here. You can use both of these or either of these to change add to cart button text on your WordPress Store. 

The first piece of text will show you how to change the text on a single product page. And the second one is to change the add to cart text on all product archive pages

Adding both of these custom code pieces is the same. But first, you will need to install WooCommerce on your WordPress website. 

How to Install WooCommerce on Your WordPress Site 

In order to implement the solution on how to change add to cart Button Text in WooCommerce, you can/may have to install WooCommerce on your WordPress site first.

It’s a super simple process. All you have to do is follow these steps: 

Installing WooCommerce on WordPress
Installing WooCommerce on WordPress

***Now we believe it is safe to assume that you already have WooCommerce set up. If you haven’t already, then you can follow the above-mentioned steps. 

Once you activate WooCommerce, the WooCommerce wizard will help you set up your storefront. 

Now we are showing you how to add the WooCommerce add to cart button code snippets. So, for the sake of simplicity, we will be installing some sample data to WooCommerce and then show you how to add custom cart button text in WooCommerce shop page.  

Generating Sample Data for WooCommerce Shop Page: Making Sure Everything Works!  

This is more of a precautionary measure when it comes to the matter of how to change add to cart button text in WooCommerce. As mentioned earlier, we will be generating some sample WooCommerce products to show you the way to add WooCommerce add to cart button shortcode. 

***Of course, you can choose to ignore this step and start building your WooCommerce store right away. But going through this precautionary measure will add to your WooCommerce Knowledge Library. 

So, let’s see how you can add sample product data to your WooCommerce page: 

Generating Sample Product Data for WooCommerce
Generating Sample Product Data for WooCommerce
Creating WooCommerce Sample Pages
Creating WooCommerce Sample Pages

You will now see a status bar somewhere on the top indicating that all missing WooCommerce pages were installed successfully. 

Now, you need to follow these steps to complete the process: 

Importing WooCommerce Products
Importing WooCommerce Products

At this stage, the Importer will ask you to upload a CSV file. The easiest way to get this is by downloading the WooCommerce plugin from wordpress.org. Just download it to a folder in your computer and ‘Extract’ it. 

Now: 

Uploading Sample WooCommerce Products
Uploading Sample WooCommerce Products

The importer will now add sample products to the sample pages. You now have a fully functional WooCommerce store for testing. 

*** Again, you can ignore all these steps and go straight to changing the WooCommerce add to cart button, either on a single product page or all product category pages.  

WooCommerce Text Change: How to Change Add to Cart Button Text in the Theme Editor

How to change add to cart button text in WooCommerce

Before we begin, here is a quick disclaimer: 

*** Be sure to be extra careful when adding extra bits of code to the theme files. If you add the code incorrectly, it may break your theme. Again, stay sharp!

How to Change Add to Cart Button Text: Opening the Theme Editor
How to Change Add to Cart Button Text: Opening the Theme Editor
// Change "Add to Cart" > "Add to Bag" in Shop Page
add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_shop_page_add_to_cart_callback' );  
function woocommerce_shop_page_add_to_cart_callback() {
    return __( 'Add to Bag', 'text-domain' );
}
// Change "Add to Cart" > "Add to Bag" in Single Page
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_single_page_add_to_cart_callback' ); 
function woocommerce_single_page_add_to_cart_callback() {
    return __( 'Add to Bag', 'text-domain' ); 
}
Adding the Code to the functions.php file
Adding the Code to the functions.php file

Now you can change the text to whatever you want. Just be cautious when changing the text.

Here’s the preview:

WooCommerce Add to Cart Button Text Change in the Archive Page:

Change in the WooCommerce Product Archive Page
Change in the WooCommerce Product Archive Page

WooCommerce Add to Cart Button Text Change in the Single Product Page:

WooCommerce Add to Cart Button Text Change in the Single Product Page:
WooCommerce Add to Cart Button Text Change in the Single Product Page

How to Change the Add to Cart Button Text in WooCommerce Using a Plugin?

It is probably the more conventional way to change the add to cart text on you single Product WooCoomerce page or the archive product page. 

Although it’s simple, it has a significant drawback. We will discuss it later on. 

First, let’s see how you can use the “Add to Cart Button Custom Text” plugin to change the add to cart button text on your WooCommerce single product/product archive pages. 

This plugin lets you change the texts on a single product page (you can change the different button texts) and the archive product pages (again, you can change the different button texts). 

Here’s how to do it: 

WooCommerce Add to Cart Button Text Plugin
WooCommerce Add to Cart Button Text Plugin

In the “Add to Cart Button Custom Text Plugin”, you can change the WooCommerce single product button text or the button texts of the WooCommerce product archive pages. For both categories, you have the option to change: 

You can play with the different options. For our use case, if you change the “Simple Product Text” for either the single product page or the WooCommerce archive page, then you’ll see the change right away. 

WooCommerce Add to Cart Button Change in Single Page:

Add to Cart Button Text Change in Single Product Page
Add to Cart Button Text Change in Single Product Page

WooCommerce Add to Cart Button Change in Product Archive Page:

Add to Cart Button Text Change in Product Archive Page
Add to Cart Button Text Change in Product Archive Page

Simple, right? 

Not that simple!

You’re getting all these options with only a couple of clicks. So, there has to be a catch right! 

There is! 

You see, plugins like these do not add to the site loading speed. If anything, they make your WooCommerce e-store slower. And that’s something you don’t want! 

If you have a lot of plugins on your WordPress site, then naturally the site loading speeds will take a hit. Because the job of a plugin is to load JavaScript files. If you have too many plugins on your WooCommerce store, then naturally, the loading effects of these plugins will add up, making your site slow!

Customers are not going to wait for your site to load and buy something from you. If you’re site loads slow, then there is a great possibility that your customer will find products elsewhere. Also, slow-loading e-commerce sites generally rank lower on Google SERPS.

It means you may go under the radar of the customer. Although you have something great to offer to the customer, because of a slow WooCommerce store, you won’t be able to reach them!

So, to improve site loading times, you’ll need to optimize your site, which can be cumbersome if you don’t know what you’re doing. As a whole, you’ll need to allot extra time to optimize your site and go through other (may be never-before-seen) processes.

So, What should I Do? 

Although changing the source code of your theme can be risky, there’s a very small chance that it will slow your site down. So, we would advise you to stick with the code snippets. 

It’s the best way to change the WooCommerce add to cart button text.

Yes, plugins are great. They are easy to use. However, the toll it takes on the site speed is just bad for business! And you don’t want that to happen. 

Final Thoughts 

You now know how to change add to cart button text in WooCommerce product pages. You know the way to change the WooCommerce button text by adding custom code snippets to the theme’s functions.php file. 

You also know how you can use a plugin to change the add to cart text. 

On top of all this, you know which option is better for your WooCommerce business.  

So, we will leave the final choice in your hands. After all, you’re the one running the business online. 

Good luck! 

Written bySadik Ahmed

Hey there, I'm Sadik Ahmed, a WordPress enthusiast who loves to try out and review new themes and services.

2 Comments

  1. some21

    June 28, 2021

    Thank you for adding the video tutorial. It is very useful.

    • Sadik Ahmed

      June 28, 2021

      We’re glad you like our post. Feel free to check out other relevant content in our blog. We have some very helpful content on WordPress plugins, especially PostX and ProductX.

Leave a Reply