Cart Items

This family renders the editable cart line-item list. CartItems owns the row loop. The atoms inside the default slot read the current row.

When To Use This Family

Use this family when you need cart rows: a cart page, a mini-cart drawer, or a checkout order summary that uses cart item atoms.

Quick Start

Cart rows with empty state

<OmeWooCartItems>
{#slot default}
  <OmeWooCartItemImage />
  <OmeWooCartItemTitle />
  <OmeWooCartItemQuantity />
  <OmeWooCartItemSubtotal />
  <OmeWooCartItemRemove />
{/slot}
{#slot empty}
  Your cart is empty.
{/slot}
</OmeWooCartItems>

Components

Component key	Role
OmeWooCartItems	Renders cart rows and an authored empty slot.
OmeWooCartItemImage	Displays line product image.
OmeWooCartItemTitle	Displays product title or composed variant title.
OmeWooCartItemPrice	Displays unit price.
OmeWooCartItemSubtotal	Displays line subtotal.
OmeWooCartItemQuantity	Interactive quantity input or display quantity.
OmeWooCartItemRemove	Removes the current cart item.
OmeWooCartAttributeList	Loops the selected variation attributes for the current line.
OmeWooCartAttributeName	Displays attribute name inside CartAttributeList.
OmeWooCartAttributeValue	Displays attribute value inside CartAttributeList.

Authoring Structure

CartItems
  default slot
    CartItemImage
    CartItemTitle
    CartAttributeList
      CartAttributeName
      CartAttributeValue
    CartItemPrice
    CartItemQuantity
    CartItemSubtotal
    CartItemRemove
  empty slot
    authored empty-cart content

CartItems Props

Prop	Meaning
structure.root_tag	Root wrapper tag.
structure.item_tag	Row tag.
structure.empty_tag	Empty state wrapper tag.
preview.rows	Number of builder preview rows.
preview.empty_state	Shows the empty slot in builder preview.

The runtime sets data-ome-state to has-items or empty.

Cart Item Atom Props

Component	Important props
CartItemImage	content.alt_fallback is used when Woo image alt text is empty.
CartItemTitle	content.include_attributes and content.variant_separator control composed variant title text.
CartItemQuantity	configuration.mode is interactive or preview; configuration.counter_presentation is input or stepper; content, accessibility, and styling props control the rendered control.
CartItemRemove	content.label and accessibility.aria_label control button text and accessible name.

CartItemPrice and CartItemSubtotal display Store API formatted price text from the current row.

Interactive quantity and remove controls dispatch Woo custom events after Store API mutations. See Woo Custom Events for ome-woo:item-quantity-updated, ome-woo:item-removed, ome-woo:cart-updated, and ome-woo:cart-error payloads.

CartItemQuantity accepts absolute quantities and keeps its current draft editable during a short internal debounce. Rapid same-line drafts collapse to the latest target; they do not optimistically rewrite the shared cart. CartItemRemove cancels an unstarted quantity draft for the same exact line. Both controls preserve data-ome-state and additionally expose data-ome-woo-mutation-phase for styling idle, debouncing, queued, pending, success, and error.

Cart Item Quantity Presentations

The default input presentation preserves the released number-input markup and behavior. Opt into the button-based presentation per component:

Cart line quantity stepper

<OmeWooCartItemQuantity configuration='{{"counter_presentation":"stepper"}}' />

The stepper renders a real decrease button, a read-only value, and a real increase button. It is a presentation of the same exact-line quantity setter: clicks update the hidden canonical quantity input, and the existing mutation coordinator sends the latest absolute target to Woo. Zero is never treated as removal; use CartItemRemove for that action.

Do not author min, max, or step. Each row receives Woo-authoritative quantityLimits: minimum, finite maximum or null, multiple, editable, and soldIndividually. Both presentations use those limits, including decimal quantities. Non-editable and sold-individually lines remain truthful read-only controls.

Use content.decrease_label and content.increase_label for optional visible button text. Accessible names come from accessibility.decrease_aria_label, accessibility.increase_aria_label, and accessibility.value_aria_label. Style the parts with styling.wrapper_class, styling.decrease_button_class, styling.value_class, and styling.increase_button_class.

Stable hooks are available on every stepper: data-ome-woo-quantity-control, data-ome-woo-quantity-presentation="stepper", data-ome-woo-quantity-decrease, data-ome-woo-quantity-value, and data-ome-woo-quantity-increase. Mutation state remains separate on data-ome-woo-mutation-phase.

Attribute Props

CartAttributeList exposes:

Prop	Meaning
structure.root_tag	Attribute list wrapper tag.
structure.item_tag	Attribute row tag.
preview.rows	Number of builder preview attributes.

CartAttributeName and CartAttributeValue are row atoms; they need the current attribute row from CartAttributeList.

Hydration Rules

Server render uses CartItemAtomHydrator when current cart data exists. Runtime uses cart-items.ts after Store API responses. Both update:

• Row keys and indexes.
• Text fields.
• Image attributes.
• Quantity input or stepper values, exact cart item keys, and Woo quantity limits.
• Remove button cart item keys.
• Attribute rows cloned from the attribute row template.

Rows inside <template> elements are ignored until cloned.

Related Guides

• Cart Page
• Order Summary
• Woo Custom Events