How to Add a Mini Cart to Your WooCommerce Store in Divi

by Mariya Dimitrova | Jul 28, 2026

1. Overview
2. What a mini cart is made of
3. Where Divi puts the cart by default
4. Step 1 — Build the header with a cart icon and count
5. Step 2 — Create a canvas for the cart panel
6. Step 3 — Style the panel
7. Step 4 — Add the show and hide CSS
8. Step 5 — Wire up the cart icon
9. What you’re accepting if you build it this way
10. The faster route
11. Pulling it together

Your customer adds something to their cart. And then, on most Divi stores, nothing much happens.

No panel opens. No count updates. If they want to see what’s in their basket, they have to leave the page and go to the cart.

Divi 5 can actually fix this now, natively — no plugin required. It takes about twenty minutes, a few lines of CSS and one small script. We’ll walk through the whole thing, and then be honest about where it lands and what it still can’t do.

What a mini cart is made of

Three parts, and it’s worth knowing them because each one is a separate job:

The icon and count — always visible, always current.

The panel — slides in showing items and totals.

The link between them — clicking the icon opens the panel.

Divi 5 gives you the first two. The third needs a little help.

Where Divi puts the cart by default

Before building anything, check what you already have.

If you’re using Divi’s default menu, a cart icon appears in it automatically once WooCommerce is active. Useful — except there’s no setting to style it, move it, or turn it off. It’s simply there, looking however Divi decides it looks.

Either way, what you get is a link to the cart page. Your customer still leaves the page to see what they’ve got.

Let’s fix that.

Step 1 — Build the header with a cart icon and count

Open the Theme Builder and create a custom header.

Add a Menu module, and in its settings enable:

Show Shopping Cart Icon
Show Cart Quantity

That gives you a cart icon in your menu with a live item count beside it. The count updates when someone adds to cart, without a page reload.

That’s half the job done, with no code at all.

Step 2 — Create a canvas for the cart panel

Canvases are Divi 5’s detached workspaces — content that exists outside the normal page flow, which is exactly what an off-canvas panel needs.

At the top left of the Builder, click Main Canvas, then Add Canvas. Name it minicart, select Append Below, and give it a Z index of 99999. Click Add Canvas.

Inside the new canvas, add three modules:

an Icon module — this will be your close button
Woo Cart Products — displays what’s in the cart
Woo Cart Totals — displays the totals

Both Woo modules update live when the cart changes, so you don’t have to handle that yourself.

Step 3 — Style the panel

The Section:

Design → Spacing: padding 10px all round
Content → Background: add a background colour, so it isn’t transparent
Design → Sizing: width 500px, max width 100%, max height 100%
Advanced → Visibility: Vertical Overflow → Scroll
Advanced → Position: Fixed, centre right
Advanced → Z index: 99999
Advanced → Attributes: add ID divi-minicart
Advanced → Attributes: add class visible

The Row:

Design → Sizing: width 100%

The Icon (close button):

Content → Icon: search “close” and pick one you like
Design → Icon: set colour and size
Design → Sizing → Alignment: Start

Then, still on the icon, go to Advanced → Interactions and add one:

Trigger Event: Click
Effect Action: Toggle Attribute
Target Element: the minicart Section
Attribute Name: Class
Attribute Value: visible

So clicking the close icon removes the visible class from the panel. We’ll use that class to show and hide it.

Woo Cart Products:

Under Content → Elements, disable:

Show Product Image
Show Coupon Code
Show Update Cart Button
Show Remove Item Icon

The panel is narrow, and the module is built for a full-width cart page — switching these off is what makes it fit.

Save.

Step 4 — Add the show and hide CSS

Go to Divi → Theme Options → Custom CSS and add:

Get the Code!

html:not(.et-vb-app-ancestor) #divi-minicart:not(.visible){
    transform:translate(100%,-50%)!important;
}
#divi-minicart{
    transition: all .3s ease
}

The first rule slides the panel off the right edge whenever it doesn’t have the visible class. The html:not(.et-vb-app-ancestor) part keeps it visible while you’re working in the Visual Builder, so you can still edit it.

The second rule gives it a smooth 0.3s slide rather than an abrupt jump.

Step 5 — Wire up the cart icon

Here’s the one thing Divi can’t do on its own.

