How To Customize Add To Cart Button In WooCommerce

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)

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

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' );    // < 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' );    // < 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.

<?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->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!