Do you want to give your WooCommerce customers a fully styled account area on a custom page you control? The My Account block in Nexter Blocks for the WordPress block editor (Gutenberg) places a complete WooCommerce customer account dashboard, including navigation tabs, order history, profile section, address management, and account forms, anywhere on your site. This block is a Pro feature available in Nexter Blocks Pro.
Best Used For:
- WooCommerce stores that want a branded account page outside the default WooCommerce template
- Membership sites where logged-in users need to access their orders and profile from a dedicated page
- Online shops that need full control over the styling of the customer dashboard, navigation tabs, order table, and account forms
Required Setup
- Make sure the default WordPress block editor is active.
- You need Nexter Blocks installed and activated.
- For Pro features, you need Nexter Blocks (Pro). See the Free vs Pro comparison to check what is included.
- You need WooCommerce installed and activated. The My Account block requires WooCommerce to display account data.
How to Activate the My Account Block?
- Go to Nexter > Blocks.
- Search for My Account and toggle it on.
How to Use the My Account Block in Gutenberg?
To add the My Account block, open any page in the WordPress block editor, click the + icon to open the block inserter, search for My Account, and select it. The block displays the WooCommerce account area in the editor canvas.
Profile
The Profile panel controls the overall layout of the account page and whether the profile section appears at the top. From the Layout dropdown, choose how the account navigation tabs and content panel are arranged:
- Vertical: display the navigation tabs in a column on the left with the account content on the right. Use this when you have a wide page layout and want a sidebar-style account menu, common on dedicated account pages with ample horizontal space.
- Horizontal: display the navigation tabs as a row above the content area. Use this when you are working with a narrower page or prefer a more compact account layout similar to the default WooCommerce style.
Enable the Profile toggle to show the customer's profile image, display name, and account information at the top of the account page. This is useful when you want to personalize the account area with the customer's identity, which works well on membership and subscription sites.
How to Style the My Account Block?
To style the My Account block, go to the Style tab in the Inspector panel.
- Profile: change the alignment, typography, text color, image border radius, image width, and spacing of the profile section. This panel appears only when the Profile toggle is enabled in the Layout tab.
- Navigation Tab: change the typography and border applied to all navigation tab items. Use the Normal and Active sub-tabs to set separate colors, backgrounds, borders, and border radius for the default state and the currently selected tab. Set the padding applied to each tab item. When the Layout is set to Vertical, three additional controls appear: Tab Width (the fixed width of the tab column), Spacing (the gap between the tab column and the content panel), and List Spacing (the vertical gap between individual tab items).
- Tab Content: change the typography, heading typography, body text color, link colors (with separate Normal and Hover states), heading color, background, border, border radius, and padding of the content panel that appears when a customer selects a tab.
- Table: change the table alignment and apply styles to the table heading, table body rows, action buttons, footer row, and footer buttons, each with Normal and Hover states. Use this to style the orders table and account overview table displayed in the content area.
- Form: change the input field styles using Normal and Focus sub-tabs, and the submit button styles using Normal and Hover sub-tabs. Use this to style the Edit Account and Edit Addresses forms that customers see when they update their personal details or shipping information.
This is how you can add a fully styled WooCommerce My Account dashboard in WordPress with Nexter Blocks.
