Hide WooCommerce Icon from Divi Header

When using WooCommerce, a little shopping cart icon will appear in your Divi Header menu (either in the main header or in the secondary navigation bar if you have one).

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; }

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 Divi Booster

My Divi Booster plugin 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 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?"

Want get more out of Divi?

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

50 Comments

  1. Thank you so much. Been trying to do this for ages!

    Reply
    • You're very welcome, Karen!

      Reply
  2. Hi,

    Any css code available to change the cart icon to something else like a speech bubble?

    Thanks
    D

    Reply
    • 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.

      Reply
  3. where to write this code?
    .et-cart-info { display:none !important; }

    Reply
    • 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.

      Reply
  4. Thank you the code helped and your content is interesting will check your stuff out.!

    Thanks Again

    Reply
    • You're welcome, qumar!

      Reply
  5. That one line CSS worked like charm. Thank you so much Dan

    Reply
    • You're very welcome, Saiful!

      Reply
  6. Didn't work for me 🙁

    Reply
    • 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!

      Reply
  7. Worked like a dream! This was extremely useful thank you!

    Reply
    • You're very welcome, Jasmin. Thanks for letting me know!

      Reply
  8. 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

    Reply
    • 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.

      Reply
  9. 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.

    Reply
  10. nicely work for me

    Reply

Submit a Comment

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

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

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

50 Comments

  1. Thank you so much. Been trying to do this for ages!

    Reply
    • You're very welcome, Karen!

      Reply
  2. Hi,

    Any css code available to change the cart icon to something else like a speech bubble?

    Thanks
    D

    Reply
    • 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.

      Reply
  3. where to write this code?
    .et-cart-info { display:none !important; }

    Reply
    • 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.

      Reply
  4. Thank you the code helped and your content is interesting will check your stuff out.!

    Thanks Again

    Reply
    • You're welcome, qumar!

      Reply
  5. That one line CSS worked like charm. Thank you so much Dan

    Reply
    • You're very welcome, Saiful!

      Reply
  6. Didn't work for me 🙁

    Reply
    • 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!

      Reply
  7. Worked like a dream! This was extremely useful thank you!

    Reply
    • You're very welcome, Jasmin. Thanks for letting me know!

      Reply
  8. 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

    Reply
    • 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.

      Reply
  9. 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.

    Reply
  10. nicely work for me

    Reply

Submit a Comment

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