# My Account Page

> Compose the WooCommerce account page with the My Account family for auth, dashboard, orders, addresses, details, payment methods, and downloads.

# My Account Page

The account page gives customers everything after the purchase: their orders, addresses, saved payment methods, and downloads. The [My Account family](/woo/component-families/my-account) renders it on the WooCommerce account page, with `AccountProvider` switching between endpoints so one composed page serves every screen.

## Minimum Structure

```text
OmeWooAccountProvider
├── slot auth            → AccountNotices, AccountLoginForm
├── slot dashboard       → AccountGreeting, AccountNotices, AccountNavigation
├── slot orders          → AccountNavigation, AccountOrders
├── slot view-order      → AccountNavigation, AccountOrderDetail
├── slot downloads       → AccountNavigation, AccountDownloads
├── slot edit-address    → AccountNavigation, AddressForm (billing), AddressForm (shipping)
├── slot edit-account    → AccountNavigation, AccountDetailsForm
└── slot payment-methods → AccountNavigation, AccountPaymentMethods, AccountAddPaymentMethodForm
```

<CodeExample title="Account provider with every endpoint" language="jsx">
{`<OmeWooAccountProvider>
  {#slot auth}
    <OmeWooAccountNotices />
    <OmeWooAccountLoginForm />
    <OmeWooAccountRegisterForm />
    <OmeWooAccountLostPasswordForm />
    <OmeWooAccountResetPasswordForm />
  {/slot}
  {#slot dashboard}
    <OmeWooAccountGreeting />
    <OmeWooLogoutLink />
    <OmeWooAccountNotices />
    <OmeWooAccountNavigation />
  {/slot}
  {#slot orders}
    <OmeWooAccountNavigation />
    <OmeWooAccountOrders />
  {/slot}
</OmeWooAccountProvider>`}
</CodeExample>

## Step 1: Put The Account Page On The Woo Account Page

Assign your composed page as the WooCommerce account page in WooCommerce → Settings → Advanced. WooCommerce routes every account endpoint — dashboard, orders, view-order, downloads, edit-address, edit-account, payment-methods — to that page, and the provider renders the matching slot. See [Woo Template Integration Contract](/woo/flows/template-integration-contract) for the routing rules.

The plugin also adds an "Oh My Etch" submenu under the Etch admin menu that opens the account page in the builder.

## Step 2: Compose The Auth Screens

Signed-out visitors see the auth slot. Place `AccountLoginForm` for sign-in and `AccountRegisterForm` for registration; the register form hides itself when the store disallows registration. `AccountLostPasswordForm` and `AccountResetPasswordForm` cover password recovery — the reset form only renders when the reset link is valid.

All auth forms post to the WooCommerce core handlers with core nonces, so validation, error messages, and redirects behave exactly like the classic WooCommerce forms. Show `AccountNotices` so customers see the result.

## Step 3: Compose The Dashboard And Orders

Signed-in customers see the endpoint slot matching the URL. Compose each logged-in slot with `AccountNavigation` plus that endpoint's content. `AccountOrders` lists orders with number, date, status, and total; orders that still need payment show a pay link that opens the classic pay-for-order screen, and cancellable orders show a cancel button guarded by a REST route that re-checks ownership and status. `AccountOrderDetail` renders one order with items, totals, and addresses in the view-order slot.

## Step 4: Compose Addresses, Details, And Payment Methods

The edit-address slot takes two `AccountAddressForm` components, one bound to `address.type = billing` and one to `address.type = shipping`; both post to the core save-address handler prefilled from the customer's account. The edit-account slot takes `AccountDetailsForm` for name, email, and password changes.

The payment-methods slot takes `AccountPaymentMethods` for saved methods and `AccountAddPaymentMethodForm` to add one; the add form renders the gateway's own fields so payment extensions keep working.

## Step 5: Preview Every Screen In The Builder

Use `preview.endpoint` on the provider to switch the canvas between every slot. The components render sample data in the builder; the storefront renders live data, and components that need a signed-in customer hide themselves while the visitor is signed out.

## Next References

- [My Account](/woo/component-families/my-account) explains every component, slot, and form contract in this flow.
- [Woo Dynamic Data Tree](/woo/woo-dynamic-data-tree) lists the account dynamic sources field by field.
- [Woo Template Integration Contract](/woo/flows/template-integration-contract) for the page routing rules.