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;
}Related Post: Adding CSS to the Divi Theme
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.
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!
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!