Hide Empty WooCommerce Cart in Divi


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;


Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.