---
title: "How to Add WooCommerce Mini Cart in Elementor Navigation Header Menu?"
url: https://theplusaddons.com/docs/add-woocommerce-mini-cart-in-elementor-navigation-header-menu/
date: 2023-10-28
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Shoppers check their cart constantly. A mini cart in the header shows the items and the total without sending anyone to the cart page, so browsing is never interrupted. The..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-WooCommerce-Mini-Cart-in-Elementor-Navigation-Header-Menu_-1024x536.jpg
word_count: 937
---

# How to Add WooCommerce Mini Cart in Elementor Navigation Header Menu?

## 

- Header Meta Content en The Plus Addons for Elementor añade Mini Cart en la fila Meta Content y lee directamente de la sesión de carrito de WooCommerce.
- Display Cart debe activarse para que el mini carrito se muestre, y el item también necesita su propio switch Display dentro de la pestaña Content.
- Toggle Style ofrece Style 1 como popup al pasar el cursor y Style 2 como panel off-canvas al hacer clic, con un panel de 400 px que entra desde la derecha o desde la izquierda.
- Cart Icon en Default dibuja un icono a tamaño cero, así que solo aparece la insignia de cantidad; para ver un icono visible, se necesita Custom Icon o Custom Image y un Cart Size.

Shoppers check their cart constantly. A mini cart in the header shows the items and the total without sending anyone to the cart page, so browsing is never interrupted.

The Header Meta Content widget in The Plus Addons for Elementor adds one as a **Mini Cart** item in its **Meta Content** row, reading straight from WooCommerce's own cart session.

