Skip to main content

Checkout Address Forms

This family renders Woo billing and shipping fields. Field definitions are authored in components, but runtime field rules come from Woo's checkout schema.

Components

Component keyRole
OmeWooBillingAddressFormRenders billing address fields.
OmeWooShippingAddressFormRenders shipping address fields plus the different-shipping toggle.

Shared Field Props

Both address forms expose the same field-copy pattern:

PropMeaning
content.legendFieldset legend text.
content.show_legendRenders or hides the legend.
{field}.use_woo_defaultsUses Woo label, hint text, and validation copy.
{field}.labelCustom label when Woo defaults are disabled.
Field hint copyCustom input hint copy when Woo defaults are disabled.
{field}.error_messageCustom local validation copy when Woo defaults are disabled.
accessibility.aria_labelFieldset accessible label.
preview.stateBuilder preview state.

Billing includes email and phone. Shipping does not.

Shipping Toggle Props

ShippingAddressForm adds:

PropMeaning
shipping_toggle.labelVisible toggle label.
shipping_toggle.use_aria_labelUses a separate ARIA label when true.
shipping_toggle.aria_labelAccessible toggle label when enabled.
shipping_toggle.preview_checkedBuilder preview checked state.

Runtime hides shipping fields until the toggle is checked.

Runtime Field Rules

Runtime applies the Woo schema:

RuleRuntime result
hiddenField root becomes hidden and controls are disabled.
requiredField gets data-ome-required, and checkout validation uses it.
labelLabel text is updated unless custom copy is enabled.
Field hint copyInput hint copy is updated unless custom copy is enabled.
typeNative input type is updated.
priorityField roots are sorted by Woo priority.
autocompleteAutocomplete token is applied.

Country and state controls are UIChoice-backed. State can become select, text, or hidden depending on the selected country.

Scenario Coverage

ScenarioCovered behavior
checkout_successBilling fields, country/state choices, and payment data produce a real order.
checkout_validation_errorRequired and invalid billing fields are marked locally.
checkout_terms_blockedCheckout notices mark error state without unsafe HTML.
checkout country changes refresh state controlState changes from ready to hidden after country change.
checkout shipping address fields follow toggleShipping fields show and hide with the embedded toggle.