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
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 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.
The Add to Cart button with an arrow and enough white space. Looks great!