Changing the WooCommerce Cart Icon

This post may contain referral links which may earn a commission for this site

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

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

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

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