The free WooCommerce Custom Add To Cart Button plugin lets you change the text in the add to cart button, and/or add an icon. It comes with a built-in cart icon which is suitable for most stores.

This article explains how to replace the built-in cart icon with an icon of your choice.

Please note that the following instructions contain a code snippet which is aimed at developers. In particular, they assume some familiarity with WordPress' template system. If you don't know how to do this then you should ask your developer. Alternatively, we recommend posting a job on Codeable, where one of their pre-approved WordPress experts will send you a quote:

Instructions

Using a different WooCommerce icon

WooCommerce uses a font icon for its design and you can see all the available icons here. It is relatively easy to replace the add to cart icon with one of these - just copy the 4-letter word at the bottom of the icon name, and replace it in this code:

.wc-add-to-cart-icon .add_to_cart_button.text_replaceable:before, .wc-add-to-cart-icon .single_add_to_cart_button:before {
  content: "\e020"; 
}

Replace the "e020" in the code above with the 4-digit code for your own icon.

You can add the above code via a code snippets plugin, add it to the style.css file in your child theme, or to Appearance → Customizer → Additional CSS.

Using a different icon font

If you'd prefer to add a different icon, then you can add your own icon pack and use it for the add to cart button.

This requires a slightly different code snippet:

.wc-add-to-cart-icon .add_to_cart_button.text_replaceable:before, .wc-add-to-cart-icon .single_add_to_cart_button:before {
content: "\e020";
font-family: "FontFamilyName"; 
}

Edit the code to add the font family name and replace "e020" with the code for your own icon.

Some tips:

• You must add a backslash is necessary before the icon code.
• If you’re already using a font icon like FontAwesome, then all you have to do is to go to their icons page and find the Unicode for the icon you want.
• We recommend reading the usage documentation for your chosen icon font.
• If you want to create your own icon font, then you can use IcoMoon. If you need more information about how to create an icon pack and use it on your website, then you can see the IcoMoons documentation.