Hide The Divi Woocommerce Menu Icon When Cart Is Empty

Divi Tips & Tricks | 0 comments

The Woocommerce menu icon in the Divi menu is a really useful addition to your online store, but what if there is nothing in the basket?

Hide the Woocommerce menu cart icon entirely

The first way of hiding the Woocommerce menu icon is to simply hide it using CSS. This is quick, easy and will prevent your Woocommerce cart icon from showing in your Divi menu.

/* Hides the Woocommerce cart icon in the menu */
#et-top-navigation .et-cart-info {
    display: none;
}

But we can do better than this!

I believe that the cart icon that lives in the Divi menu is a very useful feature. It’s obvious for your users that it is a shopping cart and it is already wonderfully integrated with Divi. However, when there are no items in the cart there really isn’t much reason for it being there.

Hide the Woocommerce menu cart icon when the cart is empty

Instead of letting your website visitors look at an empty cart, why not hide the menu cart icon when there are no Woocommerce items in the cart?

To put it another way: let’s show the Woocommerce menu cart icon only when there are items in the cart/basket.

Credit for the following snippet of useful code goes to Sekhar Bhal from the Elegant Themes support forums.

Simply copy and paste the following code into your functions.php file. Be sure that you are using a child theme otherwise you will lose these changes when you update your theme.

// Hides Woocommerce menu icon when no items are added to the cart
if ( ! function_exists( 'et_show_cart_total' ) ) {
function et_show_cart_total( $args = array() ) {
if ( ! class_exists( 'woocommerce' ) ) {
return;
}

$defaults = array(
'no_text' => false,
);

$args = wp_parse_args( $args, $defaults );

$items_number = WC()->cart->get_cart_contents_count();

if($items_number):
printf(
'<a href="%1$s" class="et-cart-info">
<span>%2$s</span>
</a>',
esc_url( WC()->cart->get_cart_url() ),
( ! $args['no_text']
? esc_html( sprintf(
_nx( '1 Item', '%1$s Items', $items_number, 'WooCommerce items number', 'Divi' ),
number_format_i18n( $items_number )
) )
: ''
)
);
endif;	
}
}

Answer three quick questions to see if we're a match.