Skip to main content

Shipping Selector

ShippingMethodSelector renders Woo shipping rates and lets the customer select one.

Component

Component keyRole
OmeWooShippingMethodSelectorReads shippingRates, binds UIChoice, calls Store API to select a package rate, and refreshes totals.

Props

PropMeaning
ui.moderadio, button-radio, or select. Default is radio.
ui.aria_labelAccessible selector label.
ui.default_labelSelect trigger text before selected rate is resolved.
content.show_priceWhether rate rows include formatted price text.
content.price_separatorText between rate name and price.

Rate Values

Shipping selection is package-aware:

AttributeValue
data-ome-value{package_id}:{rate_id}
Hidden radio nameshipping_method_{package_id}
Hidden radio valueRaw Woo rate_id
Runtime requestselect_shipping_rate(package_id, rate_id)

This preserves Woo's package-specific shipping behavior.

Modes

ModeBehavior
radioIn-tree radiogroup with indicators.
button-radioIn-tree radiogroup without indicators.
selectTrigger plus hidden listbox content. Runtime positions list content through shared UIChoice helpers.

If the cart does not need shipping, the selector state becomes hidden and no rate rows render.

Runtime Behavior

The runtime:

  1. Reads shipping packages and rates from the cart response.
  2. Deduplicates package/rate keys.
  3. Normalizes server-rendered rate rows when they exist.
  4. Clones template rows when Store API data changes.
  5. Updates selected input and UIChoice state.
  6. Calls Store API on rate change and refreshes cart totals.

Scenario Coverage

ScenarioCovered behavior
shipping_selectorSelecting free shipping updates selected rate, cart totals, and order summary totals.
shipping_selector_button_radioButton-radio mode uses radiogroup semantics and updates totals.
shipping_selector_selectSelect mode uses trigger/listbox structure and updates trigger label.
shipping_selector_select_content_propsshow_price: false removes price display from row and trigger.
no_shipping_selectorNo-shipping cart hides the selector.
Lifecycle pricing testNative Woo pricing hooks still affect rendered totals around shipping selection.