Beautiful icons play very important roles in creating an impressive website, especially the icons that display in the header/menu.
If you have ever visited any online shops, you will often see a shopping cart icon in the menu. As a WooCommerce owner, you also can build it on your website. Then, your customers will also see this icon once they visit your store. And when they get any products, this mini cart allows them to see each item added to the cart. Then, if they want to buy many items at the same time, their shopping process won’t be interrupted.
If you don’t know how to add your favourite WooCommerce shopping cart icon to your website menu, then in this article, we also introduce you to different ways to change the default icon to a new one.
Let’s get started!
Table of Contents
What Is a Shopping Cart Icon?
A shopping cart icon is often located in the top menu of your WooCommerce store. Typically, it will show the number of items in a shopper’s cart. And it will update as they put in more things. You may have seen such shopping cart icons when shopping at Amazon.
The WooCommerce shopping cart icon stays in the top menu even when you jump between different pages.
Why Change a WooCommerce Cart Icon
A personalized shopping experience is what every store owner expect to bring to customers. You can accomplish this in one way or another. For example, you can design the WooCommerce product page, shop page, checkout page, my account page, thank you page, and cart page following the specific standards. Rearranging WooCommerce products or other elements to have an organized website is also a way to improve user experience.
Besides, showing a custom WooCommerce cart icon is also one of the best things to do in your WooCommerce store.
By default, WooCommerce offers a shopping cart icon that lets customers see all the items they have picked without moving to another page. But when adding the icon to your WooCommerce, some store owners want to change or style it in different ways, which is often aimed at making it fit for their website design.
If you also want to implement it, then it’s time to learn how to add a favorite WooCommerce cart icon to menu. Specifically, we will show you the three ways to build it on your own
How to change WooCommerce cart icon using the CSS file
You can easily add any icons to your website content and resize them with CSS.
Get a new one from an icon library
Some popular icon fonts for WordPress themes that provide a wide range of stylish icons are Themify Icons, Font Awesome, IcoMoon, Material Icons by Google, and Ionicons. Depending on the specific icon font your website is selecting, you will have different ways to edit your CSS file.
For example, we are using Font Awesome. Then, you just go to the Font Awesome library to search for the WordPress shopping cart icon you want to add.
After selecting the expected icon, you click on it to copy the HTML of the icon. Here our site only needs to copy fas fa-cart-arrow-down.
Then, paste it to your CSS file to replace the default icon with the chosen one. Finally, your page will display the new shopping cart icon.
Besides, you can use the CSS file to change the font size. For example, our icon below is being sized 30px. Then, we can resize it to 20px, 40px or any other.
Change cart icon to an image
Apart from using the icon font, you can choose to change the cart icon to an image. Then, you can consider adding the WooCommerce shopping cart icon shortcode below:
.shopping-bag-button:before {
content: '';
background: url(<https://demo.woostify.com/fashion1/wp-content/uploads/sites/27/2018/10/free-shipping.png>);
width: 30px;
height: 30px;
display: block;
background-size: 100%;
background-repeat: no-repeat;
}How to change WooCommerce shopping cart icon in menu with Elementor Header Footer builder?
If you get to the Woostify pro, you will get a chance to use its add-ons and widgets, including Elementor Header Footer Builder and Cart Icon widget. With these useful tools, you can easily customize the WooCommerce icon cart in menu for your product page or any other pages you want.
Step 1: Activate Header Footer Builder
In the admin area, you select Woostify Options > Header Footer Builder > Activate.
Step 2: Add a custom header template
In the area of Header Footer Template, you click on Add New to customize header or footer. Here we will only show the way to do with Header.
After having a new page as below, we give it the name Custom Header. The important point here is selecting the Header template so that you can customize everything in the menu/header, including building the cart icon.
Now, you can edit any items in the header. To add a cart icon, you drag and drop the Woostify – cart icon widget.
After having the default cart icon, we start editing it in the Style section. Here you will see three options of General, Icon and Item Count. Visit each of them to change its alignment, padding, colour, size, and position as you expect.
If you find the default WooCommerce shopping cart icon quite boring and want to change it, then in the Icon section, you can replace it with a custom icon or an SVG image.
Then, you can select any cart icon from the icon library and click on Insert.
Now, your WooCommerce store has a new shopping cart icon.
In case you want to learn how to remove the shopping cart icon from WooCommerce, we can say you do it at your fingertips. Just take a right-click on the cart icon, then select Delete, then customers no longer see that icon.
For a detailed description of using Header Footer Builder, please look at our video her
How to add WooCommerce shopping cart icon to menu with a plugin
Yeah, using a plugin is also a choice. There are dozens of WooCommerce cart icon plugins out there. But right here, we would like to review one of the best free plugins, named Boostify Header Footer builder for Elementor.
With this powerful plugin, you can fully customize the Header and Footer in your WooCommerce site.
Especially, it comes with lots of useful built-in widgets, including the menu cart that allows designing the cart icon on the header as you want. Then, you can choose to display it on all the WooCommerce pages or only some particular pages.
What’s more, no matter which theme you are using, this header builder plugin can help you add and change the cart icon or edit any other elements. Just set up a new Header and Footer template, then it’s time for you to take advantages of available widgets for customization.
Key Features
- Offer numerous built-in widgets such as menu cart, nav menu, mega menu, and site search that allow customizing all the elements on the header and footer
- Give two cart layout options, including mini cart and sidebar cart
- Create a sticky header or mega menu quickly and easily with the drag and drop feature
- Can be compatible with all WooCommerce themes
- Be free to use
Some notes for Woostify users
Boostify Header Footer Builder for Elementor is the best choice for those who are using Woostify free version. But in case you already have taken the Woostify pro, the built-in add-on Elementor Header Footer Builder is available for you to use.
Create a Shortcode for the WooCommerce Shopping Cart Icon
Firstly, paste the code below to create the [woocommerce_cart_icon] shortcode.
Pros and Cons
In the sections above, we have given you the three ways to show WooCommerce cart icon in header. Each of them has its own advantages and disadvantages.
After that, we will let you see their pros and cons in detail so that you can select the most suitable method for creating a WooCommerce custom cart icon.
| Pros | Cons | |
|---|---|---|
| CSS file | 1. Free to use 2. Don’t need any plugin |
Difficult for those who are in the dark about coding |
| Boostify Header Footer Builder |
1. Free to use 3. Work very well with Woostify theme |
Have some compatibility with some WooCommerce themes |
| Woostify Header Footer Builder | Work well with Woostify theme | 1. Don’t work well with other themes 2. Pay for Woostify pro |
In conclusion,
Building a WooCommerce shopping icon cart is really a simple but effective way to improve the shopping experience for customers. Then, your website will look much more attractive and give users a great navigation experience.
In the article, we have let you see the three ways to have a customized shopping icon cart, including using CSS file, Woostify header builder add-on, and a plugin. You can see their pros and cons to choose the best method for your WooCommerce store.
For the final word, do you suggest any other methods for building or changing the cart icon? If yes, please let us see. Many thanks and good luck!
Introducing WoostifyBlocks beta - Our new plugin for Gutenberg page builder is ready to test 
I tried the “Change cart icon to an image” code but was unable to save because I got a message that read “Markup is not allowed in CSS.”
where did you add the code?
appearance>customize>additional css
was this the wrong place to put this css?