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, 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.
Requirement: This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated before you begin.
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 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.
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.
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.
Also, read how to add Elementor menu toggle button in header.
