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

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

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

Random Divi Posts