When using Divi and WooCommerce on your e-commerce website, you will notice a shopping cart icon followed by the text “0 Items” in the menu when the cart is empty. Here’s how to hide the items number, or the entire cart link, from the Divi menu when the cart is empty.
Join +3 054 subscribers!
“Less is more” is a good motto for web design. Why display “0 Items” when the cart is empty when we can keep the menu neat and clean?
In the first step of this tutorial I will show you how to remove the “0 Items” text to the right of the cart icon in the Divi menu when the cart is empty. In the second step, I’ll show you how to remove both the cart icon and the text “0 Items” text when the cart is empty.
And of course, the cart and the items text will be displayed if the user adds one or more items in the cart. Let’s go!
1. Hiding “0 items” When the Cart is Empty
We are going to add a snippet to the functions.php file. To avoid that the code is overwritten next time you update Divi, you need to have a child theme installed. If that isn’t an option for you, you can use the free plugin Code Snippets instead.
- Start by editing functions.php in your child theme folder (/wp-content/themes/your-child-theme/) or use the Code Snippet plugin.
- Add the snippet below if your menu is built using the Menu module or Fullwidth Menu module in the Divi Theme Builder:
// Hide number of Theme Builder cart items if cart is empty add_action( 'wp_footer', function() { if ( WC()->cart->is_empty() ) { echo '<style type="text/css">.et_pb_menu__cart-count { display: none; }</style>'; } });
- Add the snippet below instead if your menu is built using the Divi Theme Customizer (secondary menu):
// Hide number of Theme Customizer cart items if cart is empty add_action( 'wp_footer', function() { if ( WC()->cart->is_empty() ) { echo '<style type="text/css">.et-cart-info span:before { font-size:12px; } .et-cart-info span { font-size:0px; }</style>'; } });
Save and preview in frontend. You might have to clear the website cache, browser cache and Divi Static CSS cache before you can see the changes in frontend.
Before
Cart icon and “0 Items” text when cart is empty.
After
Cart icon without “0 Items” text when cart is empty.
2. Hiding the Cart Icon and“0 items” When the Cart is Empty
To be even more minimalistic, you can hide both the cart icon and the “0 items” text. Just as in the example above, we are going to add a snippet to the functions.php file. To avoid that the code is overwritten next time you update Divi, you need to have a child theme installed. If that isn’t an option for you, you can use the free plugin Code Snippets instead.
- Start by editing functions.php in your child theme folder (/wp-content/themes/your-child-theme/) or use the Code Snippet plugin.
- Add the snippet below if your menu is built using the Menu module or Fullwidth Menu module in the Divi Theme Builder:
// Hide entire Theme Builder cart if cart is empty add_action( 'wp_footer', function() { if ( WC()->cart->is_empty() ) { echo '<style type="text/css">.et_pb_menu__icon.et_pb_menu__cart-button { display: none; }</style>'; } });
- Add the snippet below instead if your menu is built using the Divi Theme Customizer (secondary menu):
// Hide entire Theme Customizer cart if cart is empty add_action( 'wp_footer', function() { if ( WC()->cart->is_empty() ) { echo '<style type="text/css">.et-cart-info { display: none; }</style>'; } });
Save and preview in frontend. You might have to clear the website cache, browser cache and Divi Static CSS cache before you can see the changes in frontend.
Before
Cart icon and “0 Items” text when cart is empty.
After
No cart icon and no “0 Items” text when cart is empty.
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: Remove “Items” Text Beside Divi Cart – Only Display Cart Icon + Number
👉 Free course: Create a website from scratch with Divi
Hey there. If I do this, it breaks the “item removal” done with Say What… Any clue why?
Nope, I combine them in this video and it works fine: https://divimundo.com/en/blog/how-to-style-your-divi-cart-icon-like-shopify/
Hello, thank you for your video.
Mr. Victor, maybe you know this situation.
Then I buy products on websites https://dovanudovana.lt/ and push the button ad to the card. The icon basket (Divi theme customizer) doesn’t show quantities.
Thanks
Hi Andzejus! The page needs to reload in order for the menu cart to be updated with the correct quantity. If you go to a product page and add the product to the cart, you will see the the page reloads and the correct quantity is displayed. But if you just click the “Add” button from the homepage, the page doesn’t reload.
The “Add” button in the product grid is not Divi standard as far as I know. Maybe the developer of the plugin or the child theme vendor can fix the issue?
Thanks, Victor,
I will apply to theme support