Checkout Shell. control the checkout.
A checkout layout shell with slots for each step while Woo keeps the transaction model intact.
Root + 4 atoms / Accessible / Composable
Checkout Shell · runtimeWOO
Looping preview · compose the full checkout
Why it's good
Behavior, handled.
Checkout Shell owns the parts that are tedious and easy to get wrong – so you can focus on the layout and the brand.
- Provider-scoped checkout UI
- Address, shipping, and payment slots
- Order summary composition
- Native Woo hooks intact
Best stacks
Compose it.
A few ways Checkout Shell shows up in real builds.
01
Custom checkout
Provider, address forms, shipping, payment, summary, and place order.
Checkout ShellPayment SelectorOrder Summary
More WooCommerce
The rest of the family.
Product Purchase
Variations, quantity, add-to-cart, and buy-now as composable atoms.
i-cart-add / Root + 3 atomsView familyCart Items
Line items with thumbnails, quantity, remove, and live subtotals.
i-cart / Root + 1 atomView familyCart Totals
Subtotal, shipping, tax, and grand total – always in sync.
i-receipt / Root + 1 atomView family