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

Updated on January 24, 2024 by Ananda
Table Of Content

Are you looking to add a mini cart to the Elementor navigation header menu in your WooCommerce store? Adding a mini cart option to the header can improve the shopping experience on your WooCommerce website as users can quickly check the products they have added to the cart, cart total and even go to the checkout page directly.

With the Header Meta Content widget from The Plus Addons for Elementor, you can easily add a WooCommerce mini cart to the navigation header menu.

To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, click here.

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

To do this, make sure you’ve 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 or you can use Elementor Pro if you are already using it. 

1. In the Meta Content tab, you’ll find an item click to open it, then select Mini Cart from the Select Options dropdown.

Header meta content mini cart

Then, do the necessary icon spacing adjustments from the Icon Left Space and Icon Right Space sections.

From the Responsive Device section, you can 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.

Header meta content cart options settings

From the Toggle Style dropdown, you can select the toggle style. Here you’ll find two options –

Style 1 – For creating a popup mini cart.

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

For each style, you’ll find different settings to set width and height.

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

Then from the Cart Icon section, you can set a custom icon or image for the cart icon.

In the Mini Cart Offer Text field, you can add a text message in the cart and from the Offset field, you can add a spacing above it.

Now you’ll see a mini cart option in the front end.

Header meta content mini cart demo
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website