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 */Related Post: Adding PHP to the Divi Theme
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;
}Related Post: Adding CSS to the Divi Theme
0 Comments