Skip to main content

My Account

AccountProvider owns the account area shell: one slot per WooCommerce My Account endpoint, switched by the account session on the storefront and by the preview property in the builder. Every other component in this family renders inside one of those slots and reads the account dynamic sources.

When To Use This Family​

Use this family on the WooCommerce account page to compose the customer account area: sign in and registration for visitors, and the dashboard, orders, addresses, account details, saved payment methods, and downloads for signed-in customers.

Quick Start​

Account provider with the core endpoints
<OmeWooAccountProvider>
{#slot auth}
  <OmeWooAccountNotices />
  <OmeWooAccountLoginForm />
{/slot}
{#slot dashboard}
  <OmeWooAccountGreeting />
  <OmeWooAccountNotices />
  <OmeWooAccountNavigation />
{/slot}
{#slot orders}
  <OmeWooAccountNavigation />
  <OmeWooAccountOrders />
{/slot}
</OmeWooAccountProvider>

Slots you do not compose render nothing for that endpoint. Start with the endpoints you need and add the rest later.

Components​

Component keyRole
OmeWooAccountProviderAccount area shell. Owns one slot per account endpoint and switches between them.
OmeWooAccountNavigationAccount endpoint menu built from the account session URLs.
OmeWooAccountNoticesAccount notice region for WooCommerce success and error messages.
OmeWooAccountGreetingCustomer greeting bound to the display name.
OmeWooLogoutLinkLogout link with the WooCommerce logout nonce URL.
OmeWooAccountLoginFormLogin form posting to the WooCommerce core login handler.
OmeWooAccountRegisterFormRegistration form posting to the WooCommerce core register handler.
OmeWooAccountLostPasswordFormLost password form posting to the core password-reset request handler.
OmeWooAccountResetPasswordFormReset password form for the reset link, gated on a valid reset key.
OmeWooAccountOrdersOrders list loop over the account orders source.
OmeWooAccountOrderDetailSingle order view: items, totals, and addresses.
OmeWooAccountAddressFormBilling or shipping address form posting to the core save-address handler.
OmeWooAccountDetailsFormAccount details form for name, email, and password changes.
OmeWooAccountPaymentMethodsSaved payment methods list with delete, set-default, and default badge.
OmeWooAccountAddPaymentMethodFormAdd payment method form with server-rendered gateway fields.
OmeWooAccountDownloadsCustomer downloads list with download buttons.

Provider Slots​

SlotRenders on
authSigned-out visitors, and the lost-password endpoint.
dashboardSigned-in customers on the dashboard endpoint.
ordersSigned-in customers on the orders endpoint.
view-orderSigned-in customers viewing one of their orders.
downloadsSigned-in customers on the downloads endpoint.
edit-addressSigned-in customers editing addresses.
edit-accountSigned-in customers editing account details.
payment-methodsSigned-in customers on the payment methods endpoints, including add, delete, and set-default actions.

The storefront switching is condition-driven, so one composed page serves every endpoint. Components that need a signed-in customer hide themselves on the storefront while the visitor is signed out, and the auth forms hide themselves once the visitor is signed in.

Auth Form Behavior​

The auth forms are real WooCommerce form posts, not Store API requests. They submit to the same core handlers the classic WooCommerce templates use, with nonces resolved as dynamic tokens, so core validation, error messages, redirects, and third-party extensions keep working.

  • AccountRegisterForm only renders on the storefront when the store allows registration.
  • AccountResetPasswordForm only renders when the reset link carries a valid reset key, so expired and already-used links show the lost-password step instead.
  • Success and error messages appear in AccountNotices, which reads the same notice store WooCommerce core writes to.

Orders, Pay, And Cancel​

  • AccountOrders renders the customer's orders with number, date, status, and total, plus a view link.
  • Orders that still need payment expose a pay link that opens the classic WooCommerce pay-for-order screen.
  • Cancellable orders expose a cancel button backed by a dedicated REST route. The route re-checks the nonce, the order owner, and the cancellable status (pending, on-hold, or failed) before WooCommerce cancels the order, so the button cannot cancel someone else's or already-paid order.
  • AccountOrderDetail renders one order with its items, totals, and billing and shipping addresses, including pay and cancel actions where they still apply.

Address And Details Forms​

  • AccountAddressForm posts to the WooCommerce core save-address handler. Set address.type to billing or shipping to bind the form to one address book entry.
  • AccountDetailsForm posts name, email, and optional password changes to the core save-account-details handler. Current-password rules and email conflict messages come from WooCommerce.

Payment Methods And Downloads​

  • AccountPaymentMethods lists saved methods with brand, last digits, expiry, and the default badge. Delete and set-default actions use the core nonce'd action URLs and ask WooCommerce to confirm.
  • AccountAddPaymentMethodForm renders the gateway's own fields server-side, so gateways with custom field scripts keep working.
  • AccountDownloads lists purchased downloads with remaining counts and expiry where WooCommerce tracks them.

Builder Preview​

AccountProvider exposes preview.endpoint, a select that switches the builder canvas between every account slot so each screen can be designed without signing in or out. The components render sample data in the builder; the storefront always renders live account data.

Dynamic Data​

The family reads six account dynamic sources: accountSession, accountNotices, accountOrders, accountOrder, accountPaymentMethods, and accountDownloads. See Woo Dynamic Data Tree for every field.