WooCommerce Mini Cart

How to use WooCommerce Mini Cart Widget of Sky Addons for Elementor

The Sky Addons WooCommerce Mini Cart widget adds a cart button to your site — usually in the header — with a live count of how many items are in the cart. Clicking it slides open a cart drawer over the page, where shoppers can see what they have added, change quantities, remove items, and head to checkout, all without ever leaving the page they were reading. It also includes a free-shipping progress bar that shows how much more a shopper needs to spend to qualify. This documentation explains every setting in plain language.

Features:

Live Item Count: The number on the cart button updates the moment something is added or removed, with a small bounce so shoppers notice.
Slide-Out Cart Drawer: A panel slides in from the left or right showing every item — photo, name, options, and price.
Quantity Stepper: Plus and minus buttons on every row let shoppers change amounts inside the drawer. No trip to the cart page needed.
Free Shipping Progress Bar: A live bar showing how close a shopper is to free shipping, with your own wording for both states.
Checkout Always Reachable: The drawer’s heading and its Subtotal and Checkout footer stay fixed in place while only the product list scrolls — so Checkout never scrolls out of reach, however full the cart is.
Sale Prices Shown: Discounted items show the sale price with the original crossed out.
Friendly Empty State: When the cart is empty, shoppers see a clear message and a button back to your shop instead of a dead end.
Floating Button Mode: Pin the cart as a round floating button in any corner of the screen, so it follows the shopper down the page.
Hide When Empty: Optionally hide the whole widget until there is something in the cart.

Insert WooCommerce Mini Cart Widget

WooCommerce must be installed and active — the widget only appears in Elementor when it is.

Open the page or template you want to edit and click Edit with Elementor. For a site-wide cart button, edit your header template in the Sky Addons Theme Builder instead of a single page.
Search for WooCommerce Mini Cart in the widget panel.
Drag it where you want the cart button to sit — the right-hand side of a header is the most familiar spot for shoppers.

Configure the Cart Button

Open the Cart section in the Content tab. These settings control the button shoppers click, not the drawer.

Icon: Leave this empty to use the built-in shopping bag icon, which is designed to match the drawer. Choose any icon here to use your own instead.
Count Badge: The small number showing how many items are in the cart. It hides itself automatically when the cart is empty. Keep this on — it is the main reason shoppers look at a cart button.
Subtotal: Shows the cart total next to the icon.
Label and Label Text: Adds a word such as “Cart” beside the icon. Helpful for older or less confident shoppers who may not recognise an icon on its own.
Floating Button: Turns the widget into a round button pinned to a corner of the screen, which stays put as the shopper scrolls.
Floating Position: Which corner the floating button sits in — bottom right, bottom left, top right, or top left. Bottom right is the most common and the easiest to reach on a phone.
Hide When Empty: Hides the entire widget until the shopper adds something. Good for a floating button, less good in a header where a missing cart looks like something is broken.

Note: In floating mode the Label and Subtotal are hidden automatically, because a round button has no room for them.

Configure the Cart Drawer

Open the Drawer section. This controls the panel that slides open.

Drawer Title: The heading at the top, such as “Your Cart”. The item count is added after it automatically, so shoppers see “Your Cart (3)”.
Slide From: Whether the drawer comes in from the right or the left. Right is the usual choice, and matches where most cart buttons sit.
Drawer Width: How wide the panel is on desktop. Around 380–420 pixels fits a product photo, name, price, and quantity buttons comfortably. On phones the drawer automatically uses most of the screen instead.
Quantity Stepper: Shows the minus, number, and plus buttons on each row so shoppers can change amounts in the drawer. Leave it on unless you sell items that are strictly one-per-order.
Empty Cart → Message: The wording shown when there is nothing in the cart, such as “Your cart is empty”.
Empty Cart → Button Text: The wording on the button that sends shoppers back to browsing, such as “Continue Shopping”. Clear this field to hide the button entirely.
Empty Cart → Button Link: Where that button goes. Leave it blank and it points at your WooCommerce shop page. Set it to a specific category if you would rather send shoppers somewhere more targeted.

How the quantity stepper behaves: pressing plus or minus updates the cart straight away — the item price, the Subtotal, the count on the button, and the free-shipping bar all refresh together. Pressing minus at a quantity of one removes the item. If a product has limited stock, the plus button stops at the amount actually available and greys out, so a shopper can never order more than you have.

Configure the Free Shipping Bar

Open the Free Shipping Bar section. This is a progress bar that encourages shoppers to add a little more to their order.

Enable: Turns the bar on or off.
Free Shipping Amount: The order total needed to qualify, in your store currency. Type the same figure you have set in your WooCommerce shipping settings — the widget does not read it automatically, because stores often have different thresholds for different regions.
Remaining Text: The message shown while the shopper is still short. Include %s where the amount should appear, for example “Add %s more for free shipping”.
Unlocked Text: The message once they qualify, for example “You have unlocked free shipping!”. The bar also turns green at this point.

