WooCommerce module

Mini Cart block

A cart icon with item count and total that opens a cart drawer or links to the cart — ideal for headers.

Overview

The Mini Cart is a cart button for your header or navigation. It shows the number of items (and optionally the total) and opens a slide-in drawer with the cart contents, or simply links to the cart page. The count updates live when products are added.

At a glance

Block name: wpbb/mini-cart
Module: WooCommerce
Find it by searching: Mini Cart
Requires: WooCommerce installed and active
Works with: WooCommerce must be installed and active. The WooCommerce module only appears when it is.
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Site header cart icon.
Sticky mobile headers.

Example scenarios

Header: drawer, open when a product is added, count on, hide when empty.

How to add the Mini Cart block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Mini Cart in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Mini Cart in the results. The block appears with a cart icon with a count.
Configure the content. Place it in your header (Appearance → Editor → Header template part), then use the Settings tab.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Settings panel: Mini Cart

On click

What it does: What clicking the cart does.
What to enter or choose: One of: Open cart drawer, Go to the cart page.
Default: Open cart drawer
How to use it: Open the dropdown and pick an option.
When to use it: Drawer keeps shoppers on the page.
Example: Open cart drawer.
Result: Without JavaScript, the button always links to the cart.

Open the drawer when a product is addedShown when On click is Open cart drawer

What it does: Opens the drawer automatically after an AJAX add to cart.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: To confirm additions visibly.
Example: On.
Result: The drawer slides in after adding.

Drawer titleShown when On click is Open cart drawer

What it does: The heading of the drawer.
What to enter or choose: Text, or empty for “Your cart”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Your bag”.
Result: The drawer heading.

Item count

What it does: Shows the number of items in a bubble.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually.
Example: On.
Result: A count bubble on the icon.

Hide the count when the cart is emptyShown when Item count is on

What it does: Hides “0”.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For a cleaner header.
Example: On.
Result: The bubble appears only with items.

Cart total

What it does: Shows the cart total next to the icon.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On for a desktop header.
Result: The total appears.

Label

What it does: Optional text next to the icon.
What to enter or choose: Short text, e.g. “Cart”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Cart”.
Result: Shown beside the icon.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Mini Cart offers.

Element: Cart button selected first

The cart button. Hover and Focus.

Styles-tab controls for “Cart button”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Block

The wrapper.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Count bubble

The count bubble.

Styles-tab controls for “Count bubble”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal

States: Normal only.

Element: Drawer

The drawer panel.

Styles-tab controls for “Drawer”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

Uses WooCommerce’s cart fragments to stay up to date. The drawer contains WooCommerce’s standard mini-cart (items, subtotal, View cart and Checkout buttons).

Accessibility

The drawer is a modal dialog: focus moves inside, stays inside, Esc or the backdrop closes it, and focus returns to the cart button.