How to change the cart icon in WooCommerce

woocommerce shopping cart icon

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.

 

WooCommerce shopping cart icon

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.

woocommerce shopping cart icon library

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.

WooCommerce add shopping cart icon to menu

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.

WooCommerce shopping cart icon shortcode

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.

WooCommerce cart icon shortcode

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(); width: 30px; height: 30px; display: block; background-size: 100%; background-repeat: no-repeat; }

.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.

how to add WooCommerce cart icon to menu

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.

WooCommerce cart icon in 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.

WooCommerce cart icon in menu

Now, you can edit any items in the header. To add a cart icon, you drag and drop the Woostify – cart icon widget.

change woocommerce cart icon

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.

how to change woocommerce shopping cart icon

Then, you can select any cart icon from the icon library and click on Insert.

woocommerce shopping cart icon in header

Now, your WooCommerce store has a new shopping cart icon.

woocommerce shopping cart icon in menu

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.

how to remove shopping cart icon WooCommerce

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

WooCommerce cart icon 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
2. Can work with different WooCommerce themes

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!

Subscribe
Notify of
guest

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
JudyAnn
JudyAnn
3 years ago

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.”

Dylan Ngo
Admin
Reply to  JudyAnn
3 years ago

where did you add the code?

JudyAnn
JudyAnn
Reply to  Dylan Ngo
3 years ago

appearance>customize>additional css

JudyAnn
JudyAnn
Reply to  JudyAnn
3 years ago

was this the wrong place to put this css?

4
0
Would love your thoughts, please comment.x
()
x

stay informed!

Subscribe to receive exclusive content and notifications