Important: the bar measures the cart total after any discounts and excluding shipping. Set your Free Shipping Amount to match how your store actually calculates the threshold, or the bar will fill at a slightly different point from your real shipping rule.

Style Your WooCommerce Mini Cart

Switch to the Style tab. There are two sections: one for the button and one for the drawer.

Toggle — the cart button:

Accent Color: The single most useful setting here. It colours the count badge, the free-shipping bar, the quantity buttons, and the Checkout button all at once. Set this to your brand colour and most of the widget is styled in one move.
Icon Size and Icon Color: The size and colour of the cart icon.
Badge Background and Badge Text: Colours for the count badge, if you want it different from the accent colour.
Typography: Fonts for the Label and Subtotal text.

Drawer — the sliding panel:

Background: The drawer’s background colour.
Title Color: The colour of the drawer heading.
Product Image Size: How large each product thumbnail is. Increase it a little if you widen the drawer.
Product Title Color, Product Meta Color, and Product Price Color: Colours for the product name, its options (such as size or colour), and its price.
Total Color: The colour of the Subtotal line.
Free Shipping Bar → Track Color and Fill Color: The empty part of the bar and the filled part.
Checkout Button → Background and Text Color: Colours for the main Checkout button.

Save and Preview

Click Update to save your page or template.
Open your live site and add a product to your cart. The count on the button should change immediately.
Click the cart button to open the drawer. Try the plus and minus buttons and confirm the Subtotal updates.
Remove everything and confirm the empty message and its button appear.
Check the drawer on a phone-sized screen as well.

Best Practices

Put the cart in your header template, not on individual pages. Shoppers expect it in the same place on every page.
Set the Accent Color first. One setting styles the badge, the progress bar, the quantity buttons, and Checkout together.
Leave the Quantity Stepper on. Letting shoppers fix a quantity in the drawer saves them a trip to the cart page, and that is where a lot of orders get abandoned.
Add the Label if your audience is not especially tech-confident. The word “Cart” next to the icon removes all doubt.
Set a free-shipping amount you actually offer. A bar that promises free shipping the shopper does not get at checkout costs you trust.
Avoid Hide When Empty in a header. A cart that vanishes looks like a bug to most visitors.

Troubleshooting

The widget is missing from Elementor. WooCommerce must be installed and active, and the widget must be enabled in Sky Addons → Widgets.
The count does not update when something is added. WooCommerce’s own cart script has to be running. Some optimisation plugins remove it — check any “disable cart fragments” or “remove unused scripts” option and allow it through.
The drawer still shows an old design after updating the plugin. Your browser keeps a saved copy of the cart contents. Reload the page once, or add or remove any item, and it refreshes.
The drawer opens behind my sticky header. Lower the header’s Z-Index in its Advanced settings, or raise the section containing the cart above it.
The plus button will not go any higher. That product has limited stock and the shopper has reached the maximum you have available.
The free-shipping bar shows the wrong amount remaining. Check the Free Shipping Amount matches your WooCommerce shipping rule. Remember the bar measures the total after discounts and without shipping.
The drawer is empty in the Elementor editor. That is correct — your cart really is empty while editing. Add a product on the live site to see it populated.
A style change does not appear on the live page. Clear your caching plugin and your CDN.

Frequently Asked Questions

Does the WooCommerce Mini Cart widget require WooCommerce?

Yes. It reads the real WooCommerce cart, so WooCommerce must be installed and active. Without it the widget does not appear in Elementor at all.

Does the count update without reloading the page?

Yes. The count, the subtotal, the drawer contents, and the free-shipping bar all refresh in the background whenever the cart changes — including when a product is added from somewhere else on the page.

Can shoppers change quantities from the drawer?

Yes. Every row has minus and plus buttons. Changes save immediately, and pressing minus at a quantity of one removes the item. Shoppers can also remove any row with its bin icon.

Can I use it in my theme header or the Theme Builder?

Yes, and that is the recommended way to use it. Add it to a header template in the Sky Addons Theme Builder so the same cart button appears on every page.

How does the free shipping progress bar calculate the amount?

It compares your cart total — after discounts, excluding shipping — against the Free Shipping Amount you enter. You type that figure yourself rather than the widget guessing it, because stores often set different thresholds for different countries and an automatic guess would be wrong as often as it was right.

Will Checkout scroll out of view if the cart is full?

No. The heading at the top and the Subtotal and Checkout footer at the bottom stay fixed in place, and only the product list in between scrolls. Checkout is always one tap away.

Can I use more than one WooCommerce Mini Cart on a page?

Yes — for example a header cart plus a floating button. Each keeps its own settings, and both stay in sync with the same WooCommerce cart.

Conclusion

The WooCommerce Mini Cart widget keeps shoppers on the page they are reading while still giving them full control of their basket — check the contents, adjust quantities, see how close they are to free shipping, and check out, all from one sliding drawer. Set your accent colour, add it to your header template, and it is ready. If you have any questions or need help, visit the Sky Addons support center.

Sky Addons for Elementor