Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Show The Cart Quantity Count In The Divi Menu Module

Nelson Miller Profile Orange
In this tutorial I will show you how to enable the shopping cart quantity live 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.

show cart quanity setting in the Divi Menu module

Let’s take a look at how this looks by default!

showing the new cart quantity in the Divi Menu module

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.

new design settings for the Menu cart quanity text

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;
}
example styling of the Divi cart quantity text

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;
}
example styling of the Divi cart icon and quantity text

Cart Icon

a.et_pb_menu__icon__with_count:after {
YOUR CSS HERE
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

25 Comments

Comments By Others

  1. Nicki Mallam

    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/

    Reply
    • Hemant Gaba

      Hi Nicki!

      Add margin-bottom 20px in the button when you add the -20px margin-top.

      Reply
  2. Chris M

    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.

    Reply
    • Hemant Gaba

      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.

      Reply
  3. Carlos P

    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!

    Reply
    • Hemant Gaba

      Hi Carlos!

      Can you please share the URL of the page to investigate further?

      Reply
  4. Thorben

    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

    Reply
    • Hemant Gaba

      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!

      Reply
  5. Luca

    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!

    Reply
    • Hemant Gaba

      Hi Luca!

      Can you please share the URL of the page to check further?

      Reply
  6. Khai

    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?

    Reply
  7. Adam Willingham

    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.

    Reply
    • Hemant Gaba

      Hi Adam!

      Can you please share the URL of the page to check further?

      Reply
  8. Dave_Fish

    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

    Reply
    • Hemant Gaba

      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!

      Reply
      • Fabio Heublein

        Hello,
        I cant seem to see the code you have posted. Is this on my end?
        kind regards

  9. John Donnellon

    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.

    Reply
    • Hemant Gaba

      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.

      Reply
  10. Dean Somers

    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?

    Reply
  11. Gui Lamu

    Hello,

    After enabeling “Show Shopping Cart Icon”, I don’t have the “Show Cart Quantity” toggle 🙁

    Reply
      • Gui Lamu

        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…

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart