Change The WooCommerce Cart To A Custom Icon Or Image With Divi

Changing the default shopping cart icon in your Divi menu can give your WooCommerce site a unique touch. Here is how to use a Divi Font cart icon – or a custom image cart icon – for free without plugins. We’ve added a free cart icon pack download in the end of the post.

Join +2030 subscribers!

Method #1: Use Any Divi Font Icon As Cart Icon

Elegant Themes released 360 free Icon Fonts back in 2013. Today, these icons has become a native part of Divi and the Visual Builder. If you have used premade icons in the Blurb module, you are probably familiar with the Divi Font Icons.

The default Divi cart icon does actually come from this set of font icons. But there are many more cart related icons to choose from, for example shopping bags, gift boxes, portfolio bags and cartons.

There are a several advantages to using font icons instead of image icons:

  • They are vector-based and stay crisp if you resize them
  • You can change color and size using the Divi Visual Builder
  • They are small and load fast
  • They are completely free to use

And it’s really easy to change the default Divi WooCommerce menu cart icon by just adding a CSS snippet.

Divi Font Icons

Choose from +360 free Divi Font Icons.

Changing The Default Cart Icon To A Divi Font Icon, Step By Step

First, make sure that you have created your header using the Divi Theme Builder (and not via the deprecated Divi Theme Customizer).

Second, make sure that you display the cart icon in the Divi Menu Module Settings.

Now, you are good to go!

  1. From the WordPress dashboard, go to Divi » Theme Customizer » Additional CSS
  2. Copy one of the snippets below and paste it in the Additional CSS field.
  3. Save by clicking the blue Publish button.

Now you can preview your new cart icon in frontend. You might need to clear your website cache and browser cache to see the changes.

9 Examples Of Cart Icons Using Divi Font Icons

Here are a few examples of nice alternative cart icons using the Divi Font Icons library. Just copy and paste the CSS snippet for the icon that you want to use.

Shopping bag line icon

5 Items

/* Line shopping bag cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e013";
}

 

Shopping bag solid icon

5 Items

/* Solid shopping bag cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e079";
}

 

Shopping cart line icon

5 Items

/* Line shopping cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e015";
}

 

Portfolio bag line icon

5 Items

/* Line portfolio bag cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e021";
}

 

Portfolio bag solid icon

5 Items

/* Solid portfolio bag cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e085";
}

 

Gift box line icon

5 Items

/* Line gift box cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e008";
}

 

Gift box solid icon

5 Items

/* Solid gift box cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e073";
}

 

Download line icon

5 Items

/* Line download cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e004";
}

 

Download solid icon

5 Items

/* Solid download cart icon in menu */
.et_pb_menu__cart-button:after {
    content: "\e071";
}

 

Styling Your New Divi Cart Icon

⚠️ Important. You will still see the default cart icon in the Divi Theme Builder interface. But don’t worry, your custom cart icon will display correctly in frontend.

  1. From your WordPress dashboard, go to Divi » Theme Builder
  2. Edit your Header template
  3. Hover the Menu module and click the cogwheel to change the settings
  4. Click the Design tab and expand the Icons tab
  5. Here you can change the Shopping Cart Icon Color including settings for hover color and mobile devices.
  6. If you scroll down a bit, you can change the Shopping Cart Icon Font Size.
  7. Save and exit the Theme Builder.

Preview in frontend to see the changes applied to your custom cart font icon.

Choose Your Cart Icon From Over 360 Free Divi Icons

Above are seven examples from the huge Divi Font Icons library. Here’s how you can pick and choose any icon you want.

  1. Header over the the Divi Font Icons blog post from Elegant Themes
  2. Scroll down to the heading Complete Set and Unicode Reference Guide
  3. Copy the code for the icon that you want to use as your cart icon, for example  for the gem icon.
  4. Remove the first three characters from the code &#x
  5. In the case with the gem icon, the final code should be e016;
  6. Copy the snippet below and replace e001; with your icon code (make sure to keep the leading backslash).
    .et_pb_menu__cart-button:after {
        content: "\e001;";
    }
  7. Go to Divi » Theme Customizer » Additional CSS and paste the CSS snippet
  8. Click the blue Publish button to save.

That’s it! Preview in frontend to see the changes. You might have to clear your website cache and browser cache to see the changes.

Method #2: Use Custom Image As Divi Cart Icon

Can’t find a fit for your WooCommerce cart icon amongst the Divi Font Icons? No worries! It’s easy to use a custom image as cart icon using Divi and some custom CSS.

This snippet only works if you use a Divi Theme Builder header (not a Divi Theme Customizer menu). Make sure that you display the cart icon in the Menu module settings first.

⚠️ Important. You can’t style a custom cart image icon using the Divi Visual Builder design settings in the Menu module. Make sure that you export the image with the color and size that you want to use.

  1. Create your custom cart image icon using a graphic design tool like Canva or Adobe Illustrator.
    💡 Pro tip: Export your icon as a transparent SVG or PNG image.
  2. Upload your cart image icon in to your WordPress Media Library from Media » Add New
  3. Click the cart image to see details about the attachment.
  4. Click the Copy URL to clipboard button and paste the URL in a text document (we will use it soon)
    Copy the image URL in the WordPress Media Library
  5. Exit the Media Library and go to Divi » Theme Customizer and head over to Additional CSS
  6. Copy the CSS snippet below and paste it into the Additional CSS field:
    /* Add custom cart image icon in Divi menu */
    .et_pb_menu__cart-button:after { 
    	font-size:0; 
    	background: url('https://yourdomain.com/wp-content/uploads/20xx/xx/your-icon.png')
    	no-repeat; 
    	content: '';
    	height: 30px;
    	width: 30px;
    	background-size: cover; 
    }
    
  7. Replace the placeholder URL https://yourdomain.com/wp-content/uploads/20xx/xx/your-icon.png with your cart image icon URL (from step 4) between the single quotation marks
  8.  Replace the height and width values with the actual size for your cart image icon. I’ve used 30px for both in this example.
    Custom cart image icon in Divi
  9.  Click the blue Publish button to save your settings

That’s it! Preview and frontend. You might have to clear your website cache and browser cache to see the changes.

Adding Extra Spacing To The Left Of The Cart Icon

When you use a bigger cart icon you might want to add some extra space to the left of the cart icon in the desktop menu. Just paste the CSS snippet below to your custom CSS and adjust the number of px to increase or decrease the spacing.

/* Add extra space left of cart icon in desktop menu */
@media (min-width: 981px) {
.et_pb_menu__icon.et_pb_menu__cart-button {
    margin-left:22px
}
}

This will add add extra margin to the left of the cart both for Divi Font Icon carts (method #1) and Custom Image Icons cart (method #2).

BONUS: Download a free cart icon image pack!

We’ve created 10 minimalistic shopping cart icons that you can use both in personal and commercial web design projects. All icons are available in transparent PNG and SVG (vector) format. They come in three variations: black, grey and white.

Free shopping cart icon pack for Divi
  1. Enter your e-mail address below to subscribe to our newsletter.
  2. Now you’ll get the download link to the cart icon pack.
  3. Download and extract the zip file on your hard drive.
  4. Upload the images to your WordPress media library and get creative!
  5. Read the readme.txt file for more information.
The newsletter contains tips, guides and offers and is sent out approximately once a week. You can unsubscribe at any time. We will never sell or share your email address. Your email address is stored at Mailchimp.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How To Add A Circle Background To The Divi Cart Quantity Number

👉 Related post: Hide Cart (or “0 Items”) When Empty In Divi & WooCommerce

👉 Related post: Remove “Items” Text Beside Divi Cart – Only Display Cart Icon + Number

Related posts

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo