Get FAST WordPress Support
World’s Fastest WordPress Support Since 2009  
Go Up  SERVICES  CHAT LIVE  
hide WooCommerce cart icon when empty

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.


The end result…

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

2 Comments

  • Thanks for the useful function. It did exactly what I needed (after I realized I needed the dot before the class name. It might be worth updating from “CLASS_NAME” to “.CLASS_NAME” – notice the dot…

    Reply

Leave a Reply

Your email address will not be published.