Cart elements
The building blocks of your Cart page. Each one renders WooCommerce's own cart markup, so quantity updates, coupons and shipping estimates keep working exactly as WooCommerce intends.
- Builder with the Cart page selected
- Elements panel with the WooCommerce elements
- Page settings: Cart page behavior and Layout mode
At a glance
| Element | Required | Use | Shows when |
|---|---|---|---|
| Cart Notices | — | Once | Always |
| Cart Heading | — | Once | Cart has items |
| Cart Items | Yes | Once | Cart has items |
| Coupon (Cart) | — | Once | Cart has items, coupons enabled, and Cart Items' coupon field off |
| Cart Totals | Yes | Once | Cart has items |
| Proceed to Checkout | — | Once | Cart has items |
| Continue Shopping | — | Once | Cart has items |
| Empty Cart | Yes | Once | Cart is empty |
Required elements show a Required badge in the editor. They can be moved but not removed, and they must be visible on every device. The content elements (Heading, Text, Button, Image, Divider, Spacer) are available on the Cart page too.
Cart Notices
Messages such as "Cart updated", coupon results and errors. WooCommerce's notice area is always output, even when empty, so messages can appear without a page reload. It has no settings of its own.
Cart Heading
A title with the live number of items, for example "Your cart (3 items)".
Empty hides the heading.
Adds "(N items)".
H1–H4, on the Typography tab. In the editor the count shows a sample "(3 items)".
Cart Items
The product table: image, name, price, quantity, remove link and item subtotal, plus the Update Cart button.
With Image size: Small, Medium (default) or Large.
Shows the SKU under the product name.
"Stepper (+/- buttons)" or "Plain number input".
Turn each column on or off.
No need to press "Update cart". The button stays as a fallback.
With Coupon field label (default "Have a coupon?") and Coupon: show as a dropdown (default on: shoppers click "Have a coupon?" to open it).
Square, Rounded, Pill or Custom (corner radius 0–40 px, default 14).
Dashed, Solid, Dotted or None.
Square, Rounded, Pill or Custom (corner radius default 10 px).
Coupon (Cart)
Listed as Coupon in the element picker. A separate coupon form you can place anywhere. It shows on the store only when the cart has items, the coupon field in Cart Items is turned off, and coupons are enabled in WooCommerce. Applying a coupon reloads the Cart with the result.
Defaults: "Have a coupon?", "Coupon code", "Apply coupon".
Shoppers click the label to open the form.
The same options as the Cart Items coupon.
Cart Totals
Subtotal, discounts, shipping, tax, total and the Proceed to Checkout button, from WooCommerce's own totals.
A "Calculate shipping" form inside the totals. A separate Shipping Calculator element on the page (Pro) takes its place.
When a visible Proceed to Checkout element is on the page, WooCommerce's own button is removed, so there is never a duplicate.
Proceed to Checkout
A checkout button you can place anywhere, for example under the totals in a sticky column.
Empty hides the button.
Off reveals Button width and Button alignment.
Icon (default: an arrow on the right), icon position, Filled or Outline, colours and shape. See Button styles.
Continue Shopping
A link back to the shop page. Label: default "Continue shopping".
Empty Cart
Shown instead of the other cart elements when the cart is empty. In the editor it is always visible, labelled "Shown only when the cart is empty."
"Your cart is currently empty."
Default "Browse Products". Leave the URL blank to link to the shop page.
Preview sample data
The editor previews the Cart with a sample cart, never your real one: "Sample T-shirt" (24.00 × 2, SKU TS-01) and "Sample cap" (15.00 × 1), subtotal 63.00, flat-rate shipping 5.00, tax 6.80, total 74.80.