---
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-06-13
lang: en
author: "Aditya Sharma"
description: "Are you looking to add a mini cart to the Elementor navigation header menu in your WooCommerce store? Adding a mini cart to the header lets users check the products..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-WooCommerce-Mini-Cart-in-Elementor-Navigation-Header-Menu_-1024x536.jpg
word_count: 459
---

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

## 

- Adds WooCommerce mini cart to Elementor navigation header menu using the Header Meta Content widget from The Plus Addons for Elementor.
- Enables Display Cart toggle in the Cart Options tab to customize mini cart styles, including popup and off-canvas options.
- Adjusts icon spacing and transition duration for mini cart items to enhance user experience on WooCommerce sites.

Are you looking to add a mini cart to the Elementor navigation header menu in your WooCommerce store? Adding a mini cart to the header lets users check the products they have added to the cart, view the cart total, and go to the checkout page without leaving the current page.

With the Header Meta Content widget in [The Plus Addons for Elementor](https://theplusaddons.com/), you can add a WooCommerce mini cart to the navigation header menu in the Elementor editor.

**Best Used For:**

- WooCommerce stores that want a persistent cart icon in the header so shoppers can review their cart at any point during browsing- Fashion, electronics, or multi-product stores where reducing checkout friction improves conversion rates- Stores using a sticky header where the mini cart icon stays visible as visitors scroll through long product pages

*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 is installed and activated before you begin.

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

To do this, make sure you have added some products to your WooCommerce store.

Then add the Header Meta Content widget to the header template and follow the steps.

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* 

1. In the **Meta Content** tab, you will see a default item. Click it to open the settings, then select **Mini Cart** from the **Select Options** dropdown.

![header meta content mini cart](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-mini-cart.png)

Then make icon spacing adjustments from the **Icon Left Space** and **Icon Right Space** sections.

From the **Responsive Device** section, manage the visibility of the item for different devices if needed.

2. Then go to the **Cart Options** tab and enable the **Display Cart** toggle.

Suggested reading, [5 best WooCommerce product search plugins](https://theplusaddons.com/blog/best-woocommerce-product-search-plugins/).

From the **Toggle Style** dropdown, select the toggle style. You will find two options.

**Style 1** – For creating a popup mini cart.

**Style 2** – For creating an off-canvas mini cart.

For each style, you will find different settings to control width and height.

From the **Cart Product Transition Duration** field, set the transition duration of the mini cart items.

From the **Cart Icon** section, set a custom icon or image for the cart icon.

In the **Mini Cart Offer Text** field, add a text message in the cart. Use the **Offset** field to add spacing above it.

You will now see the mini cart in the header on the front end. To also add a product wishlist icon to your WooCommerce store in the Elementor editor, see [How to Add WooCommerce Product Wishlist in Elementor](https://theplusaddons.com/docs/add-woocommerce-product-wishlist-in-elementor/).

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

Also, read [how to add Elementor menu toggle button in header](https://theplusaddons.com/docs/add-elementor-menu-toggle-button-in-header/).