Skip to main content

Order Received Page

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

Minimum Structure​

OmeWooOrderReceivedProvider
├── slot checkout → your existing checkout composition
└── slot received → OrderReceivedNotice, OrderReceivedDetails,
                    OrderReceivedItems, OrderReceivedTotals,
                    OrderReceivedCustomerDetails
Checkout page that also renders the order
<OmeWooOrderReceivedProvider>
{#slot checkout}
  <OmeWooCheckoutProvider>
    {#slot default}
      <OmeWooCheckoutForm />
    {/slot}
  </OmeWooCheckoutProvider>
{/slot}
{#slot received}
  <OmeWooOrderReceivedNotice />
  <OmeWooOrderReceivedDetails />
  <OmeWooOrderReceivedItems />
  <OmeWooOrderReceivedTotals />
  <OmeWooOrderReceivedCustomerDetails />
{/slot}
</OmeWooOrderReceivedProvider>

Step 1: Wrap Your Checkout Composition​

Build the checkout page as in 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​