Hide WooCommerce Cart Icon When Empty
Posted on
Need to hide 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 of 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 as it serves no purpose?
With this strategy in mind of hiding the shopping cart icon, with a little code snippet you can make it appear when something is added.
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 WooCommerce cart icon when there is something in the shopping cart.
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…
Not every CSS class needs the [dot].