BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Guide

Woo Mini Cart Pro

How to set up and style the Woo Mini Cart widget in Elementor.

Woo Mini Cart adds a cart button with a live item count and an optional subtotal. A click opens a side cart or a dropdown with the cart items, the subtotal and buttons to the cart and the checkout. Use it in a header template so shoppers can check their cart from every page.

Part of: Bright Addons Pro. Before you start: WooCommerce must be installed and active.

Set it up

  1. Drag Woo Mini Cart into your header template.

  2. In Cart Button, choose the Icon, add a Label if you want text, and switch Item Count and Subtotal on or off.

  3. Set Count Position to a bubble on the icon or next to it, and set the Alignment.

  4. In Cart Window, choose what Clicking Opens: Side Cart (slides in), Dropdown or The Cart Page.

  5. Set the Side of the side cart, or the direction of the dropdown.

  6. Edit the Title, Cart Button Text, Checkout Button Text and Empty Cart Message.

  7. In the Style tab, set the colors of the button, the count, the window, the items and the two buttons.

Content options

Cart Button

Option What it does
Icon The icon of the cart button.
Label Optional text next to the icon.
Item Count Shows the number of items in the cart.
Count Position Bubble on the Icon or Next to the Icon.
Hide the Count When the Cart Is Empty Hides the count while the cart holds nothing.
Subtotal Shows the cart subtotal on the button.
Alignment Aligns the button Left, Center or Right.

Cart Window

Option What it does
Clicking Opens Side Cart (slides in), Dropdown or The Cart Page.
Side The side cart slides in from the Right or the Left.
Dropdown Opens Toward Direction of the dropdown, depending on where the button sits on the page.
Also Open on Hover Opens the dropdown when the mouse moves over the button.
Open After a Product Is Added Opens the cart window when a product is added to the cart.
Title Heading of the cart window.
Product Images Shows or hides the item thumbnails.
Subtotal Label Text in front of the subtotal.
Cart Button Text Wording of the cart page button. Leave empty to hide it.
Checkout Button Text Wording of the checkout button. Leave empty to hide it.
Empty Cart Message Text shown when the cart is empty.
Empty Cart Button Text Button to the shop page in an empty cart. Leave empty to hide it.
Bright Addons Pro

Unlock this and 79 more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Cart Button

    typography, icon size, colors, background, border, border radius and padding for normal and hover.

  • Item Count

    typography, Text Color, Background, Bubble Size and the position of the bubble.

  • Cart Window

    Width, Background, Page Shade, Padding, Border Radius, shadow, title typography and color, close button colors and Lines Color.

  • Cart Items

    Image Size, Image Radius, product name, quantity and price text, remove button colors and the empty cart message.

  • Subtotal

    typography, Label Color and Amount Color.

  • Cart Page Button

    the full button styling for normal and hover.

  • Checkout Button

    the full button styling for normal and hover.

Tips

  • On the cart and checkout pages the button always links to the cart, as the WooCommerce mini cart does.

  • The count stays right on cached pages, because WooCommerce refreshes the cart parts after the page loads.

  • If a page has two mini carts (desktop and mobile header), only one opens after a product is added.

  • Quantities cannot be changed in the cart window. Items can be removed there, and the cart page handles the rest.

Questions and answers

Does the count update without a page reload?

Yes. The count, the subtotal and the item list refresh whenever the cart changes.

Can the cart open automatically when someone adds a product?

Yes. Open After a Product Is Added is on by default for the side cart and the dropdown. It reacts when a product is added without a page reload.

Can I make the icon simply link to the cart page?

Yes. Set Clicking Opens to The Cart Page. The button then works as a plain link with the count and subtotal.

Does hover opening work on phones?

No. Also Open on Hover only applies on devices with a mouse. On touch screens a tap opens the dropdown.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides