Get FAST WordPress Support
World’s Fastest WordPress Support Since 2009  
Go Up  SERVICES  
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.


GET THIS Hide WooCommerce Cart Icon When Empty Plugin for FREE below!

grab this buy now button

https://wordpress.org/plugins/hide-cart-when-empty/

NEW CUSTOMERS GET 50% OFF ANY SUPPORT SERVICE

We have a special half off any service discount for new customers.
Use this on any service we offer. GET 50% OFF HERE

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.