When using WooCommerce, a little shopping cart icon will appear in your Divi theme's Header menu (either in the main header or in the secondary navigation bar if you have one).
Hide the Cart Icon using Divi Booster
Divi Booster includes an option to hide the WooCommerce cart icon from the header.
You'll find the option on the Divi Booster settings page, at:
"Plugins > WooCommerce > Remove WooCommerce cart icon from header"
Hide the Cart Icon using CSS
If you'd like to get rid of it, you can use the following CSS:
.et-cart-info { display:none !important; }Related Post: Adding CSS to the Divi Theme
Hide the Cart Icon from logged out users
If you want to hide the cart icon from logged out users (so that only logged in users see it), you can use this CSS instead:
body:not(.logged-in) .et-cart-info { display:none !important; }Hide the Cart Icon on desktop only
If you want to hide the cart icon on desktop, but keep it showing on mobile / tablet, use this CSS:
@media only screen and (min-width: 981px) {
.et-cart-info {
display:none !important;
}
}Hide the Cart Icon using Hide Woo Elements
You can also hide the cart icon using the Hide Woo Elements plugin. Its option for hiding the cart icon can be found from the WP dashboard at:
"WooCommerce > Hide Woo Elements > Hide Elegant Themes header cart?"
Thank you so much. Been trying to do this for ages!
You're very welcome, Karen!
Hi,
Any css code available to change the cart icon to something else like a speech bubble?
Thanks
D
Hey Darren, I've put up a post with the CSS for changing the cart icon to a speech bubble:
https://divibooster.com/changing-the-woocommerce-cart-icon/
Hope it helps!
Hi – I ticked this option and I'm still seeing the shopping cart. Could you please help. https://freshstartliveoak.com
Hi Mary, I think this is because the RoyalCommerce theme you're using is implementing its own cart icon in the header, separate from the Divi one.
You should be able to hide the RoyalCommerce cart icon with this CSS:
#et-top-navigation .cart-contents { display: none; }You can add it into the "Divi > Theme Options > General > Custom CSS" box. I'm not sure if RoyalCommerce has renamed Divi in the WordPress Dashboard menu, but if so I image the theme options would be found under a "RoyalCommerce" menu item instead.
where to write this code?
.et-cart-info { display:none !important; }
Hi Maher, you should be able to add it in to the Divi Custom CSS box found at "Divi > Theme Options > General > Custom CSS", or alternatively in the style.css file of your child theme if you are using one.
Thank you the code helped and your content is interesting will check your stuff out.!
Thanks Again
You're welcome, qumar!
That one line CSS worked like charm. Thank you so much Dan
You're very welcome, Saiful!
Didn't work for me :(
Hi Vik, it looks Divi was overriding the CSS rule on vertical menus. I've updated the post above to add "!important" to the rule. This will ensure that the rule takes precedence over Divi's vertical menu style and should get the icon hidden for you. I'll include this fix in the next version of Divi Booster (2.8.8) which I'll hopefully have out this coming week. Let me know if the icon is still showing after that. Thanks!
Worked like a dream! This was extremely useful thank you!
You're very welcome, Jasmin. Thanks for letting me know!
Worked great, thanks!
Hi,
I set this option, but the cart icon is still at the header. I don't know where there is a problem, can you help me? Thank you
Hi Jack, I just took a look at the site and the cart icon now appears to be hidden correctly. If you're still not seeing it, can you try clearing your browser cache to see if that helps? It looks like Divi Booster's files are being cached by the SG Optimizer plugin you're running. I'd suggest you purge the SG cache after making any future changes in Divi Booster to ensure that they show up straight away. I hope that helps.
Thank you so much for the tip. I must have tried 5 code lines suggested on different forums with no luck, before I came across yours. I racked my brain for an hour looking in every menu possible and couldn't find a way to remove that cart.
nicely work for me