Customizing the “Add to Cart” button can improve your WooCommerce store’s look. Adding an icon makes it more engaging, helps user interaction, and aligns better with your brand.
In this guide, I’ll show you quick methods to add an icon to the Add to Cart buttons in WooCommerce.
Table of Contents
Method 1: Add Font Awesome Icon to Add To Cart Buttons
Font Awesome is a popular icon library in WordPress themes. If your website is already using Font Awesome, you can follow this method.
Steps
- Copy the code below and paste it at the end of your
functions.php. (How to access functions.php) - Replace the
fas fa-shopping-cartclass with the Font Awesome icon class you want. - Click Update File.
/*
* Snippet: How to Add FontAwesome Icon to the Add to Cart Buttons in WooCommerce
* Author: Toufique Alahi
* URL: https://wpblogr.com
* Tested with WooCommerce 9.3.3
*/
function wpblogr_add_custom_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Select all Add to Cart buttons and prepend the Font Awesome icon with some margin
$('.single_add_to_cart_button, .add_to_cart_button').prepend('<i class="fas fa-shopping-cart atc-icon" style="margin-right: 10px;"></i> '); // Replace class with the icon class you want
});
</script>
<?php
}
add_action('wp_footer', 'wpblogr_add_custom_script');Enqueue Font Awesome (If already not loaded)
If the icon doesn’t appear, your theme may not load Font Awesome. Add this code to load it:
// Enqueue Font Awesome
add_action( 'wp_enqueue_scripts', 'wpblogr_enqueue_fontawesome' );
function wpblogr_enqueue_fontawesome() {
wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css' );
}Method 2: Add Dashicons to Add To Cart Buttons
WordPress comes with its own icons called Dashicons. These icons load automatically with WordPress. It is a good choice if you don’t want to use third-party icon libraries and keep the site fast.
Steps
- Copy and paste this code into
functions.php. (How to access functions.php) - Replace the
dashicons-cartclass with your Dashicons icon class. - Click Update File.
/*
* Snippet: How to Add Dashicon to the Add to Cart Buttons in WooCommerce
* Author: Toufique Alahi
* URL: https://wpblogr.com
* Tested with WooCommerce 9.3.3
*/
function wpblogr_add_custom_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Select all Add to Cart buttons and prepend the Font Awesome icon with some margin
$('.single_add_to_cart_button, .add_to_cart_button').prepend('<span class="dashicons dashicons-cart atc-icon" style="margin-right: 10px;"></span>'); // Replace class with the icon class you want
});
</script>
<?php
}
add_action('wp_footer', 'wpblogr_add_custom_script');Method 3: Adding Symbols to Add to Cart Button
You can also add simple symbols to your Add to Cart buttons. This method doesn’t use any icon library. This method is simple and fast.
Steps
- Copy and paste this code into
functions.php. (How to access functions.php) - Replace the
$code with the symbol code you want. - Click Update File.
/*
* Snippet: How to Add Symbols to All Add to Cart Buttons in WooCommerce
* Author: Toufique Alahi
* URL: https://wpblogr.com
* Tested with WooCommerce 9.3.3
*/
function wpblogr_add_custom_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Select all Add to Cart buttons and prepend the Font Awesome icon with some margin
$('.single_add_to_cart_button, .add_to_cart_button').prepend('<span class="atc-icon" style="margin-right: 5px;">$</span>'); // Replace $ with the symbol code you want
});
</script>
<?php
}
add_action('wp_footer', 'wpblogr_add_custom_script');Method 4: Adding GIF or SVG Icons to Add to Cart Buttons
To add custom animated GIFs or SVG icons to the Add to Cart buttons, follow these steps:
Steps
- Copy and paste this code into
functions.php(How to access functions.php) - Upload your icon to the Media Libary. Click on the icon and copy the file URL.
- Replace the link
https://example.com/path-to-your-icon.svgwith your icon’s URL. - Click Update File.
/*
* Snippet: How to Add GIF or SVG Icons to All Add to Cart Buttons in WooCommerce
* Author: Toufique Alahi
* URL: https://wpblogr.com
* Tested with WooCommerce 9.3.3
*/
function wpblogr_add_custom_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Select all Add to Cart buttons and prepend the SVG or GIF
$('.single_add_to_cart_button, .add_to_cart_button').prepend('<span class="atc-icon" style="margin-right: 5px; width: 30px; line-height:0;"><img src="https://example.com/path-to-your-icon.svg" alt="Icon"></span>');
});
</script>
<?php
}
add_action('wp_footer', 'wpblogr_add_custom_script');
How to Customize the Icons
The codes above add icons to all Add to Cart buttons. If you only want the icon to appear on the product page, remove the .add_to_cart_button class from the code.
To style the icons, use the .atc-icon class in your custom CSS.
How to Add the Code Snippet
You should add the code snippet to the functions.php file in your child theme. If you don’t have a child theme, read this guide on How to Create a Child Theme.
Once you have the child theme, follow these steps:
- Go to your WordPress dashboard.
- Hover over Appearance and click on Theme File Editor.
- On the right side, find
functions.phpandstyle.css - Click on file names to add the code.
Paste the code and click on Update File.
If you have any questions, feel free to leave a comment below. I will try my best to answer.
