Hide WooCommerce Cart Icon When Empty

Need to hide the WooCommerce cart Icon when Empty?

We love taking the approach of keeping a website menu as clean and distraction-free as possible. 

There are many e-commerce websites online that will add a shopping cart icon within the main navigation menu or somewhere in the header area.

Our thought on this is while the icon itself can be useful in driving conversions and helping the customer navigate to the checkout page, it is completely pointless if there is nothing inside the shopping cart.

This means that the website visitor has not yet put any type of product or service into their shopping cart.

Why take up space displaying the shopping cart icon when there is nothing in it and it serves no purpose?

With this strategy in mind of hiding this shopping cart icon, with a little code snippet you can make it appear when something is added to the shopping cart.

With WooCommerce being the #1 e-Commerce solution for WordPress websites this is the platform that we are going to speak about when it comes to hiding the WooCommerce cart icon when empty.

---

LETS GET AT IT!

Please follow the simple steps below to add a small snippet of code to your website which will only trigger the display of the will Commerce cart icon when there is something in the shopping cart.

Step #1 – Find your cart icon CSS class name

To make the cart icon appear or not appear you will need to track down the name of the CSS class that is assigned to it.

Please take a look at the short video below to show you exactly how to find the CSS class name of your shopping cart icon.

---

Step #2 – Place the CSS class name in a custom function

Now that we have the name of our CSS element for our shopping cart icon we are going to want to create a custom function and use this name to trigger the option of being visible or being unseen.

Your CSS class name will be placed inside the snippet below where it says CLASS_NAME.

// Hide WooCommerce Cart Icon When Empty
add_action( 'wp_footer', function() {
    if ( WC()->cart->is_empty() ) {
        echo '<style type="text/css">CLASS_NAME{ display: none; }</style>';
    }
});

---

Step #3 – Place custom function into your site

We now have everything that we need to implement this custom functionality into our website.

You will take the custom function that you created in Step #2 and place this inside the functions.php file of your active theme.

---

The end result…

Now that we’ve completed all the steps and added this custom function to our website let’s see it in action in the video below.