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.

“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.

1. Start by editing functions.php in your child theme folder (/wp-content/themes/your-child-theme/) or use the Code Snippet plugin.
2. 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>';
       }
   });

3. 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.

After

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.

1. Start by editing functions.php in your child theme folder (/wp-content/themes/your-child-theme/) or use the Code Snippet plugin.
2. 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>';
       }
   });
   

3. 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.

After

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