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;
}
}
I just want to say this was a great solution. Thank you!! I tried another solution that printed a small piece of css to the footer, but this is more programatic, and a better user experience. Great job.
Is it possible this no longer works? I tried this for a menu built in Divi Theme Builder and it did not work.
This works great, but only with the default divi menu not the module. Is it possible to modify this so it works with the cart icon in the menu module?
Hey Daniel, I’m looking for a solution for this and haven’t come up with a suitable one just yet. I do have a workaround that might be of use though…
I’ve tested this and it is working in the latest version of Divi but it does require a free plugin.
1. Download ‘WooCommerce Menu Cart’ By Jeremiah Prummer & Ewout Fernhout.
2. Install, activate and then in the plugin settings make sure you choose the menu you’d like to add/hide the cart symbol to.
3. In your Fullwidth Menu/Standard Menu Module settings, under Elements ensure that the cart icon is disabled.
4. The plugin will now replace the default Divi cart icon and will only show when there are items in the cart. You can play around with the plugin settings to achieve the desired styling.
So far this workaround is the only one I know of. If you’d like me to record a video to guide you through the setup just let me know, otherwise I hope this helps solve your issue.
Have a great day!
Hey Brett! Thanks for the reply! I actually found another way around this — I found some code that adds a class to the body tag if there are items in the cart — from here you just need css to target the cart icon and show/hide relative to the body tag.