Shared Controls and Props

Several Woo families share the same authoring ideas. These props are shared because the runtime shares behavior, not because they are cosmetic conveniences.

UIChoice Selectors

AttributeSelector, ShippingMethodSelector, address country/state fields, and PaymentMethodSelector all use the shared UIChoice runtime.

Prop	Applies to	Meaning
ui.mode	Attribute, shipping, payment	Selects the control structure. Supported modes depend on the component.
ui.aria_label	Attribute, shipping, payment	Accessible name on the selector root.
ui.default_label	Select mode selectors	Trigger text before a selected option is resolved.
ui.html_tag	UIChoice components that expose it	Root element tag for authored structure.

Mode behavior:

Mode	Markup and runtime
select	Renders a trigger and hidden listbox content. Runtime may move content into the shared UIChoice host for positioning.
radio	Renders an in-tree radiogroup with UIChoice indicators.
button-radio	Renders an in-tree radiogroup without the radio indicator.

E2E covers button-radio and select modes for shipping and payment selectors, and select/button-radio modes for variation selection.

Content Props

Content props control visible labels and fallback text:

Prop group	Components	Notes
content.label	Add-to-cart button, buy-now button, remove buttons, place-order button	Button text; ARIA labels can mirror it.
content.successMsg	Add-to-cart button	Temporary button text after successful add.
content.show_price and content.price_separator	Shipping selector	Controls shipping rate label composition.
content.show_description	Payment selector	Removes payment method descriptions when false.
content.show_empty_message and content.empty_message	Coupon applied list	Controls the empty coupon message.
content.include_attributes and content.variant_separator	Cart item title, order summary	Controls composed variant title text.

Structure Props

Structure props are for authored HTML semantics, not runtime targeting.

Prop	Applies to	Meaning
structure.root_tag	CartItems, CartAttributeList, totals lists	Root wrapper element.
structure.item_tag	CartItems, CartAttributeList	Row element for item or attribute loops.
structure.empty_tag	CartItems	Empty-state wrapper element.
structure.html_tag	Labeled total atoms	Wrapper element when a total atom shows a label.

Preview Props

Preview props affect deterministic Etch builder output. They do not change live Woo cart or checkout data.

Prop	Applies to	Meaning
preview.rows	CartItems, CartAttributeList, CouponAppliedList	Number of rows shown in builder preview.
preview.empty_state	CartItems, CouponAppliedList	Shows the authored empty state in builder preview.
preview.show_in_builder	Cart and checkout notices	Shows a sample notice in builder preview.
preview.notice_type	Cart and checkout notices	Sets the builder notice type sample.
preview.state	Address form fields	Shows idle or error state in builder preview.
shipping_toggle.preview_checked	Shipping address form	Initial builder state for the different-shipping toggle.

Class Props

Woo components rely heavily on class props so authors can style each atomic part without changing runtime selectors.

Runtime selectors use data-ome-* attributes. Class props should be treated as styling hooks only.

Important shared style groups:

Group	Components
UIChoice styles	Attribute selector, shipping selector, payment selector, address country/state controls.
Control default styles	Coupon input and checkout fields.
Cart totals styles	TotalsSubtotal, TotalsDiscount, TotalsShipping, TotalsTax, TotalsTotal.
Address form field styles	Billing and shipping address forms.

State Attributes

Woo runtime state is reflected through data-ome-state.

State	Common surfaces
idle	Ready forms, buttons, notice regions without active feedback.
loading, updating, processing	Checkout store states.
success	Successful add-to-cart, coupon, quantity, remove, and checkout submit actions.
error	Local validation, Store API errors, notice regions.
has-items, empty	Cart count, cart items, coupon list, quantity preview.
ready, hidden, text	Address fields and shipping selector availability.
unavailable, invalid	Product purchase forms.