# Woo Recipes
> Practical Woo component structures backed by current E2E scenarios and demo-store patterns.
# Woo Recipes
These recipes use scenario and demo-store structures that exist in the repo.
## Product Archive Card
Backed by `product_archive_simple_add` and `TestWooProductList`.
Use a product loop and bind each card with `{item.*}`:
{`{#loop products as item}
{#slot default}
{/slot}
{/loop}`}
Why it works: the form owns product ID/type and form submission; the button is a submit control inside the form. The E2E archive scenario submits the form and verifies `CartCount` updates.
## Single Product Quantity
Backed by `product_single_simple_add`.
Use `{this.*}` on a single product template and set button quantity bounds:
{`
{#slot default}
{/slot}
`}
E2E fills `9`, dispatches change, and verifies the input clamps to `3` before the cart count updates.
## Variable Product Selector
Backed by `variable_product_requires_variation`, `variation_selector_button_radio`, and the demo single-product template.
Loop over product attributes and bind each `AttributeSelector` to the current attribute object:
{`
{#slot default}
{#loop this.omewoo.attributes as attribute}
{/loop}
{/slot}
`}
Why it works: the selector writes selected variation attribute state into the purchase form. The form blocks submit until a required variation option is selected, and unavailable options do not select.
## Cart Rows and Empty State
Backed by `cart_items_component_preview_contract`, `cart_page_update_and_remove`, and `cart_totals_and_empty_slot`.
Place cart item atoms inside the `CartItems` default slot and empty content inside the `empty` slot:
{`
{#slot default}
{/slot}
{#slot empty}
Your cart is empty.
{/slot}
`}
E2E verifies row count, server-hydrated atom text, quantity updates, removal, totals refresh, and final empty state.
## Coupons
Backed by `cart_coupons`.
Use `CouponForm` to apply codes, `CouponAppliedList` to render current coupons, and `CouponRemoveButton` inside the coupon row:
{`
{#slot default}
{/slot}
`}
E2E applies `SAVE10`, verifies discount totals and coupon rows, then removes the coupon and verifies totals return.
## Shipping Methods
Backed by `shipping_selector`, `shipping_selector_button_radio`, `shipping_selector_select`, and `shipping_selector_select_content_props`.
Use `ShippingMethodSelector` wherever cart shipping selection should be available:
{``}
The selector uses package-aware rate values. E2E verifies button-radio and select modes, hiding when no shipping is needed, and total/order summary refresh after selecting free shipping.
## Checkout Success
Backed by `checkout_success` and `TestCheckoutDemo`.
Use a provider, a form, address forms, selectors, terms, notices, and place order:
{`
{#slot default}
{#slot default}
{/slot}
{/slot}
`}
E2E fills the required billing fields, selects a payment method, clicks place order, and waits for an order-received or order-pay URL.
## Native Hook Compatibility
Backed by `lifecycle_add_to_cart`, `shipping_selector` in pricing mode, and `lifecycle_checkout`.
Use the same components as normal. The important point is that Store API requests still run Woo hooks:
- Add-to-cart validation can block the Etch form and render a Woo notice.
- Add-to-cart hooks can inject cart item data.
- Pricing hooks can change totals rendered by cart and order summary components.
- Checkout hooks can update Store API orders and payment context.