Display Cart Icon And Items Number In Divi Menus

Displaying the shopping cart icon and the number of product items in your Divi menu is best practice for modern e-commerce websites. The visitors simply expect to find the cart number and a shortcut to the checkout in the menu.

Here is how to add a cart icon and the number of cart items using both the Divi Theme Builder and the Divi Theme Customizer menu.

Join +3 860 subscribers!

Method 1: Displaying The Cart And Items Number In The Divi Theme Builder Menu

It’s easy to display a shopping cart icon and the cart quantity using the Divi Theme Builder:

  1. Go to your WordPress dashboard
  2. Head over to Divi » Theme Builder
  3. Create an Global Header (if you already have one, you can just edit it)
  4. Insert a Menu module (or edit your existing module)
  5. Go to Content » Elements and enable Show Shopping Cart Icon and Show Cart Quantity.
  6. Head over to the Design tab to style the cart icon (in the Icons tab) and Items text (in the Items text tab).

Save your header template and make sure to also save your Divi Theme Builder settings before you preview in frontend.

Display cart icon and cart quantity with Divi Theme Builder

The cart icon and the “0 Items” text should display in the Theme Builder after enabling the two first Elements in the Content tab.

Method 2: Displaying The Cart And Items With The Divi Theme Customizer menu

If you use the old Divi Theme Customizer menu there is a slightly different process to display the cart and cart quantity.

There is no option to display the cart or cart quantity when you use the Divi Theme Customizer menu. Just activate the WooCommerce plugin and the cart will display automatically as the last menu link item.

If you only use one single menu, the so called Primary Menu, you will only see the cart icon and no cart quantity. If you want to display the cart quantity beside the cart icon, you need to create a Secondary Menu above the Primary Menu:

  1. From your WordPress dashboard, go to Appearance » Menus
  2. Click the create a new menu link
  3. Give your new menu a name, for example Secondary Menu
  4. Add at least one link item to your new menu, for example a “My Account” link
  5. Tick the Secondary Menu checkbox to the right of Display location
  6. Click the blue Create Menu button in the bottom right.

Clear your website cache and preview in frontend. Now you should see a secondary menu (top bar) with a cart icon and the cart quantity. You can style the Secondary Menu in the Theme Customizer settings under Header & Navigation » Secondary Menu Bar.

I strongly recommend that you use the Theme Builder for more styling options. The Theme Customizer is a deprecated feature in Divi.

A Divi Primary Menu with cart icon without the cart items number.

Divi Secondary Menu with cart icon and cart quantity

A Divi Secondary Menu with cart icon and cart items number.

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: Remove “Items” Text Beside Divi Cart – Only Display Cart Icon + Number

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

Related posts


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