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.
▶️ Please watch the video above to get all the exciting details! 👆
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
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
}
Thanks for the complete article, I will fix the cart.
You’re welcome!
Hi, Just wondering if you can help me with the CSS for this Cart Button, I’ve used your code, but the button is too big, I want it to be less background colour top and bottom, like your example, but when I add your CSS code I get this. I’m not sure how to tweak it to get it to sit where it needs to be. There is a top margin of 20 added to push the cart icon to align with the menu text, not sure if this makes an affect. Thanks in advance for your help.
https://cpanel-501-melb.hostingww.com/~ih4k1vxb/cart/
Hi Nicki!
Add margin-bottom 20px in the button when you add the -20px margin-top.
Hello-
I have the cart icon with count up and running fine except for one issue. When on the cart page and an item is removed from the cart, the count doesn’t change in the icon unless I refresh the page.
Hi Chris!
Yes, that is a bug from the Elegant themes side. Contact their support about it. They must be having a bug report opened for it.
Hi!!
I just activated the cart count but something really weird happens:
I have categories (i.e. 1,2,3,4,5). When I add a product from a category, whenever I come back to that category the cart only shows the products that where added at that time even If I added more products after that.
Let’s say I add 2 products in cat 3, and 5 products in cat 4, from that moment when I enter in cat 2 it only shows 3 products and when I enter cat 4 it shows 5.
Finally if I enter the cart itself it shows properly the amount of products.
Any idea what this might be?
Thank you very much!
Hi Carlos!
Can you please share the URL of the page to investigate further?
Hi Hemant,
I really like your snippet…. You can call me stupid, but I´ve problems with the first step “Enable The new Cart Quantity Setting” 😉
Could you please tell me, where i find the Menu module settings ?
Is it in the Visual Builder.
Thanks in advance, and sorry about the question.
Best regards,
Thorben
Hi Thorben!
Please go to Menu module settings > Content > Elements, and you will find the Show shopping cart icon option. Enable it to show the icon.
Hope it helps!
Hi Nelson, I entered the css code in the theme options..In custom css.. But the css code you provided in this tutorial doesn’t work.. Maybe because I don’t have the woocommerce plugin active? Thank you so much!
Hi Luca!
Can you please share the URL of the page to check further?
Thank you for the post! Your content is always so helpful. When I tried to use the snippets I am getting an error:
The second line gets unexpected RBRACE and the last line gets unexpected token ‘}’ Any suggestions?
Please be sure to place the code in your Divi Theme Options or child theme, not in the module.
Thank you
Thanks for this tutorial! Unfortunately, I’m having trouble getting the second snippet to work. I’ve added it to Divi > Theme Options > Custom CSS (and saved it), but nothing happened on the cart. I have the cart as part of a Global Header, and it’s the second menu I have on that Global Header. Any ideas on what may be going wrong? I’ve cleared the cache, but still nothing has changed with the cart.
Hi Adam!
Can you please share the URL of the page to check further?
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!
Hello,
I cant seem to see the code you have posted. Is this on my end?
kind regards
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.
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.
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…