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!
https://wordpress.org/plugins/hide-cart-when-empty/
Cart Icon Blocks, Selectors, and Troubleshooting
The PHP snippet in this article works by checking whether WC()->cart->is_empty() is true and then hiding the element matched by your CSS selector. It is designed for a cart icon added by your theme or a menu/header plugin. Replace CLASS_NAME with the complete selector you found in your browser’s developer tools, including the leading period for a class, such as .header-cart. If the element uses an ID, use a selector such as #header-cart.
This is different from disabling WooCommerce’s cart. Hiding the icon only removes its visual link while the cart is empty; WooCommerce can still accept products and visitors can still reach the cart through another link. To disable shopping-cart functionality entirely, you would need to remove or change the product, add-to-cart, cart, and checkout behavior separately. Do not use this snippet if customers must always have access to the cart.
If your site uses the WooCommerce Cart block or an Advanced Woo Cart Icon block, the selector may belong to the block wrapper rather than the icon itself. Inspect the block on the front end, identify the outer element that includes the icon and its count, and use that class in the snippet. Avoid hiding a broad selector shared by the site header, because it could remove other navigation elements. When a block renders a cart container even while empty, target that specific block wrapper instead of a generic class such as .cart.
- If the icon never appears after adding a product, confirm that the selector is exact and that the CSS is not hiding the element permanently.
- If it remains visible while empty, clear page, browser, and optimization-plugin caches. Cart fragments or block updates can change the markup after the initial page load.
- Add the code through a child theme or a code-snippet tool rather than directly editing a parent theme, so a theme update does not overwrite it.
- Test logged-out and logged-in views, variable products, and a cart emptied after checkout, because themes and blocks can render different markup in each state.
