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

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.

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 Nov 1, 2022 @ 10:57 am

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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

9 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

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart