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. 

Before (default Divi menu cart)

After (styled Divi 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.
   
   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:

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 VictorDuse.com on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How To Style Your Divi Cart Icon Like Shopify

👉 Related post: Change The WooCommerce Cart To A Custom Icon Or Image With Divi

👉 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