🎁 Don't miss Divi's Anniversary Sale! Get up to 70% off Get Deal

Add Cart Icon With Item Count and Price In Theme Builder

Blog, Divi Tutorial | 5 comments

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
Divi Menu Cart Settings

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.

Divi Menu Cart Module

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.

Divi Menu Cart Module Design Tab

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.

Divi Menu Cart Module Preview

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.

5 Comments

  1. Stephen Neilsen

    Hello,

    Great plugin but only displayinh pound symbol. How to add $ symbol to output?

    Reply
    • learnhowwp.com

      Thank you for bringing this up I will look into it soon.

      Reply
  2. Richard

    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.

    Reply
  3. Bruno

    Hello

    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 ?

    Thank you.

    Reply
    • learnhowwp.com

      Hi,

      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

      Reply

Submit a Comment

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

Check out this Amazing Divi Plugin Bundle

Save 25% by Purchasing the Bundle instead of Each Plugin Individually.

Learn More!

Divi Hosting Recommended By Elegant Themes

Get Started From Just $1.99 Per Month