How To Show The Live Cart Quantity In The Divi Menu Module Tutorial by Pee Aye Creative

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

Nelson Miller Pee Aye Creative
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.

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.

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
}

Last updated Oct 10, 2023 @ 1:34 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

21 Comments

  1. 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…

  2. 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
  3. 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
  4. 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

  5. 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
  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. 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
  8. 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
  9. 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

Submit a Comment

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

Recent Posts

0

Your Cart