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 :)

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

3 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…

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart