Woo · My account
A WooCommerce My account page built on Bricks My account (v2): side navigation, a dashboard with shortcuts, orders with their status and actions, order details, downloads, addresses and account forms, plus log in and register side by side and the lost password pages.
See it live: Woo · My account on fancybricks.co — the live preview, and the button that copies it.
Or open the preview on its own — narrow the window to see it on a phone — and in dark mode.
Structure
This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.
Woo · My account
Container
Account · Layout
Intro (FBK Intro)
Account
Dashboard (state)
Dashboard · Content
Dashboard · Notices
Dashboard · Title
Dashboard · Text
Dashboard · Shortcuts
Dashboard · Orders tile
Dashboard · Orders icon
Dashboard · Orders icon glyph
Dashboard · Orders
Dashboard · Orders text
Dashboard · Addresses tile
Dashboard · Addresses icon
Dashboard · Addresses icon glyph
Dashboard · Addresses
Dashboard · Addresses text
Dashboard · Account details tile
Dashboard · Account icon
Dashboard · Account icon glyph
Dashboard · Account details
Dashboard · Account details text
Orders (state)
Orders · Content
Orders · Notices
Orders · Title
Hook · woocommerce_before_account_orders
Orders · Has orders
Orders · List
Orders · Loop
Orders · Order
Orders · Number
Orders · Date
Orders · Status
Orders · Status (Completed)
Orders · Status (Processing)
Orders · Status (On hold)
Orders · Status (Pending payment)
Orders · Status (Failed)
Orders · Status (Cancelled)
Orders · Status (Refunded)
Orders · Status (other)
Orders · Total
Orders · Actions
Orders · Action item
Orders · Action (Pay)
Orders · Action (Cancel)
Orders · Action (other)
Hook · woocommerce_before_account_orders_pagination
Orders · Pagination
Orders · Empty
Orders · Empty text
Orders · Browse
Hook · woocommerce_after_account_orders
View order (state)
View order · Content
View order · Notices
View order · Back
View order · Title
View order · Facts
View order · Facts · Date item
View order · Facts · Date label
View order · Facts · Date
View order · Facts · Status item
View order · Facts · Status label
View order · Facts · Status
View order · Facts · Total item
View order · Facts · Total label
View order · Facts · Total
View order · Facts · Payment method item
View order · Facts · Payment method label
View order · Facts · Payment method
View order · Notes
View order · Notes title
View order · Notes list
View order · Note
View order · Note text
View order · Note date
Hook · woocommerce_order_details_before_order_table
View order · Details
View order · Lines
View order · Line
View order · Line · Media
View order · Line · Photo
View order · Line · Quantity badge
View order · Line · Info
View order · Line · Name
View order · Line · Quantity (screen readers)
View order · Line · Price
View order · Line · Options
View order · Line · Total
View order · Line · Line total
View order · Totals
View order · Totals · Row
View order · Totals · Label
View order · Totals · Value
Hook · woocommerce_order_details_after_order_table
View order · Downloads
View order · Downloads · Title
View order · Downloads · List
View order · Downloads · Row
View order · Downloads · Info
View order · Downloads · Product
View order · Downloads · Limits
View order · Downloads · Download
View order · Customer
View order · Customer · Billing
View order · Customer · Billing title
View order · Customer · Billing address
Hook · woocommerce_order_details_after_customer_billing_address
View order · Customer · Shipping
View order · Customer · Shipping title
View order · Customer · Shipping address
Hook · woocommerce_order_details_after_customer_shipping_address
Hook · woocommerce_order_details_after_customer_details
View order · Order again
Hook · woocommerce_after_order_details
Downloads (state)
Downloads · Content
Downloads · Notices
Downloads · Title
Hook · woocommerce_before_account_downloads
Downloads · List
Downloads · List · List
Downloads · Row
Downloads · List · Info
Downloads · List · Product
Downloads · List · Limits
Downloads · List · Download
Downloads · Empty
Downloads · Empty text
Downloads · Browse
Hook · woocommerce_after_account_downloads
Addresses (state)
Addresses · Content
Addresses · Notices
Addresses · Title
Addresses · Text
Addresses · List
Addresses · Card
Addresses · Title
Addresses · Address
Addresses · Edit
Hook · woocommerce_my_account_after_my_address
Edit address (state)
Edit address · Content
Edit address · Notices
Hook · woocommerce_before_edit_account_address_form
Edit address · Form
Edit address · Title
Edit address · Fields
Hook · woocommerce_before_edit_address_form
Edit address · Field wrapper
Edit address · First name
Edit address · Last name
Edit address · Country / Region
Edit address · Street address
Edit address · Apartment, suite, unit, etc.
Edit address · Town / City
Edit address · Department
Edit address · Postcode / ZIP
Edit address · Phone
Edit address · Email address
Hook · woocommerce_after_edit_address_form
Edit address · Save
Hook · woocommerce_after_edit_account_address_form
Edit account (state)
Edit account · Content
Edit account · Notices
Edit account · Title
Hook · woocommerce_before_edit_account_form
Edit account · Form
Hook · woocommerce_edit_account_form_start
Edit account · Fields
Edit account · First name
Edit account · Last name
Edit account · Display name
Edit account · Email address
Hook · woocommerce_edit_account_form_fields
Edit account · Password
Edit account · Legend
Edit account · Current password (leave blank to leave unchanged)
Edit account · New password (leave blank to leave unchanged)
Edit account · Confirm new password
Hook · woocommerce_edit_account_form
Edit account · Save
Hook · woocommerce_edit_account_form_end
Hook · woocommerce_after_edit_account_form
Payment methods (state)
Payment methods · Content
Payment methods · Notices
Payment methods · Title
Payment methods · List
Add payment method (state)
Add payment method · Content
Add payment method · Notices
Add payment method · Title
Add payment method · Form
Login (state)
Login · Notices
Hook · woocommerce_before_customer_login_form
Login · Layouts
Login · Two panels
Login · Panel
Login · Login form
Login · Title
Hook · woocommerce_login_form_start
Login · Username or email address
Login · Password
Hook · woocommerce_login_form
Login · Remember me
Login · Log in
Login · Lost password link
Hook · woocommerce_login_form_end
Register · Panel
Register · Register form
Register · Title
Hook · woocommerce_register_form_start
Register · Email address
Register · Password
Hook · woocommerce_register_form
Register · Register
Hook · woocommerce_register_form_end
Login · Tabs
Tab menu
Tabs login tab
Tabs login tab · Text
Tabs register tab
Tabs register tab · Text
Tab content
Tabs login pane
Tabs login pane · Panel
Tabs login · Login form
Tabs login · Title
Hook · woocommerce_login_form_start
Tabs login · Username or email address
Tabs login · Password
Hook · woocommerce_login_form
Tabs login · Remember me
Tabs login · Log in
Tabs login · Lost password link
Hook · woocommerce_login_form_end
Tabs register pane
Tabs register pane · Panel
Tabs register · Register form
Tabs register · Title
Hook · woocommerce_register_form_start
Tabs register · Email address
Tabs register · Password
Hook · woocommerce_register_form
Tabs register · Register
Hook · woocommerce_register_form_end
Login · Tabs · sliding line (JS, optional)
Hook · woocommerce_after_customer_login_form
Lost password (state)
Lost password · Content
Lost password · Notices
Lost password · Box
Lost password · Title
Hook · woocommerce_before_lost_password_form
Lost password · Form
Lost password · Text
Lost password · Username or email
Hook · woocommerce_lostpassword_form
Lost password · Send
Hook · woocommerce_after_lost_password_form
Email sent (state)
Email sent · Content
Email sent · Box
Email sent · Title
Hook · woocommerce_before_lost_password_confirmation_message
Email sent · Text
Hook · woocommerce_after_lost_password_confirmation_message
Email sent · Back (FBK Button)
Reset password (state)
Reset password · Content
Reset password · Notices
Reset password · Box
Reset password · Title
Hook · woocommerce_before_reset_password_form
Reset password · Form
Reset password · New password
Reset password · Repeat the new password
Hook · woocommerce_resetpassword_form
Reset password · Save
Hook · woocommerce_after_reset_password_form
The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.
How to adjust
Every step is the same move: pick the element in the Structure panel, change its Properties.
Where are those panels?
How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.
The classes this element carries, in the Bricks panel.
This template's own component, with its Style group open.
- Paste the template in Bricks first — see Copy and paste.
- Select Intro (FBK Intro) › Properties: Eyebrow, Hide eyebrow, Title, Title level, Lead, Hide lead · Style group: Eyebrow style, Highlight, Title size, Accent line · Layout group: Alignment, Layout, Background, Spacing · Motion group: Reveal in slider.
- Select Email sent · Back (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
- Select Login · Tabs › one tab = a title and its pane, in the same order: duplicate both to add one.
Requirements
- WooCommerce. Needs WooCommerce active, with the products/fields this template queries already set up.
What each requirement is, and how to set it up once for the whole site: Requirements.
Finish by hand
- Needs Bricks > Settings > WooCommerce > Enable advanced modular elements (experimental in Bricks 2.4).
- Paste or insert this template into the page set as My account in WooCommerce > Settings
Advanced, edited with Bricks. Bricks only reads My account v2 from that page.
- Switch the state you edit with State on the Account element (Dashboard, Orders, View order, Login…).
- Logged out, two layouts with the native Login form and Register form (v2): Login · Two panels (shown) and Login · Tabs (two tabs in one narrow centered column, Bricks Tabs), switched off by a condition ({post_id} == 0, never true). To use the tabs, delete that condition from Login · Tabs and add the same one to Login · Two panels.
- The Register panel shows when WooCommerce > Settings > Accounts & Privacy > Allow customers to create an account on the My account page is on. With generate a password on, the password field is left out and WooCommerce emails a link instead.
- The navigation is WooCommerce's own (Bricks prints it inside the element): its links and their order come from WooCommerce and from plugins that add account pages.
On phones
The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:
- 991px and below —
.fbk-intro,.fbk-waccount. - 767px and below —
.fbk-section,.fbk-waccount__order,.fbk-wline(+2 more).
Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.
Careful with the classes shared by the whole library (fbk-section, fbk-intro, the
component classes): a change there shows up in every template that uses them.
If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.
Accessibility
In this template, keyboard focus is visible on every interactive piece; movement is cut back
when the visitor's system asks for less motion; the state screen readers need is already set
(aria-hidden, aria-label).
What is checked on every template, and what depends on your own palette: Accessibility.
Dark mode
With your site in dark mode this section turns dark too — the class fbk-section--auto-dark
on the section does it. Remove the class to keep it light.
Its background is a modifier on the section, so you can swap it for any of the ones the
template is checked with: fbk-section--light, fbk-section--soft, fbk-section--dark.
How the library follows your site's color scheme: Dark mode and preview.
Replaces
- 02 – Woo login/register from Fancy Bricks 2.0
- 01 – Woo My account from Fancy Bricks 1.0
- 01 – Woo My account (addresses) from Fancy Bricks 1.0
- 01 – Woo My account (Downloads) from Fancy Bricks 1.0
- 01 – Woo My account (Edit Address) from Fancy Bricks 1.0
- 01 – Woo My account (Edit - Details) from Fancy Bricks 1.0
- 01 – Woo My account (Order) from Fancy Bricks 1.0
- 01 – Woo My account (View order) from Fancy Bricks 1.0
- 01 - Woo My account - Main from Fancy Bricks 2.0
- 01 – Woo My account (addresses) from Fancy Bricks 2.0
- 01 – Woo My account (Downloads) from Fancy Bricks 2.0
- 01 – Woo My account (Edit Address) from Fancy Bricks 2.0
- 01 – Woo My account (Edit - Details) from Fancy Bricks 2.0
- 01 – Woo My account (Order) from Fancy Bricks 2.0
- 01 – Woo My account (View order) from Fancy Bricks 2.0
- 01 - Woo login/register from Fancy Bricks 2.0
- 01 - Woo los password confirmation from Fancy Bricks 2.0
- 01 - Woo reset password from Fancy Bricks 2.0
What happened to the old libraries, and what to do with pages already built with them: Migrating from 1.0/2.0.