How to customize the "My Account" page

Updated 6 months ago

"My Account" is a page for your shop customers. It allows the customer to log in/register on your site and see their order information and personal data.

This page is created by WooCommerce automatically, and you can easily find it in the admin list of pages:

By default, the My Account page has the default "My Account" element in it (shortcode [woocommerce_my_account]). It shows the predefined WooCommerce template:

How to customize the My Account Page #

You can customize the "My Account" page like any other page with WPBakery Builder or Live Builder.

To change the default WooCommerce appearance remove the default "My Account" element (shortcode [woocommerce_my_account]) and use the following Zephyr elements:

My Account – Login
My Account – Menu
My Account – Content

While creating a custom layout, you can move and/or re-order My Account elements as you like, but all three elements are required for the My Account page to work properly.

"My Account – Login" Element #

Shows the form for logging in to the existing account and the form for registering a new one, with relevant titles.

To show/hide the "Register" form go to the WooCommerce > Settings > Accounts & Privacy and use the "Allow customers to create an account on the My Account page" option

If this checkbox is not active, the My Account – Login element will only show the login form, without a title.

This element will also show a password recovery form if you click the relevant "Lost your password?" link.

You can customize the My Account – Login appearance by choosing the Title Size (only shows when both Login and Register forms are visible), choosing one of the Style options, and using the element's Design settings.

"My Account – Menu" Element #

Shows the navigation menu for switching the My Account subpages.

You can customize the appearance of the My Account – Menu element by using the:

General - you can choose the vertical or horizontal layout for the element, depending on the layout you create for the My Account page.
Main Items - you can choose between the Links and Blocks style and specify the relevant spacing and colors for the items.
Design - you can use Design settings to apply some extra styling.

"My Account – Content" Element #

Shows the main content of the current My Account sub-page.

My Account – Menu element (described above) allows switching between its sections, and the My Account – Content element displays the relevant content for each menu item.

For different menu sections My Account – Content displays the content listed below:

Dashboard - by default shows the WooCommerce content generated for the dashboard. You can choose to hide it by deactivating the "Show the default Dashboard content" switch and you can replace it with the custom content instead. Details on adding the custom content to different My Account sections are described below.
Orders - shows the general information about the orders.
Downloads - shows the available downloadables from the purchased products.
Addresses - shows the billing and shipping addresses, with the ability to add or edit this information.
Account details - profile information, allowing the customer to edit personal data and password.

You can use Design settings to apply extra styling to the My Account – Content element.

Adding custom content via the Display Logic #

You can add extra content to the relevant sub-page of the My Account page, by specifying the Display Logic for this content.

The Display Logic settings should be targeting the needed option inside the "Account endpoints" parameter. You can use this Display Logic condition multiple times if you want to show custom content for several sections of the My Account page.