Hide Cart (or “0 Items”) When Empty In Divi & WooCommerce

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 +2030 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.

  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.

Before

Cart icon and 0 Items

Cart icon and “0 Items” text when cart is empty.

After

Cart without 0 Items text when empty

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.

  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.

Before

Cart icon and 0 Items

Cart icon and “0 Items” text when cart is empty.

After

No cart icon and no "0 Items text" when cart is empty

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

Related posts

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo