Canvas Docs

Header Cart

The WooCommerce mini-cart icon + dropdown for a built header. Renders nothing when WooCommerce is inactive. It is shown in the block inserter as Canvas Header Cart and registered as canvas-core/header-cart.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Header Cart settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

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

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Header: App Menu, Header Button, Header Container, Header Icon Link, Header Info, Header Logo.

Was this page helpful?