Personalize the account page of WooCommerce with the My Account widget. Change the layout, tab names, tab alignment, as well as colors, and fonts. When publishing, you will be prompted to automatically assign this as your default My Account page in the WooCommerce settings.
Adding My Account widget
- Find the My Account widget in the widget menu.
- Drag it to the page canvas.
- Configure the settings from the tabs below.
Content tab
Tabs
- Layout: Select between vertical or horizontal from the dropdown menu.
- Spacing: Use the slider or manually enter a value in PX, EM, or %.
- Tab Names: Click each tab name to edit the value.
- Alignment: Use the icon to select between left, center, or right alignment.
Additional Options
- Customize your dashboard: customize My Account dashboard by replacing the default WooCommerce customer dashboard screen with a template from your saved template library. Use dynamic tags to personalize the user experience, such as adding a support form for customer inquiries:
- In your saved template library, create a new template for the content region and publish it.
- Activate the feature using the toggle button.
- Choose the desired template by clicking the field and entering a few letters. Select the template from the list that appears.
- The template will now be displayed in the My Account content area in the dashboard tab.
Style tab
Tabs
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Background Type: Use the icons to choose between a solid or gradient background for the normal, hover, and active states.
- Color (background): From the color picker, select the color(s) of the tab for the normal, hover, and active states.
- Image: Click to select or upload an image to the media library to use as the background image of your tab for the normal, hover, and active states.
- Box Shadow: Click the pencil icon to open the shadow properties options.
- Color (Text): From the color picker, choose the color for your field text.
Borders
- Border type: Select between solid, double, dotted, dashed, or grooved from the dropdown menu.
- Width (border): Enter a value in the fields based on px, em, or %.
- Color (border): From the color picker, choose the background color for your border.
- Border Radius: Enter a value in the fields based on px, em, or %.
- Padding: Enter a value in the fields based on px, em, or %.
- Spacing: adjust the border spacing in px, em, or %.
Dividers
- Color: From the color picker, choose the color for your Divider.
- Weight: Use the slider or manually enter a value in the field (PX, EM).
Sections
- Background Color: From the color picker, select the color for your sections.
- Box Shadow: Click the pencil icon to open the shadow properties options.
Borders (sections)
- Border type: Select between solid, double, dotted, dashed, or grooved from the dropdown menu.
- Width (border): Enter a value in the fields based on px, em, or %.
- Color (border): From the color picker, choose the background color for your border.
- Border Radius: Enter a value in the fields based on px, em, or %.
- Padding: Enter a value in the fields based on px, em, or %.
Typography
Section Titles
- Color: From the color picker, choose the color for your titles.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Text Shadow (Titles Only): Click the pencil icon to open the shadow properties options.
- Spacing: Use the slider to increase or decrease the spacing between components.
General Text
- Color: From the color picker, choose the color for your text.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
Login Messages
- Color: From the color picker, choose the color for your messages.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
Checkboxes
- Color: From the color picker, choose the color for your messages.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
Radio Buttons
- Color: From the color picker, choose the color for your messages.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
Links
- Color: From the color picker, choose the color for your links.
Forms
Layout
- Column Gap: Use the slider or enter the value in the field in PX.
- Rows Gap: Use the slider or enter the value in the field in PX.
Labels
- Color: From the color picker, choose the color for your labels.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Spacing: Use the slider to increase or decrease the spacing between components.
Fields
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Color (Text): From the color picker, choose the color for your field text.
- Background Type: Use the icons to choose between a solid or gradient background.
- Color (background): From the color picker, select the color(s) for the field.
Note:
Image: Click to select or upload an image to the media library to use as the background image of your field.
- Box Shadow: Click the pencil icon to open the shadow properties options.
Borders (Fields)
- Border type: Select between solid, double, dotted, dashed, or grooved from the dropdown menu.
- Width (border): Enter a value in the fields based on px, em, or %.
- Color (border): From the color picker, choose the background color for your border.
- Border Radius: Enter a value in the fields based on px, em, or %.
- Padding: Enter a value in the fields based on px, em, or %.
Button
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Text Shadow: Click the pencil icon to open the shadow properties options.
- Color (Text): From the color picker, choose the color for your field text.
- Background Type: Use the icons to choose between a solid or gradient background.
- Color (background): From the color picker, select the color(s) for the field.
- Image: Click to select or upload an image to the media library to use as the background image of your field.
- Box Shadow: Click the pencil icon to open the shadow properties options.
Borders (Button)
- Border type: Select between solid, double, dotted, dashed, or grooved from the dropdown menu.
- Width (border): Enter a value in the fields based on px, em, or %.
- Color (border): From the color picker, choose the background color for your border.
- Border Radius: Enter a value in the fields based on px, em, or %.
- Padding: Enter a value in the fields based on px, em, or %.
Order Details
Layout
-
Rows Gap: Use the slider or enter the value in the field in PX.
Titles and Totals - Color: From the color picker, choose the text color for your titles and totals.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Text Shadow: Click the pencil icon to open the shadow properties options.
Items
- Color: From the color picker, choose the text color for your items.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
Variations
- Color: From the color picker, choose the text color for your items.
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
Product Link
- The following options are available for normal and hover states.
- Color: From the color picker, choose the color for your product links.
Dividers
- Border Type: Select between solid, double, dotted, dashed, or grooved from the dropdown menu.
- Color: From the color picker, choose the color for your Dividers.
- Weight: Use the slider or manually enter a value in the field (PX, EM).
Buttons
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Color (Text): From the color picker, choose the color for your field text.
- Background Type: Use the icons to choose between a solid or gradient background.
- Color (background): From the color picker, select the color(s) for the field.
- Image: Click to select or upload an image to the media library to use as the background image of your field.
- Box Shadow: Click the pencil icon to open the shadow properties options.
Borders (Button)
- Border type: Select between solid, double, dotted, dashed, or grooved from the dropdown menu.
- Width (border): Enter a value in the fields based on px, em, or %.
- Color (border): From the color picker, choose the background color for your border.
- Border Radius: Enter a value in the fields based on px, em, or %.
- Padding: Enter a value in the fields based on px, em, or %.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.