How to Use the Mini Cart Module in Divi for Your WooCommerce Store

Introduction:

The shopping cart experience in WooCommerce plays a direct role in determining the conversion rates. The vast majority of WooCommerce default themes have an outdated approach for accessing the cart page, which disrupts the user experience. Modern shoppers demand a prompt, on-the-go, and dynamic cart experience; this is where a floating mini cart comes into the picture.

WooExpand’s Mini Cart Module gives a low-cost, no-code Divi module for beautiful and functional AJAX-Powered carts that increase usability and conversions right there within the Divi Builder.

The Mini Cart Module in WooExpand

The Mini Cart Module is a part of the Divi WooCommerce toolkit of WooExpand. You can easily display a Floating cart icon or an Inline cart on top using this great feature of AJAX Cart on any page on your site, with real-time cart updates and design options for easy customization.

Key Features:

• AJAX-powered, no page reloads 
• Floating and Inline Cart Support
• Divi Builder visual customization
• Realtime Quantity and Subtotal Updates
• Works with other modules of WooExpand easily

How to Use the Mini Cart Module

Step 1 – Activate the Module 

• Go to the dashboard of your WordPress
• Activate the Mini Cart Module from the WooExpand settings.

Step 2: Add the Module to Your Divi Layout

1. Go to a Divi layout — typically your Global Header, Footer, or Sidebar. 
2. Click + Add New Module. 
3. Search and select Mini Cart Expand. 
4. Position it wherever you want your cart icon to appear.

Step 3: Mini Cart

1. Show Price amount, or Cart icon, or Image as cart icon and count badge in the mini cart. 

Step 4: Mini Cart Content Area

• Cart title add title of the the mini cart
• Cart item added info add information about the cart items
• Cart content type refers to how the cart appears (Offcanvas or Dropdown) with additional customization options such as View and custom size.

As here, offcanvas cart content type from the right side has been selected for the demo design.

Step 5: Enable Floating Cart Mode

Here,

• In the demo design, the floating cart type is bar– you can also select the type as icon.
• Floating cart potion can be selected top centre, bottom centre, bottom right/left, and top right/left.

To make the cart float across the site:  

1. Go to Design > Position 
2. Set it to Fixed or Sticky 
3. Choose a placement such as bottom-right or top-left. 

This gives users easy access to their cart anywhere on your site.

Step 6: Experience Design with Divi-Controls

1. Easily change color, background, mini cart content, button, product items. etc from the design section. 

Everything is controlled visually using Divi’s Design tab.

• The Increment (it will add items to your cart), Decrement (it will remove items from your cart), and Quantity (it will show the number of items added) button color, background, and font size are customized in the demo design below.

• Coupon: Allows you to apply discount codes and reduce the total price.

You can design the coupon section like font, font weight, color, etc, from the Divi design section.

• Shipping Rate: Configure the minicart to dynamically calculate shipping costs based on the user’s delivery address.

You can design the shipping section like font, font weight, color, etc, from the Divi design section.

• Tax: Automatically calculate applicable taxes based on the customer’s location.

You can design the tax section like font, font weight, color, etc, from the Divi design section.

• View Cart: Allow users to easily review their selected items and make adjustments before proceeding.
• Checkout: Guide users through entering payment and shipping details, ensuring a seamless transition from the minicart to order completion.

From the divi design section view cart and checkout color, font, style can be changed.

Step 7: Test Mobile Responsiveness

WooExpand is fully responsive, but you can enhance mobile UX by:

1. Reducing icon size and padding 
2. Adjust drawer animation and width
3. Optionally showing the cart icon only on mobile

Divi’s responsive settings make this easy to tweak per device.

Why Choose WooExpand’s Mini Cart over Others

Most cart plugins:

• Rely on shortcode integration
• Require third-party styling tools
• Don’t play well with Divi

WooExpand’s Mini Cart is:

• Natively built for Divi
• Lightweight and performance-optimized
• Fully visual and modular
• 100% no-code and beginner-friendly

Bonus Tips

• Enable the Module in your Global Header for site-wide access.
• Always visible with Divi Sticky Options
• Ensure the minicart is responsive across devices, providing smooth navigation on both desktop and mobile.

Try It Out — No Code Needed

Features of the Mini Cart Module (No need to buy another plugin or pay extra!)Included in the WooExpand Plugin Bundle. 

• See Live Demo 
• Get WooExpand Now — Lifetime License Available!

Conclusion

WooExpand Mini Cart Module for Divi allows you to add a floating cart with no code in your WooCommerce store. It adds real-time updates, icon customization, and a mobile-friendly design to enhance the user experience of your conversion.