Now Included With Divi!
Once in a while, a little gem comes along in the Divi Changelog that you know is exciting simply because the alternative method is a long code snippet of PHP. So when I see something like this, I feel I need to make the public service announcement and also throw in some extras. So in this tutorial I will show you how to enable and style the shopping cart quantity count in the Divi Menu module beside the cart icon.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Enable The new Cart Quantity Setting
I’m doing this more for the information than for any step-by-step guide, because quite frankly, it is only one step! Go to the Menu module settings to the Elements toggle and enable the Show Shopping Cart Icon. Once this setting is enabled, a new setting appears called Show Cart Quantity. When this is enabled, it will display a number and text to the right of the shopping cart icon.
Let’s take a look at how this looks by default!
You can style the text with new design settings. Just open the Design tab and open the new Cart Quantity Text Toggle. There you will find all the stand font and text design settings.
It looks pretty good, and I am happy that this new feature was added! In the next section, I’ll give you some bonus styling to make it look even better!
BONUS: Styling The Cart Quantity
Since this is a short post about a brand-new Divi feature, I thought I would give you some bonus styling snippets to get you started.
NOTE: Watch the video to see these in action!
As with any CSS, these are meant to customized however you want, so take these as the selectors and example styling and customize them. The first example styles just the text background area, and the second example styles the entire cart icon and text. The last snippet can be used to style just the cart icon.
Cart Quantity Text
/*menu cart number of items*/
.et_pb_menu__cart-count {
background: #000000;
padding: 4px 8px;
border-radius: 50px;
}
Entire Icon + Text
/*overall menu cart button with icon and count*/
a.et_pb_menu__cart-button {
background: #000000;
padding: 8px 14px;
border-radius: 50px;
}
Cart Icon
a.et_pb_menu__icon__with_count:after {
YOUR CSS HERE
}
Hello,
After enabeling “Show Shopping Cart Icon”, I don’t have the “Show Cart Quantity” toggle 🙁
Make sure to be on Divi 4.18.1 and have an ecommerce plugin like WooCommerce active.
Thank for your reply. It’s very weird, I’ve been working with divi for a decade now and never had any issue with updating but for some reason this particular website won’t auto-update the theme…
Wow this is great news, thanks for the update Nelson! I was using a separate plugin for this which then required a premium update to work on multiple languages…
Is there a way to do this when using the default menu instead of the menu module?
I didn’t test for the default menu, but that is being left behind anyhow, wouldn’t use it if possible.
Love this addition to Divi menu module! I’ve been using Divi for years and didn’t know they added that. Also, thanks for the bonus snippets too! Is there any way to get the cart total to update immediately if an item is qty is changed on the cart page. As it is, you need to refresh the page, but it would be great to have it update automatically.
Hi John!
You’re welcome, glad you like it!
It appears to be a standard behaviour. I believe the upcoming Divi theme version will have it fixed.
Hi, awesome as well!!!
How i can show only number without ‘items’ text? That’s because on mobile text doesn’t work well with text!
Thank you so much anyway.
Davide
Hi there!
Please add the following code in Theme options > Integrations > Add code to the < head > of your blog:
Let me know how it goes!