Add an Arrow to WooCommerce Add to Cart Button

At the very first WooConf Cyndie Shaffstall talked about some of the conversion rate optimization (CRO) techniques. One of those techniques was to add an arrow to the Add to Cart button. The arrow helps people find the add to cart button and should increase conversions as it did with many of her clients. So with that knowledge I thought I'd document how you can do that with WooCommerce.

Getting an Icon Font

The first step is to get an icon font. An icon font is a set of icons that you can use and they're saved as a font instead of images which is good for page speed. There are many fonts out there but my favorite is Font Awesome. And there's a handy Font Awesome Icons plugin you can install that automatically loads that font for you.

Now we just need to add the icon to the Add to Cart button.

Adding a CSS Class to the Add to Cart Button

Font Awesome Right Arrows

Some of the right arrows in Font Awesome

There are a lot of icons in Font Awesome and you can choose whichever one you want. I'm going with the basic right arrow.

On the icon page you'll see the CSS classes you need to add to your html to make the icon show up. For my arrow that's fa fa-arrow-right. fa is added to all font awesome elements. And the second class is the specific icon you want to use.

To add a class to the Add to Cart button in WooCommerce we need to override a template. In this case we need to override the Add to Cart button template on the single product page. We have to copy the file in woocommerce/templates/single-product/add-to-cart/simple.php into our-theme/woocommerce/single-product/add-to-cart/simple.php. Once you copy the template over we can add the css classes to the button.

You'll have to go through that template to find the button code and then add the two Font Awesome classes as I did above.

Save those files and we now have an icon in the Add to Cart button!

Add To Cart Button Cramped

Add to Cart Button with Right Arrow from Font Awesome

Adding White Space

You could stop here but I think we can add a little space between that icon and the text. Open up your theme's style.css file and add some code to add that white space.

Save that file and we have a really nice looking Add to Cart button.

Add to Cart Button Arrow

The Add to Cart button with an arrow and enough white space. Looks great!

 

3 thoughts on “Add an Arrow to WooCommerce Add to Cart Button

  1. It is a pity that you have to modify a template file to make this change.
    I tried:
    `add_filter(‘woocommerce_product_single_add_to_cart_text’, ‘nc_change_add_to_cart’, 10, 2);
    function nc_change_add_to_cart( $add_to_cart_text, $product_object) {
    return ‘ Book Now’;
    }`
    but templates/single-product/add-to-cart/variation-add-to-cart-button.php passes the text through esc_html().
    simple.php in same dir also does this but grouped.php doesn’t.

  2. How would you do this with this tempalte?: woocommerce/loop/add-to-cart.php

    • There is a filter there, ‘woocommerce_loop_add_to_cart_link’, that provides you with the entire button html that you could run through str_replace().

      Having said that, loop/add-to-cart.php is called in woocommerce_template_loop_add_to_cart() in includes/wc-template-functions.php. The arguments passed to the add-to-cart.php template are available via the ‘woocommerce_loop_add_to_cart_args’ filter.
      You could add a ‘class’ argument to the arguments array. This would then be applied in the template file.

      I suggest including ‘button’ in the class as that is the default class and there are likely styles for that eg class = ‘fa fa-arrow-right button’

      I haven’t tested any of the above suggestions, just browsed the WooCommerce code.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.