Woo Components

Woo components let you build WooCommerce product, cart, and checkout screens with Etch blocks. WooCommerce still owns products, carts, shipping, payment, orders, and Store API requests. OhMyEtch gives you component pieces you can place, style, and compose.

Start With A View

Pick the customer-facing screen you want to build first:

I want to build...	Start here
A shop or product listing	Product Archive
A single product page	Single Product
A cart page	Cart Page
A checkout page	Checkout Page

Those guides show the minimum working structure first. Use the reference pages after you know which view you are composing.

The Basic Pattern

Most Woo screens follow the same pattern:

1. Put the right parent component on the page.
2. Place the child components inside the parent slot.
3. Bind product, cart, or checkout data from the current context.
4. Style with class props; keep JavaScript integrations on Woo custom events.

The most important context rule is simple:

Context	Use
Inside a product loop	{item.*} and {item.omewoo.*}
On a single product template	{this.*} and {this.omewoo.*}
Inside CartItems	Cart item atoms read the current cart row.
Inside CheckoutProvider / CheckoutForm	Checkout controls read the checkout scope.

Read Data Context and Dynamic Sources when you need the full data map.

Component Families

Component family	Relationship
Product purchase	Optional structural ProductProvider owns shared product/variation state. AddToCartForm owns the purchase draft and Add action; Provider-scoped ProductCartQuantity separately reads and mutates the confirmed quantity already in the cart.
Cart items	CartItems owns the item loop. CartItemImage, CartItemTitle, CartItemPrice, CartItemSubtotal, CartItemQuantity, CartItemRemove, and CartAttributeList read the current row.
Cart attributes	CartAttributeList loops the selected variation attributes for a cart item. CartAttributeName and CartAttributeValue read each attribute row.
Totals	CartTotalsList and OrderSummaryTotalsList provide layout. The total atoms render total_items, total_discount, total_shipping, total_tax, and total_price.
Coupons	CouponForm mutates the cart. CouponAppliedList renders active coupon rows. CouponRemoveButton belongs inside each coupon row.
Checkout	CheckoutProvider scopes checkout UI. CheckoutForm serializes fields and submits. Address forms, payment selector, terms, notices, and place-order controls belong inside that checkout scope.
Order summary	OrderSummary renders read-only cart rows and totals for checkout; it intentionally reuses cart item atoms and totals atoms.

Use Component Families when you want the prop-level reference for a specific group.

Routes Still Matter

Woo starters also need to own Woo's WordPress routes, not only the component trees. Read Woo Template Integration Contract before publishing starter guidance for archive-product, single-product, cart, checkout, order confirmation, or product taxonomy archives.

What WooCommerce Still Owns

Woo components use WooCommerce Store API for cart and checkout actions. Native Woo hooks still run through those Store API paths, so Woo extensions that adjust validation, pricing, cart data, checkout data, payment handling, or order status can stay involved.

Start Here

1. Build one complete screen with Product Archive, Single Product, Cart Page, or Checkout Page.
2. Use Recipes for focused tasks such as a product card, coupon form, or shipping selector.
3. Use Woo Custom Events for mini-cart drawers, analytics, cart refresh integrations, or checkout instrumentation.
4. Use Data Context and Dynamic Sources before composing loops or binding {item.*} and {this.*} values.
5. Use Component Families when authoring a specific component group.
6. Read Woo Template Integration Contract before creating a complete starter.