How To Add A Circle Background To The Divi Cart Quantity Number

The shopping cart is a crucial part of every e-commerce website. Let’s give the default Divi menu cart icon a more modern look by adding an overlapping circle background to the cart quantity number. Make your Divi cart look like the Squarespace or Shopfiy cart with a cart quantity bubble. 

Join +2030 subscribers!

Before (default Divi menu cart)

Default Divi cart icon and cart quantity in desktop menu

Desktop menu with the default menu cart.

Default Divi cart icon and cart quantity in mobile menu

Mobile menu with the default menu cart.

After (styled Divi menu cart)

Default Divi cart icon and cart quantity in desktop menu

Desktop menu with the styled menu cart.

Cart quantity in circle in Divi mobile menu

Mobile menu with the styled menu cart.

Displaying The Cart Quantity In A Circle On Top Of The Divi Cart Icon

You have probably seen this shopping cart icon design on several successful e-commerce websites: A big cart icon in the top right of the menu with the number of items wrapped in a neat circular background.

Can this be achieved with Divi and WooCommerce? Yes, by using the Divi Theme Builder and a couple of code snippets. We will style as much as we can using the design options in the Visual Builder and add the rest with custom CSS.

  1. First, we need to hide the “Items” text to the right of the cart quantity. Follow the steps in in the tutorial Remove “Items” Text Beside Divi Cart – Only Display Cart Icon + Number and then come back to step two below.
  2. Head over to Divi » Theme Builder and edit your Header template.
  3. Hover the Menu module and click the cogwheel to edit the menu settings
  4. Make sure that both Show Shopping Cart Icon and Show Cart Quantity is set to YES under Content » Elements.
    Display cart icon and cart quantity with Divi Theme Builder
    Don’t worry if you still see the text “Items” in the Theme Builder. If you followed step 1, the text will be hidden in frontend.
  5. Click the Design tab and click Icons to change the Shopping Cart Icon Color and Shopping Cart Icon Font Size. I’ve used #333 and 25px in this tutorial.
  6. Scroll down and expand the Cart Quantity Text to style the number that will be displayed in the circle. I’ve used the Font Poppins, Font Weight Bold and Text size 11px in this tutorial.
  7. Change the Cart Quantity Text Color to #fff (white)
    ⚠️ If you use a white background for your menu, the Cart Text will not be visible at the moment. Don’t worry, we will fix this in the upcoming steps when we add the circle background.
  8. Save your settings and exit the Theme Builder.
  9. Not it’s time to create magic with some custom CSS! Go to Divi » Theme Customizer and click Additional CSS.
  10. Copy the entire CSS snippet below and and paste it in the Additional CSS field:
    /* Display cart quantity in circle in menu */
    .et_pb_menu__cart-count {
        background-color: #7d75d9;
        border-radius: 50%;
        border:2px solid #fff;
        min-width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: -21px;
        margin-top: -21px;
        z-index:9;
    }
    
    /* Add extra space left of cart icon in desktop menu */
    @media (min-width: 981px) {
    .et_pb_menu__icon.et_pb_menu__cart-button {
        margin-left:22px
    }
    }
  11. Click the blue Publish button to save.

That’s it! Preview in frontend to see the result. You might need to clear your website cache and browser cache to see the changes. The end result should look something like this:

Divi cart icon with Items number in circle

Tweaking the design

The mobile menu cart quantity actually looks pretty good without any special tweaks. I just added a little extra margin-left for the desktop menu, since the cart can look a bit squeezed in the menu when you increase the cart icon size.

Feel free to change colors and other values to find a cart quantity design that fits your needs. Just make sure that two digits (10 and higher) also fits in the circle – we want your visitors to purchase many items, right?

Adjust the margin-left and margin-top values to move around the cart quantity bubble.

Any questions? Let me know in the comments and I’ll do my best to answer everyone.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: Hide Cart (or “0 Items”) When Empty In Divi & WooCommerce

👉 Related post: How To Display Cart Icon And Items Number In Divi Menu

Related posts

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo