In this article I will share how to add a cart icon with item number and total price in a theme builder layout in the Divi theme using a free plugin.
The plugin that we are going to use is Divi Menu Cart Module.
There is an option to show cart icon in the menu module. However it does not show the item count or the price. It can only show a cart icon that opens the cart page.
We will use a free plugin that is available on WordPress.org to add a new module Divi Menu Cart Module in Divi theme.
1. Install Divi Menu Cart Plugin
The first step is to install the plugin on your website. The plugin you need to install is Divi Menu Cart Module.
If you are not sure how to install a plugin then you can read this article how to install a WordPress plugin.
2. Setup Menu Cart Settings
The plugin will create a new settings page in the Dashboard. The new page is at Dashboard > Divi Menu Cart.
You can set the items text and also choose the content you want to show. You have the option to toggle cart icon, item count and total price next to the cart icon.
Set the plugin options to the following settings and then save them.
- Show Icon: Enabled
- Show Item Count: Enabled
- Show Price: Enabled
3. Add Menu Cart Module In Theme Builder
Once the plugin settings are setup all you have to do is add the Menu Cart Module in your Theme Builder layout.
Open the the theme builder layout where you want to add the module.
Then add a new module and search for Menu Cart.
You will see a cart icon with dummy information inside the Visual Builder.
There are no options to set any content in the module settings. However you can set the styles for the Icon, Count Text and Price Text in the design tab of the module.
Once you save the layout and check your live website you will see the correct number of items and price next to the cart icon.
The complete documentation for the plugin can be found on the Divi Menu Cart Documentation page.
Leave a comment below if you found this helpful or have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials and updates in your inbox.
Great plugin but only displayinh pound symbol. How to add $ symbol to output?
Thank you for bringing this up I will look into it soon.
How do you control whether the Divi cart module displays prices with / without tax ? It seems to always display tax inclusive no matter what tax settings I use in Woo.
Few days after installing the
i received an fatal error message from wordpress :
Uncaught Error: Call to a member function get_cart_contents_count() on null in ……/wp-content/plugins/menu-cart-divi/includes/modules/MenuCart/MenuCart.php:137
The only change I managed to notice is the image displayed by woo commerce in the cart page, it is no longer the product image but one image of the woo gallery.
Can you solve this ?
Can you please make sure that you are on the latest version. There function mentioned in your error message no longer exists on line 137 in that file. The latest version of the plugin is 1.1