Changing the WooCommerce Cart Icon


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 */
    background: url('') !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.



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

    • 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!

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

    • 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!


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.