Mini-Cart

The mini-cart tags create behavior elements only. Your template owns the text, classes, layout, and CSS.

Smallest Mini-Cart Drawer#

{{ cart }}  {{ cart:trigger class="header-cart" aria-label="Open cart" }}    Cart {{ count }}  {{ /cart:trigger }}  {{ cart:overlay class="cart-backdrop" }}    {{ cart:panel class="cart-drawer" }}      <header>        <h2>Your cart</h2>        {{ cart:close class="cart-drawer__close" }}Close{{ /cart:close }}      </header>      {{ cart:items }}        <article class="cart-line">          <a href="{{ url }}">{{ title }}</a>          <span>{{ quantity }}</span>          <span>{{ line_total }}</span>        </article>      {{ else }}        <p>Your cart is empty.</p>      {{ /cart:items }}      <footer>        <strong>{{ total }}</strong>        <a href="{{ checkout_url }}">Checkout</a>      </footer>    {{ /cart:panel }}  {{ /cart:overlay }}{{ /cart }}

Read it like this:

• {{ cart }} starts a cart context.
• {{ cart:trigger }} renders the button that opens the drawer.
• {{ cart:overlay }} renders the backdrop.
• {{ cart:panel }} wraps the drawer content.
• {{ cart:close }} renders a close button.
• {{ cart:items }} loops over the WooCommerce cart lines.

Cart Values#

Inside {{ cart }}, these value tags are available:

{{ subtotal }} and {{ total }} can contain WooCommerce HTML. TemplateX renders those as safe WordPress HTML.

Cart Item Values#

Inside {{ cart:items }}, these value tags are available:

Example with an image:

{{ cart:items }}  <article class="cart-line">    <img src="{{ thumbnail_url }}" alt="">    <a href="{{ url }}">{{ title }}</a>    <span>{{ quantity }}</span>    <strong>{{ line_total }}</strong>  </article>{{ /cart:items }}

TemplateX does not load WooCommerce's classic layout stylesheet, so WooCommerce's global .woocommerce img sizing reset does not override authored image classes such as h-20 w-20 object-cover.

Open On Hover#

Open the drawer on hover as well as click by adding open_on="hover" to the trigger:

{{ cart:trigger open_on="hover" class="header-cart" aria-label="Open cart" }}  Cart {{ count }}{{ /cart:trigger }}

The shorthand hover also works:

{{ cart:trigger hover class="header-cart" aria-label="Open cart" }}  Cart {{ count }}{{ /cart:trigger }}

Contextual Shortcuts#

Inside {{ cart }}, you may omit the cart: prefix for cart parts:

{{ cart }}  {{ trigger }}Cart {{ count }}{{ /trigger }}  {{ items }}    <a href="{{ url }}">{{ title }}</a>  {{ /items }}{{ /cart }}

The full names are clearer for beginners, so the docs use {{ cart:items }}, {{ cart:trigger }}, and the other explicit tags first.

Runtime Behavior#

With JavaScript enabled:

• Add-to-cart actions refresh cart count, cart item content, and cart values such as {{ subtotal }} and {{ total }}.
• Add-to-cart actions with open_cart open the first available cart drawer and keep it open while refreshed items render.
• Cart update, remove, and coupon forms refresh cart count, cart item content, and cart values in place.
• TemplateX client-side navigation refreshes cart count, cart item content, and cart values after the new page body renders.
• Cart drawers can be opened by click, optionally opened by hover, closed with close buttons, closed by clicking outside the active overlay, and closed with Escape.

Without JavaScript, the drawer does not provide client-side open and close behavior. Cart links and forms still fall back to normal WooCommerce page loads where those forms are used.

Accessibility#

• Add aria-label when the visible trigger text is only an icon or number.
• Keep a visible heading inside drawers or modals.
• Keep the hidden attribute respected in CSS for overlays.
• Use {{ cart:close }} for an explicit close control.