Change the add to cart button text in WooCommerce 2.1+

A many asked question is how to change the add to cart button text in WooCommerce 2.1 and above. In our WooCommerce Uploads Before Add-on we use the function below to change the text into “Add to cart & Upload Files”, but what if you want to change it into something else?

Change the add to cart text on the product page

It’s easy to change the add to cart text on the product page with a default WooCommerce filter. To change it, add the following code to your theme’s functions.php or in a custom plugin.


add_filter( 'woocommerce_product_single_add_to_cart_text', 'wpf_custom_add_cart_text',11);
function wpf_custom_add_cart_text() {
      return __( 'Buy this product!', 'woocommerce' );
 }

If you change the priority (in this example #11 at the end of the filter) you can “override” the text if the text is already changed inside a plugin (like ours) or inside your theme.

Change the add to cart text on the overview pages

If you want to change the add to cart text on the overview pages (archives) you can use the following code inside your theme’s functions.php or in a custom plugin.


add_filter( 'woocommerce_product_add_to_cart_text' , 'wpf_custom_add_cart_text_archive',11);
function wpf_custom_add_cart_text_archive() {
       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' );
       }
}

We hope these two small code snippets will make your WooCommerce site stand out of all the other 😉

Contact us if you’ve any questions or leave your comment below.

7 comments on "Change the add to cart button text in WooCommerce 2.1+"

  • Hi,

    I do like the code a lot. i am using it right now, so i have a CONTACT US instead of add to cart. I also have a code that redirects it to contact page. But i don’t know how i can disable the add to cart functionality. So i don’t want it to add anything to cart. Do you maybe know what i need to add to functions.php ?

    Thank you

    Reply
  • Hello!
    Could you please tell me how do I change the text in the “return to shop” button in http://www.flavoursmoke.pt/cart/ and the text from the following buttons: “Empty cart” and “Proceed to checkout”.

    Thanks!

    Reply
    • Hello Alberto,

      As far as I know all three butons needs a change in language files OR a template override to change. There are no hooks or filters to change these texts.

      However you could always try to use the gettext filter to override the language strings. If this works depends on your configuration. Instructions as described here:

      http://speakinginbytes.com/2013/10/gettext-filter-wordpress/

      Good luck!
      Bart

      Reply
  • Hey there!
    I am curious on how I would go about changing the “Add To Cart” button to a custom buttom or image i want to use instead of the plain one.
    I am not very skilled in the art of CSS but i do know there is a custom area for CSS within my theme.
    Any and or all help would be appreciated.
    Thanks for everything!!!

    Reply
    • Hello Devon,

      This is possible in many ways, but all are CSS related. By default all buttons inside WooCommerce get a CSS-class. Use a tool like Firebug for Firefox (for example) to find which CSS class you need. For a default WooCommerce Single product this is the class .single_add_to_cart_button.

      You can change the style of the add to cart button by adding some CSS to your theme, but all is very theme related. You could try something like this:

      .single_add_to_cart_button {background-image:url(PATH_TO_YOUR_IMAGE_FILE/IMAGE.EXT);color:#000;}

      Good luck!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *