# Order Received Page

> Compose the thank-you experience on the checkout page with the Order Received family.

# Order Received Page

After a customer places an order, WooCommerce redirects back to the checkout page's order-received endpoint. The [Order Received family](/woo/component-families/order-received) lets that same page render the order: notice, details, items, totals, and customer addresses — composed once, switched automatically.

## Minimum Structure

```text
OmeWooOrderReceivedProvider
├── slot checkout → your existing checkout composition
└── slot received → OrderReceivedNotice, OrderReceivedDetails,
                    OrderReceivedItems, OrderReceivedTotals,
                    OrderReceivedCustomerDetails
```

<CodeExample title="Checkout page that also renders the order" language="jsx">
{`<OmeWooOrderReceivedProvider>
  {#slot checkout}
    <OmeWooCheckoutProvider>
      {#slot default}
        <OmeWooCheckoutForm />
      {/slot}
    </OmeWooCheckoutProvider>
  {/slot}
  {#slot received}
    <OmeWooOrderReceivedNotice />
    <OmeWooOrderReceivedDetails />
    <OmeWooOrderReceivedItems />
    <OmeWooOrderReceivedTotals />
    <OmeWooOrderReceivedCustomerDetails />
  {/slot}
</OmeWooOrderReceivedProvider>`}
</CodeExample>

## Step 1: Wrap Your Checkout Composition

Build the checkout page as in [Checkout Page](/woo/flows/checkout-page), then drop the whole composition into the provider's checkout slot. The received experience is additive: while an order is in progress the checkout slot renders exactly as before, and pages that skip the provider keep today's behavior.

## Step 2: Compose The Received Slot

Place the received components in the received slot. `OrderReceivedNotice` leads with the thank-you message and order status, `OrderReceivedDetails` and `OrderReceivedTotals` summarize the order, `OrderReceivedItems` lists the purchased products, and `OrderReceivedCustomerDetails` closes with the addresses and payment method.

Use `preview.endpoint` on the provider to switch the canvas between the two slots. The received components render sample data in the builder.

## Step 3: Let Guests See Their Order

Order validation mirrors WooCommerce's own rules: guests need the order key from the URL, signed-in customers see their own orders without one, and trashed orders are rejected. When validation fails, nothing about the order is disclosed and the checkout slot renders instead, so an invalid or guessed link never reveals whether an order exists.

## Step 4: Check Block Theme Behavior

On WooCommerce block themes, WooCommerce replaces the page template with its Order Confirmation template on order-received requests. When the checkout page carries the provider, Oh My Etch removes that replacement so your composed page renders instead. On classic themes and pages without the provider, the theme's own behavior is untouched.

## Next References

- [Order Received](/woo/component-families/order-received) explains every component and the security model.
- [Checkout Page](/woo/flows/checkout-page) composes the checkout slot this flow wraps.
- [Woo Dynamic Data Tree](/woo/woo-dynamic-data-tree) lists the `receivedOrder` source field by field.