Shipping Selector
ShippingMethodSelector renders Woo shipping rates and lets the customer select one.
When To Use This Family
Use this selector when the customer should choose a Woo shipping rate on the cart page or checkout page.
Quick Start
Shipping method selector
<OmeWooShippingMethodSelector
ui='{{"mode":"button-radio","aria_label":"Choose a shipping method"}}'
content='{{"show_price":true,"price_separator":" - "}}'
/>
Component
| Component key | Role |
|---|---|
OmeWooShippingMethodSelector | Reads shippingRates, binds UIChoice, calls Store API to select a package rate, and refreshes totals. |
Props
| Prop | Meaning |
|---|---|
ui.mode | radio, button-radio, or select. Default is radio. |
ui.aria_label | Accessible selector label. |
ui.default_label | Select trigger text before selected rate is resolved. |
content.show_price | Whether rate rows include formatted price text. |
content.price_separator | Text between rate name and price. |
Rate Values
Shipping selection is package-aware:
| Attribute | Value |
|---|---|
data-ome-value | {package_id}:{rate_id} |
Hidden radio name | shipping_method_{package_id} |
Hidden radio value | Raw Woo rate_id |
| Runtime request | select_shipping_rate(package_id, rate_id) |
This preserves Woo's package-specific shipping behavior.
Modes
| Mode | Behavior |
|---|---|
radio | In-tree radiogroup with indicators. |
button-radio | In-tree radiogroup without indicators. |
select | Trigger 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:
- Reads shipping packages and rates from the cart response.
- Deduplicates package/rate keys.
- Normalizes server-rendered rate rows when they exist.
- Clones template rows when Store API data changes.
- Updates selected input and UIChoice state.
- Calls Store API on rate change and refreshes cart totals.