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 +2030 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:
- Go to your WordPress dashboard
- Head over to Divi » Theme Builder
- Create an Global Header (if you already have one, you can just edit it)
- Insert a Menu module (or edit your existing module)
- Go to Content » Elements and enable Show Shopping Cart Icon and Show Cart Quantity.
- 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.
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:
- From your WordPress dashboard, go to Appearance » Menus
- Click the create a new menu link
- Give your new menu a name, for example Secondary Menu
- Add at least one link item to your new menu, for example a “My Account” link
- Tick the Secondary Menu checkbox to the right of Display location
- 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.
A Divi Secondary Menu with cart icon and cart items number.
That’s all for today!
👉 Related post: Hide Cart (or “0 Items”) When Empty In Divi & WooCommerce