Skip to main content

My Account Page

The account page gives customers everything after the purchase: their orders, addresses, saved payment methods, and downloads. The My Account family renders it on the WooCommerce account page, with AccountProvider switching between endpoints so one composed page serves every screen.

Minimum Structure​

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
Account provider with every endpoint
<OmeWooAccountProvider>
{#slot auth}
  <OmeWooAccountNotices />
  <OmeWooAccountLoginForm />
  <OmeWooAccountRegisterForm />
  <OmeWooAccountLostPasswordForm />
  <OmeWooAccountResetPasswordForm />
{/slot}
{#slot dashboard}
  <OmeWooAccountGreeting />
  <OmeWooLogoutLink />
  <OmeWooAccountNotices />
  <OmeWooAccountNavigation />
{/slot}
{#slot orders}
  <OmeWooAccountNavigation />
  <OmeWooAccountOrders />
{/slot}
</OmeWooAccountProvider>

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 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​