*To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, [click here](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## Before You Start

- **Edition:** **Free** for **Toggle Style** **Style 1**. **Style 2**, the off-canvas cart, needs Pro.- **Widget to enable:** Header Meta Content, switched on under **The Plus Addons > Widgets**.- **WooCommerce** installed and activated, with at least one product, so there is a cart to show.- **Where to add it:** your header template, so the row shows on every page. The widget's own **Use with Theme Builder** section links to a **Create Header Template** button.- **Two steps, always:** adding an item in **Meta Content** is only half of it. Nothing appears until you also turn on that item's own **Display** switch in its section further down the Content tab.

## Add the Mini Cart Item

- Add the **Header Meta Content** widget to your header template.- In **Meta Content**, open the item and set **Select Options** to **Mini Cart**.

![Select Options set to Mini Cart in the Header Meta Content widget's Meta Content repeater](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-select-cart-select-icon-list.webp)

- Turn on **Display Cart** in the **Cart Options** section.

![Display Cart switched on in the Cart Options section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-cart-options-display-mini-cart.webp)

- Pick a **Toggle Style**: **Style 1** for a panel that opens on hover, **Style 2** for an off-canvas panel that opens on click.

![Toggle Style dropdown in the Cart Options section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-cart-options-cart-icon-style.webp)

- Set **Cart Icon** to **Custom Icon** or **Custom Image** and give it a **Cart Size** in **Style > Cart Icon Style**. Leaving it on **Default** draws nothing visible (see Limitations).

![Cart Icon dropdown in the Cart Options section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-cart-options-cart-icon.webp)

Display Cart toggle and mini cart settings in the Cart Options tab

## Cart Options Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Display Cart | Turns the mini cart on. Nothing renders without it | Off |
| Toggle Style | **Style 1** popup on hover, **Style 2** off-canvas on click (Pro) | Style 1 |
| Open Content Width / Height | Size of the Style 1 popup, per device | Empty |
| Open Content Direction | Which side the Style 2 panel slides in from (Pro) | Right |
| Content Width | Custom or Full Width for the Style 2 panel (Pro) | Custom |
| Cart Product Transition Duration | How long the cart rows take to animate | Empty |
| Cart Icon | Default, Custom Icon or Custom Image. The last two are Pro | Default |
| Mini Cart Offer Text | A line of text at the bottom of the cart panel | Free Shipping on All Orders Over $100 |
| Offset | Space above that text | Empty |

## How It Behaves

**Style 1** is a popup anchored under the icon. It opens when the pointer moves over the cart and closes when the pointer leaves.

![Mini cart popup open under the header cart icon, showing two products, the subtotal and the View cart and Checkout buttons](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-result-cart.webp)

**Style 2** is an off-canvas panel. Clicking the icon slides a 400 px panel in from the right (or the left, with **Open Content Direction**), dims the page behind it and shows a close button.

![Off-canvas mini cart panel slid in from the right of the page, with the cart contents, subtotal and buttons](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-result-cart-offcanvas.webp)

![Animated demo of the header mini cart opening](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-mini-cart-demo.gif)

- The cart icon links to your WooCommerce cart page, and the badge on it shows the live number of items in the cart.- The panel body is WooCommerce's own mini cart: product rows with quantity and price, the subtotal, and the **View cart** and **Checkout** buttons.- Because it reads the WooCommerce session, adding or removing a product anywhere on the site changes what this panel shows.- **Mini Cart Offer Text** has text in it from the start. If you do not want a message at the bottom of the cart, clear the field.

## Limitations

- With **Cart Icon** left on **Default** the built-in cart icon is drawn at zero size, so a visitor sees only the floating item-count badge and no cart shape. The **Cart Size** slider does not help, because it only appears once **Cart Icon** is set to **Custom Icon** or **Custom Image** — and both need Pro.- **Toggle Style** **Style 2** needs Pro. In the free plugin it draws no icon, no count and no panel, and prints the WooCommerce cart widget inline in the header instead. Stay on **Style 1** on a free site.- **Content Width** set to **Full Width** has no effect on the off-canvas cart: the panel stays at its 400 px width.- **Style 1** opens on hover only, so it is not reachable by tapping on a touch screen. Use **Style 2** if the cart must work on phones.- **Style 1** with **Mini Cart Offer Text** emptied leaves an unclosed `div` in the markup, which can push the rest of the header into the popup. Keep some text in the field, or use **Style 2**.- Without WooCommerce active there is no cart session and the item renders nothing.

## Troubleshooting

### The cart shows a number but no icon

That is the zero-size default icon. Set **Cart Icon** to **Custom Icon** or **Custom Image** and give it a **Cart Size** in **Style > Cart Icon Style**.

### Nothing shows at all

Check that a **Meta Content** item is set to **Mini Cart**, that **Display Cart** is on, and that WooCommerce is active.

### The cart panel does not open when I tap it on a phone

**Style 1** is a hover popup. Switch **Toggle Style** to **Style 2**, which opens on click.

### The header layout breaks below the cart

Check whether you emptied **Mini Cart Offer Text** while on **Style 1**. That combination leaves an unclosed element. Put text back in the field or switch to **Style 2**.

### The cart contents are stale

The panel is rendered with the page, so a page cache or a cached WooCommerce cart fragment will freeze it. Clear both and exclude the header template from caching.

## Related Docs

- [Header Meta Content Widget Settings Overview](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/)- [How to Add Search Icon to Elementor Navigation Header Menu?](https://theplusaddons.com/docs/add-search-icon-to-elementor-navigation-header-menu/)- [How to Add Elementor Menu Toggle Button in Header?](https://theplusaddons.com/docs/add-elementor-menu-toggle-button-in-header/)

## Frequently Asked Questions

**Q: What do I need before adding a WooCommerce mini cart to my Elementor header menu?**
A: The setup depends on a few basics: The Plus Addons for Elementor needs the Header Meta Content widget enabled, WooCommerce must be installed and activated, and there has to be at least one product so the cart has something to show. The header template also matters because the row needs to appear on every page. One gotcha is that adding the Mini Cart item is only half the job, since the item stays hidden until its own Display switch is turned on.

**Q: Why does the cart show a number but no icon in the header?**
A: That usually happens when Cart Icon is left on Default. In this setup, the built-in cart icon is drawn at zero size, so visitors only see the item-count badge. The fix is to switch Cart Icon to Custom Icon or Custom Image and set a Cart Size under Style > Cart Icon Style. That option path matters because the size control only appears after you move away from Default.

**Q: What’s the best toggle style for a mini cart in a mobile header?**
A: Style 2 is the better choice for phones because it opens on click, while Style 1 opens on hover only. Hover popups are fine on desktop, but they are not reachable by tapping on a touch screen. Style 2 also behaves like an off-canvas panel, sliding in from the right by default and dimming the page behind it, which makes it much more usable in mobile navigation headers.

**Q: Why does nothing show up after adding the mini cart item?**
A: The usual cause is that one of the required switches is still off. The Meta Content item has to be set to Mini Cart, Display Cart must be turned on, and WooCommerce has to be active. If any of those pieces are missing, there is no live cart session for The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH to read from, so the header item renders nothing.

**Q: Can I use the off-canvas mini cart without Pro?**
A: Style 2 needs Pro. In the free plugin, it does not behave as an off-canvas cart with an icon and panel in the header; it prints the WooCommerce cart widget inline instead. If you want a free setup, stay on Style 1. That distinction matters because Style 1 gives you a hover popup under the icon, while Style 2 is tied to Pro features like click-open behavior and panel direction.

**Q: Why does my header layout break below the mini cart?**
A: That usually comes from emptying Mini Cart Offer Text while using Style 1. The page notes that this combination leaves an unclosed element in the markup, which can push part of the header into the popup area. Putting text back into Mini Cart Offer Text fixes that structure issue, and switching to Style 2 avoids it entirely because that layout does not rely on the same hover popup behavior.