Create a normal page template for the WooCommerce cart page, then place cart tags inside it.
Smallest Cart Page#
<main class="cart-page"> {{ notices }} {{ cart }} {{ 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 }} <p>Total: {{ total }}</p> <a href="{{ checkout_url }}">Checkout</a> {{ /cart }}</main>Read it like this:
{{ cart }}starts a cart context.{{ cart:items }}loops over WooCommerce cart lines.{{ else }}handles an empty cart.{{ total }}and{{ checkout_url }}are cart values.{{ title }},{{ quantity }}, and{{ line_total }}are cart item values because they are inside{{ cart:items }}.
Cart Values#
Inside {{ cart }}, these value tags are available:
| Value | Prints |
|---|---|
count or item_count | Number of items in the cart. |
cart_url | WooCommerce cart page URL. |
checkout_url | WooCommerce checkout page URL. |
subtotal | WooCommerce formatted cart subtotal. |
total | WooCommerce formatted cart total. |
Example:
{{ cart }} <p>Items: {{ count }}</p> <p>Subtotal: {{ subtotal }}</p> <p>Total: {{ total }}</p> <a href="{{ checkout_url }}">Checkout</a>{{ /cart }}Cart Item Values#
Inside {{ cart:items }}, these value tags are available:
| Value | Prints |
|---|---|
key | WooCommerce cart item key. |
product_id | Product ID. |
title | Product name. |
url or permalink | Product URL. Variation cart items include variation_id and selected attribute_* query parameters. |
quantity | Cart quantity. |
price | Formatted unit price. |
line_total | Formatted line total. |
line_subtotal | Formatted line subtotal. |
product_image, featured_image, featured, or image_url | Image URL. |
thumbnail_url | Thumbnail URL. |
thumbnail or image | WooCommerce image HTML. |
remove_url | WooCommerce remove URL. |
Example:
{{ cart:items }} <article class="cart-line"> <img src="{{ thumbnail_url }}" alt=""> <a href="{{ url }}">{{ title }}</a> <span>{{ price }}</span> <span>{{ quantity }}</span> <strong>{{ line_total }}</strong> </article>{{ /cart:items }}{{ subtotal }}, {{ total }}, {{ price }}, {{ line_total }}, {{ image }}, and {{ thumbnail }} can contain WooCommerce HTML. TemplateX renders those as safe WordPress HTML.
Update Quantities#
Use {{ cart:update }} inside {{ cart:items }}:
{{ cart }} {{ cart:items }} <article> <a href="{{ url }}">{{ title }}</a> {{ cart:update class="cart-quantity" }} <input name="quantity" type="number" min="0" value="{{ quantity }}"> <button type="submit">Update</button> {{ /cart:update }} <strong>{{ line_total }}</strong> </article> {{ /cart:items }}{{ /cart }}Setting quantity to 0 removes the line through WooCommerce's normal cart logic.
{{ cart:update }} renders a form. Do not put it inside another form.
Remove Items#
Use {{ cart:remove }} inside {{ cart:items }}:
{{ cart }} {{ cart:items }} <article> <a href="{{ url }}">{{ title }}</a> {{ cart:remove class="cart-remove" }} <button type="submit" aria-label="Remove {{ title }}">Remove</button> {{ /cart:remove }} </article> {{ /cart:items }}{{ /cart }}{{ cart:remove }} renders a form with the current cart item key.
Coupons#
Use {{ coupon }} wherever a coupon form belongs:
{{ coupon class="coupon-form" }} <label> Coupon code <input name="coupon_code" autocomplete="off"> </label> <button type="submit">Apply</button>{{ /coupon }}{{ coupon }} renders a form. Do not place it inside another form or inside {{ checkout:form }}.
Runtime Behavior#
With JavaScript enabled, cart update, remove, and coupon forms refresh cart count, cart item content, and cart values in place. They also dispatch a bubbling cart:updated event.
Without JavaScript, update, remove, and coupon forms post normally and WooCommerce updates the cart on the next page load.
For header drawers and overlays, see Mini-Cart.