Hide WooCommerce Cart Icon When Empty

Step #1 – Find your cart icon CSS class name
In order 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 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 invisible.

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 in order to implement this custom functionality into our website.

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