Changing the WooCommerce Cart Icon

Written by Dan Mossop

The Divi Theme has support for WooCommerce built-in and will display a cart icon in the header when products have been added to the cart. The default icon is a shopping cart. Here's how to change it to something different.

Using a Different Built-in Icon

The cart icon comes from Elegant Themes' own icon font. It's relatively easy to swap this icon out for another in the same icon font using CSS.

To do so, we need the code for your chosen icon. Go to the icon font page and look for the icon you want. You should see something like this:

To get the code for the icon, look at the value under the icon (it'll be something like this "v") and replace the "&#x" with a slash "\\" and drop the semi-colon. So "v" becomes "\\76", and "" becomes "\\e065", etc.

You can now change the WooCommerce cart icon using CSS similar to that given in the following examples:

Example: Change cart icon to speech bubble (outline)

/* Change cart icon to speech bubble (outline) */ 
.et-cart-info span:before {
    content: '\76';
    font-family: 'ETmodules' !important;
}

Example: Change cart icon to speech bubble (filled)

/* Change cart icon to speech bubble (filled) */
.et-cart-info span:before {
    content: '\e065';
    font-family: 'ETmodules' !important;
}

Changing the Cart Icon to an Image

If you have an image you'd like to use in place of the cart icon, you can insert it with the following CSS:

.et-cart-info span:before {
    /* icon made by stephen-hutchings from www.flaticon.com */
    background: url('https://image.flaticon.com/icons/svg/2/2772.svg') !important;
    content: '';
    display: inline-block; 
    height: 1em !important;
    width: 1em !important;
    vertical-align: -1px;
}

Change the URL to that of your image file. You may also want to play around with the width and height to get the size of icon you like, and the vertical align value to move it up or down.

Here's an example of the effect. The difference isn't huge in this case as I've just replaced the solid cart icon with a wireframe one, but it should give you the idea. Note that I also applied "filter: invert(100%);" to change my black icon to white.

Before
After

Enhance Your WooCommerce Cart Icons with Divi

Transform your online store's look by easily customizing the WooCommerce cart icon using Divi. With Divi Booster, you can effortlessly change icons, integrate advanced features, and personalize your WooCommerce elements to better fit your brand.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

5 Comments

  1. This is great for me to try because Divi's cart button is boring. Hehe thanks

    Reply
  2. Hi Dan,

    Do you need Divi booster in order for this to work? Not seeing any difference after pasting your code in my divi theme

    Reply
    • Hi Tico, you don't need Divi Booster for this – it should work by itself. Is there any chance you're able to share a link to the page you're working on and indicate which of the three blocks of code you're trying to use? Thanks!

      Reply
  3. How would you do the same thing but with a custom png?

    Reply
    • Hi Paolo, I've just updated the post with a section on how to replace the icon with an image file. I used an svg, but it should work the same with a png. Hope it helps!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts