Custom Cart Icon

Written by the Divi Engine Documentation Team

Watch This Video

How To Add Cart Icon?

After activating the WooCommerce plugin, a cart icon should appear in your main menu. If you have created a header in the Theme Builder then add the cart icon using the Divi Menu, Blurb module or shortcode [bodycommerce_cart_icon]. If you are using Divi Mobile, then you may need to activate the shopping cart icon in Divi Mobile for BodyCommerce to take over and show the custom cart style - please check this setting.

Step 1: Use Custom Cart Icon

Go to BodyCommerce > Cart Icon Settings and enable the use of a Custom Cart Icon.

Custom Cart Icon Settings

1. Select custom icon: Choose the icon style you want, we have created multiple SVG icons that you can choose from.
2. Icon Width: Change the size of the icon width.
   
3. Icon Color: Change the colour of the icon.
   
4. Icon Background Color: If you want a background behind the icon - choose it here.
   
5. Icon Background Padding Left: Add some space on the left.
   
6. Icon Background Padding Right: Add some space on the right.
   
7. Icon Background Padding Top/Bottom: Add some space on the top and bottom of the icon.
   
8. Enable Numbers: Enable/disable the cart content number next to the cart icon.
   
9. Text After Numbers (singular): 

   This adds text after the numbers in the cart - the default is "items" by Divi. To remove this text, leave this box blank. This is the option for when there is only one product added.

10. Text After Numbers (plural): This adds text after the numbers in the cart - the default is "items" by Divi. To remove this text, leave this box blank. This is the option for when there is more than one product added.

11. Icon Position From The Right: 
    Set how far right you want the cart icon to be. (horizontal)
12. Icon Position From The Top: Set how far from the top you want the cart icon to be. (vertically)

Cart Icon Number Count Appearance

1. Select Style: Choose if you want a background behind the cart number or not.
2. Number Count Position From The Right: Set how far right you want the cart icon number count to be. (horizontal)
3. Number Count Position From The Top: Set how far from the top you want the cart icon number count to be. (vertically)
4. Number Count Background Color: Change the number background colour behind the number.
5. Number Count Background Color Hover: Change the  number  background colour behind the number when you hover over it.
6. Number Count Background Border Radius: Change the  number background colour border radius.
7. Number Count Background Width: Change the  number background width.
8. Number Count Background Height: Change the  number of the  background height.
9. Number Count Text Color: Change the number colour.
10. Number Count Text Font Size: Change the number font size.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.