Divi’s Interactions fire from the module you attach them to — so putting one on the Menu module would mean any menu item opens the cart, not just the icon. There’s no way to scope it to the icon alone.

So we use a small script instead. Go to Divi → Theme Options → Integrations and add this to the < head >:

Get the Code!

It finds the cart button in your menu, stops it navigating to the cart page, and toggles the visible class on your panel instead.

That’s it. Icon, live count, sliding panel, closing button — all in Divi 5.

What you’re accepting if you build it this way

It works, and for a lot of stores it’s enough. But it’s worth knowing exactly where it stops before you decide.

The count isn’t a bubble. Divi shows it as text beside the icon rather than in a circle, and there’s no setting to change that. It’s a cosmetic point on desktop, but it costs you real space on a phone — see below.

You’re stuck with Divi’s cart icon. No option to upload your own.

The panel is a cart page in a small box. You can hide the product image, coupon field and Update Cart button — but product name, price, quantity and subtotal are fixed columns. There’s no way to restructure them into something laid out for a narrow flyout.

The panel is read-only. The Update Cart button and the remove-item icon are both things you had to switch off to make it fit — which means a customer can look at their cart but can’t change a quantity or take something out of it. To do either, they have to go to the cart page, which is the trip a mini cart is supposed to save them.

It doesn’t open when someone adds to cart. That moment — “did that work?” — is the whole reason a mini cart exists, and this doesn’t cover it. The customer still has to click the icon to check.

There’s no overlay behind the panel. It slides over the page with nothing dimming what’s underneath, which makes it feel less like a distinct layer.

It also appears on the cart page. The canvas renders site-wide, so someone already looking at their cart can open a second copy of it on top. There’s no built-in way to suppress it where it isn’t wanted.

Mobile is where it shows. The good news is the icon and count do appear next to the hamburger, so the panel opens fine. But because the count renders as text rather than a compact circle, it takes up a lot of the space you have across a phone header. And setting max width to 100% keeps the panel on screen without changing what’s inside it — you’re looking at the cart page table in its mobile view, which was never designed for a narrow sliding panel.

And the script depends on Divi’s markup. It targets .et_pb_menu__cart-button. If Elegant Themes changes that class in a future release, your cart stops opening — silently, with no error, and you’ll most likely find out from a customer.

The faster route

If you’d rather not maintain any of that, it’s what we built Divi Mini Cart for.

It covers the gaps above: a customisable count bubble, your own cart icon, drop-down or fly-in, opening on hover or on click, opening automatically when someone adds to cart, an overlay behind the panel, and working quantity and remove controls inside it. The panel is designed for a narrow space rather than adapted from a cart page — you control image sizes, title sizes and spacing, which is what makes it sit properly on a phone. And it switches itself off on the cart page, so there’s no cart on top of a cart.

You also get proper buttons at the bottom: View Cart and Checkout, side by side or stacked, with your own text and colours on each.

Placement is handled too — the icon can sit in the main menu, a custom header, or anywhere via shortcode, with multiple carts on a page working together. On mobile you choose whether it sits inside the hamburger menu or beside it. Everything is styled through the Divi Theme Customizer rather than a stylesheet.

And nothing depends on Divi’s internal class names staying the same, because keeping up with that is our job rather than yours.

If you only want the icon and count in your menu, without the panel, Divi Menu Cart covers just that.

Pulling it together

Divi 5 has come a long way. A year ago this would have meant PHP, cart fragments and hand-written AJAX. Now it’s a canvas, an interaction, four lines of CSS and a short script.

What it still can’t do is the small stuff that makes a mini cart feel finished — the count bubble, the panel opening at the right moment, a layout built for the space it lives in.

Worth trying either way. And if you want the case for having one at all rather than the method, we’ve written about that here: Why Your WooCommerce Store Needs a Mini Cart.

Tested on Divi 5, July 2026. Divi ships updates frequently, so some of the limitations above may close over time — worth testing on your own site.

By Mariya Dimitrova

Mariya is a web designer and a co-founder of Powdi Themes and Powdi Studio. With over 10 years of experience working with WordPress and Divi, she focuses on creating beautiful, practical designs and helping others achieve the same. Mariya shares hands-on tutorials, tools, and insights to make building with Divi easier and more enjoyable.