How To Customize Add To Cart Button In WooCommerce

4
11,802 views
change-add-to-cart-button
change-add-to-cart-button

Howdy everyone! Previously I had guided you through several tutorials on the front-end page such as how to simplify Free Checkout Page, how to remove unnecessary fields on checkout page. Today I am going to show you how to change text in WooCommerce add to cart button and more!

In today tutorial I am going to show you how to change text in WooCommerce add to cart button  using a file named functions.php. It goes in your Theme’s folder. 

functions.php or the theme functions file is a template used by WordPress themes. It acts like a plugin and gets automatically loaded in both admin and front-end pages of a WordPress site. Usually this file is used to define functions, classes, actions and filters to be used by other templates in the theme. It can be used to add features and extend the functionality of both the theme, and the WordPress installation.

Step 1: Access to functions. php

To get to functions.php file, firstly of course, you need to log into your wordpress admin page properly.

Appearance > Editor > Theme functions > functions.php (usually on the bottom right-handed corner)

Access to functions.php
Access to functions.php

 

Step 2: Add text above add to cart on Single Product Page

For example, you own an online store and you want to somehow increase the click-through rate and sales conversion rate of your customer. One way to achieve that is to adding more affirmations and promisings. A great example of this is to add  [“30-day return policy offered”] just above the Add to Cart button on the WooCommerce single product page. As a results a customer is likely to decide to pay a little more attention. So, it’s very simple to do this. You can just copy/paste the following snippet in your functions.php template file:

// adds notice at single product page above add to cart
add_action( 'woocommerce_single_product_summary', 'return_policy', 20 );
function return_policy() {
echo '
30-day return policy offered. See Terms and Conditions for details.
';
}

The CSS customization

As you may have noticed, the HTML paragraph tag has an “id” so that you can style it via CSS. In my example I wrote this in the custom.css file:

#rtrn {
text-align: center;
font-style: italic;
}

After doing that, saving your edit properly and the front-end result should look something like this

Front-end result
Front-end result

 

Optional

3. Change the add to cart text on single product pages

Add the following to your functions.php file.

3.1 WooCommerce <2.1

with WooCommerce plugin version <2.1

add_filter( 'add_to_cart_text', 'woo_custom_cart_button_text' );    // &amp;lt; 2.1
function woo_custom_cart_button_text() {
return __( 'My Button Text', 'woocommerce' );
}

3.2 WooCommerce 2.1+

with WooCommerce plugin version 2.1+

You need to add an alternations below

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +
function woo_archive_custom_cart_button_text() {
return __( 'My Button Text', 'woocommerce' );
}

4. Change the add to cart text on product archives

Add the following to your functions.php file.

4.1 WooCommerce <2.1

with WooCommerce plugin version <2.1

add_filter( 'add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // &amp;lt; 2.1
function woo_archive_custom_cart_button_text() {
return __( 'My Button Text', 'woocommerce' );
}

4.2 WooCommerce 2.1+

with WooCommerce plugin version 2.1+

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +
function woo_archive_custom_cart_button_text() {
return __( 'My Button Text', 'woocommerce' );
}

5. Change the add to cart text on product archives by product types

Add the following to your functions.php file and edit the buttons text.

 

&amp;lt;?php add_filter( 'woocommerce_product_add_to_cart_text' , 'custom_woocommerce_product_add_to_cart_text' ); /** * custom_woocommerce_template_loop_add_to_cart */ function custom_woocommerce_product_add_to_cart_text() { global $product; $product_type = $product-&amp;gt;product_type;
switch ( $product_type ) {
case 'external':
return __( 'Buy product', 'woocommerce' );
break;
case 'grouped':
return __( 'View products', 'woocommerce' );
break;
case 'simple':
return __( 'Add to cart', 'woocommerce' );
break;
case 'variable':
return __( 'Select options', 'woocommerce' );
break;
default:
return __( 'Read more', 'woocommerce' );
}
}

The results you see on the front-end page may vary depending on the theme that you are using. If you after insert these codes, you receive a satisfying result, we’d love if you give us a look!

Conclusion

Congratulations! So you had learned how to change WooCommerce add to cart button text. If you had any question or you find this tutorial useful for you.  Leave a comment below. We’d love to  response.

Cheers!

Leave a Reply

4 Comments on "How To Customize Add To Cart Button In WooCommerce"

Notify of
avatar
Sort by:   newest | oldest | most voted
Tom
Guest

Thanks. But how to edit the add-to-cart button for “You may also like”?

Cindy
Admin

Hi Tom,
Did you mean Up-sell block on a single product page? This block use product archives template and you can edit add-to-cart text by doing the following step https://docs.woocommerce.com/document/change-add-to-cart-button-text/#section-4

add_filter( ‘woocommerce_product_add_to_cart_text’, ‘woo_archive_custom_cart_button_text’ ); // 2.1 +

function woo_archive_custom_cart_button_text() {

return __( ‘My Button Text’, ‘woocommerce’ );

}

Andy
Guest

Can someone help me with this error?
“Parse error: syntax error, unexpected ‘&’ in /home1/andrew/public_html/wp-content/themes/eightstore-lite/functions.php on line 350”

Mike
Guest

Thanks for this but do you know how to add affiliate links to the “add to cart” button instead of adding product to an actual cart? I know that woocommerce has an affiliate plugin but it doesnt work with variations. I think the easiest way to do this would be to alter the add to cart button

wpDiscuz