Hide WooCommerce Cart Icon when Cart Empty

|

When WooCommerce is active on a site running the Divi theme, Divi will display a cart icon in the header. Clicking on this cart will take the the user to the checkout. If you don't want users clicking through to an empty checkout page, you can hide the cart icon while the cart is empty. Here's how:

Hide the Cart Icon when Empty Using PHP & CSS

Unfortunately, Divi doesn't provide a way to distinguish on the front-end whether the cart is empty, or has items in it. But with a bit of PHP we can easily add a body class which indicates whether the cart is empty or not. Here's the PHP code:

/* Add cart empty / not empty body class. https://divibooster.com/?p=267906 */
add_filter('body_class', 'db_add_cart_status_class');

function db_add_cart_status_class($classes) {
	if (function_exists('WC')) {
		$cart = WC()->cart;
		if (isset($cart) && is_callable(array($cart, 'get_cart_contents_count'))) {
			$items = $cart->get_cart_contents_count();
			$classes[] = $items?'db_cart_has_items':'db_cart_is_empty';
		}
	}
	return $classes;
}
/* End */

With that in place, we can now use the ".db_cart_has_items" class to style the cart when it has items in it, and we can use the ".db_cart_is_empty" class to style (or hide) the cart icon when the cart is empty.

Here's the CSS to hide the cart icon when the cart is empty:

.db_cart_is_empty .et-cart-info {
	display: none;
}

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *