The Header Mini Cart

The mini-cart is the small cart icon in the header: a count badge on the trigger, and a dropdown under it showing the cart's contents with a route to checkout. In Canvas it is a block, Canvas Header Cart, placed inside a built header like any other header part, and it updates itself as the visitor shops, without a page reload, including after an add to cart. Read this page when you are adding the cart to a header or changing how it presents.

How To Add It

Starting screenthe block editor, on the header you are building under Headers.

Insert Canvas Header Cart from the Canvas Header category into the header zone where the icon should sit, usually beside the search and account icons. The block renders the trigger and its dropdown, so placing it is the whole job. With WooCommerce inactive the block renders nothing on the front end, which means a header built ahead of the store activates itself the day the store arrives.

The settings that shape it sit in the block's sidebar:

Cart Icon and Show Item Count set the trigger: the icon drawn, and whether the badge with the item count appears on it.
Cart Body decides where the contents live. The default is the dropdown under the icon; the icon-only choice is for designs where the cart contents render in a side panel instead, leaving the trigger to open it.
Empty Cart Text and Show Action When Empty shape the empty state, from a plain message to a storefront-style action row with a shop button.
The class fields, on the trigger, the wrapper, the title and the items container, are the styling hooks, and their defaults match the theme header.

How It Stays Current

The count badge and the dropdown contents refresh through WooCommerce's cart fragments, so adding a product from a shop grid or a product page updates the header cart in place. No setting controls this; it is how the block works.

Pitfalls

The cart does not appear on phones. The block's Wrapper Classes default hides it on the smallest screens, matching the theme header, where mobile designs surface the cart elsewhere. Clear or change the visibility classes in Wrapper Classes to show it everywhere.

The cart renders nothing at all. WooCommerce must be active. The block stays available in the inserter regardless, so a header can be prepared in advance, but it emits nothing until the store exists.

The dropdown shows while a side panel also holds the cart. Set Cart Body to the icon-only choice, which suppresses the dropdown and leaves the trigger for the panel to answer.

Every Setting

The list below is generated from the product, so it is current by construction:

Settings

Cart IconDefaultEmpty

Icon font class for the cart trigger. Leave empty to follow Theme Options - Shop - Mini Cart.
Show Item CountDefaultOn

Show the cart item-count badge on the trigger.
Cart BodyDefaultEmpty

Choose Icon only when the cart contents are rendered by a side panel rather than a dropdown.

ChoicesDropdown under the icon (default) (empty)Icon only - body lives elsewhere
Trigger ClassesDefaultEmpty

Classes on the cart trigger link, e.g. position-relative when the design places the count badge over the icon.
Trigger Screen Reader LabelDefaultEmpty

The name a screen reader announces for the icon-only cart link.
Wrapper Base ClassDefaultheader-misc-icon

The theme's header-misc hook class on #top-cart. Clear it for a design that styles #top-cart directly.
Wrapper ClassesDefaultd-none d-sm-block

Utility classes on the #top-cart wrapper (visibility / spacing). Default matches the theme header.
Dropdown ClassesDefaultEmpty

Classes on the .top-cart-content dropdown panel itself, for a design that gives the panel its own border or corners.
Cart Title ClassesDefaultEmpty

Classes on the heading at the top of the cart dropdown, for a lighter weight or a different size than the theme gives it.
Items Container ClassesDefaultEmpty

Classes on the box holding the cart lines, usually spacing utilities that set how much room the list has.

Content

Cart TitleDefaultEmpty

Heading at the top of the cart dropdown. Leave empty to follow Theme Options - Shop - Mini Cart.
Empty Cart TextDefaultEmpty

Message shown in place of the cart lines when a shopper has not added anything yet. Leave empty to follow Theme Options - Shop - Mini Cart.
Empty Text ClassesDefaultEmpty

When set, the empty message is a direct in the items container (no .top-cart-item wrapper).
Empty Text ElementDefaultEmpty

How the empty message is written: inside a cart-line box, as a paragraph of its own, or as bare text in the items container for a design that styles the container directly.

ChoicesCart line box (default) (empty)ParagraphText onlyno element
Show Action When EmptyDefaultOff

Always show the action row: a shop button plus a static price, even when the cart is empty (static storefront style).
Cart Button TextDefaultEmpty

Wording on the action-row button once the cart holds something. It always opens the store cart page.
Action Button ClassesDefaultEmpty

Classes that style the action-row button, in both cart states. Leave empty for the theme small 3D button.
Action Button StyleDefaultEmpty

Style declarations on the action-row button, for a design that sets one of the button's own custom properties rather than reaching for another class.
Total ClassesDefaultEmpty

Class names on the cart total beside the action button.
Shop Button TextDefaultEmpty

Wording on the action-row button while the cart is empty.

Shown when Show Action When Empty is on
Shop Button URLDefaultEmpty

Where that button sends a shopper while the cart is empty. Leave empty to use the store cart page.

Shown when Show Action When Empty is on
Show Price Slot When EmptyDefaultOn

Keep the price slot beside the shop button while the cart is empty. Turn it off for a design whose empty cart offers the button alone.

Shown when Show Action When Empty is on
Empty Price TextDefaultEmpty

Total shown beside the button while the cart is empty, so the row does not read as broken.

Shown when Show Action When Empty is on