How to Create a WooCommerce My Account Page in JupiterX

Designing a personalized WooCommerce My Account page enhances the user experience for your customers. With JupiterX, you have the flexibility to customize every aspect of this crucial part of your online store. Here's a step-by-step guide to creating your custom My Account page using the JupiterX WooCommerce builder.

Getting Started

1. Navigate to JupiterX > Layout Builder > Single.
2. Click on Add New.
3. Enter a name for your template.
4. Click on Create Template.
5. Now, inside the Elementor editor, drag and drop the My Account widget onto your canvas to begin customization.

Configuring the Content Tab

In the Content Tab of your My Account widget, you will find several sections:

• Dashboard, Orders, Downloads, Addresses, Account details, Log out: Each of these represents the default tabs on the My Account page.
  • To edit a tab, simply click on it, and you'll see options to modify its settings.
  • You can add a new tab by clicking the corresponding button.
  • You can add custom tabs with custom content using Elementor templates

Individual Tab Settings

• Tab Name: Enter a custom name for your tab here.
• Custom Tab Content: Toggle this to 'Yes' for custom content, and select an Elementor template that you've created for this tab.
• Hide Tab: If you want to hide any tab, toggle this option to 'Yes'.
• Icon: Choose an icon for your tab to make it more visually appealing.

Styling the My Account Page

Select the Style Tab to fine-tune the appearance of the My Account page.

Tabs

• Layout: Choose 'Horizontal' or 'Vertical'.
• Spacing: Define the space between tabs.
• Alignment: Align your tabs to the left, center, or right.

Tabs Icon

• Color: Pick a color for your icons.
• Size: Determine the icon size.
• Spacing: Set the icon spacing.
• Placement: Decide where to place the icons relative to titles.

Sections

• Background Color: Apply a color to the tab content sections.
• Box Shadow: Add a shadow effect.
• Border Type & Color: Customize the border style and color.
• Padding: Configure internal spacing.

Typography

You have the ability to stylize:

• Section Titles
• General Text
• Login Messages
• Checkboxes
• Links

Forms

Fine-tune the appearance and layout of forms with options for:

• Columns & Rows Gap
• Labels: Color and typography.
• Fields: Typography, color, borders, and padding.

Buttons

Design your buttons considering:

• Typography and Text Shadow
• Text Color
• Background Type
• Box Shadow
• Border Radius
• Padding

Order Details

Customize the order details section for:

• Rows Gap
• Titles & Totals: Color and typography.
• Items: Color and typography.
• Variations: Color and typography.
• Product Link: Color for Normal and Hover states.
• Buttons: Text Color, Border Type, and Padding.

Finalizing the My Account Page

After you've customized your My Account page:

1. Click Publish.
2. For the Condition, choose WooCommerce -> My Account.
3. Save your changes.

When crafting a My Account page, build it as any regular page and add the My Account widget to the content.

Congratulations! You've now personalized the My Account section of your WooCommerce store with JupiterX, resulting in a seamless and branded experience for your customers.