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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button type="submit" class="single_add_to_cart_button button alt fa fa-arrow-right"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .single_add_to_cart_button.fa:before { | |
| padding-right: 10px; | |
| } |
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!
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.
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.