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.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
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.
- Turn on Display Cart in the Cart Options section.
- Pick a Toggle Style: Style 1 for a panel that opens on hover, Style 2 for an off-canvas panel that opens on click.
- 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 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.
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.
- 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
divin 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.
