Ecommerce is all about user experience, and making it easier for people to add to cart and checkout smoothly. Reducing the number of checkout fields is a great idea for example – as well as graphically communicating your number 1 objective: “please add to cart now!”.
So, how do you add an icon (or an HTML symbol) to the add to cart buttons in WooCommerce? This can be done in two ways – via CSS if you want to show Fontawesome Icons or via PHP if you prefer to use a simple HTML unicode symbol.
Let’s take a look at both methods!
PHP Snippet: Add an HTML Symbol to the Add to Cart Buttons – WooCommerce
You can find the list of HTML symbols here: https://www.w3schools.com/html/html_symbols.asp. Basically, by using some HTML entities, you can print a symbol on the screen such as –> € <– (FYI, I just used “&”, “euro” and “;” without spaces to print the symbol).
add_filter( 'woocommerce_product_single_add_to_cart_text', 'wordpressexperts_add_symbol_add_cart_button_single' );
function wordpressexperts_add_symbol_add_cart_button_single( $button ) {
$button_new = '» ' . $button;
return $button_new;
}
Final result:
Where to add this snippet?
You can place PHP snippets at the bottom of your child theme functions.php file (delete “?>” if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files
