WooCommerce My Account Widget

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.

Content

Tabs

1. Layout: From the dropdown menu select between vertical or horizontal
2. Spacing: Use the slider or manually enter a value in PX, EM, or %
3. Tab Names: Click each tab name to edit the value
4. Alignment: Use the icon to select between left, center, or right alignment

Additional Options

Customize your My Account dashboard

You may replace the default WooCommerce customer dashboard screen with a template you create in your saved template library. By using dynamic tags in the template, you can personalize the user experience. As an example, a support form may be added to allow a customer to ask a question about an order.

1. In your saved template library, create a new template for the content region and publish it
2. Activate the feature using the toggle button
3. Choose the desired template by clicking the field and entering a few letters. The template you created can then be selected from the list that appears
4.  The template will now be displayed in the My Account content area in dashboard tab

Style

Tabs

1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
2. Background Type: Use the icons to choose between a solid or gradient background for the normal, hover, and active states
3. Color (background): From the color picker, select the color(s) of the tab for the normal, hover, and active states
4. 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
5. Box Shadow: Click the pencil icon to open the shadow properties options
6. Color (Text): From the color picker, choose the color for your field text.

Borders

1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Width (border): Enter a chosen value in the fields based on px, em, or %
3. Color (border): From the color picker, choose the background color for your border
4. Border Radius: Enter a chosen value in the fields based on px, em, or %
5. Padding: Enter a chosen value in the fields based on px, em, or %

Dividers

1. Color: From the color picker, choose the color for your Divider
2. Weight: Use the slider or manual enter a value in the field (PX, EM)

Sections

1. Background Color: From the color picker, select the color for your sections
2. Box Shadow: Click the pencil icon to open the shadow properties options

Borders

1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Width (border): Enter a chosen value in the fields based on px, em, or %
3. Color (border): From the color picker, choose the background color for your border
4. Border Radius: Enter a chosen value in the fields based on px, em, or %
5. Padding: Enter a chosen value in the fields based on px, em, or %

Typography

Section Titles

1. Color: From the color picker, choose the color for your titles. This color will apply to all section titles. 
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Text Shadow (Titles Only): Click the pencil icon to open the shadow properties options.
4. Spacing: Use the slider to increase or decrease the spacing between components.

General Text

1. Color: From the color picker, choose the color for your text. This color will apply to all text.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Login Messages

1. Color: From the color picker, choose the color for your messages
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Checkboxes

1. Color: From the color picker, choose the color for your messages
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Links

The following options are available for normal and hover states.

1. Color: From the color picker, choose the color for your links

Forms

Layout

1. Column Gap: Use the slider or enter the value in the field in PX
2. Rows Gap: Use the slider or enter the value in the field in PX

Labels

1. Color: From the color picker, choose the color for your labels. This color will apply to all labels.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Spacing: Use the slider to increase or decrease the spacing between components.

Fields

1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
2. Color (Text): From the color picker, choose the color for your field text. This color will apply to all field text.
3. Background Type: Use the icons to choose between a solid or gradient background
4. Color (background): From the color picker, select the color(s) for the field
5. Image: Click to select or upload an image to the media library to use as the background image of your field
6. Box Shadow: Click the pencil icon to open the shadow properties options.

Borders (Fields)

1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Width (border): Enter a chosen value in the fields based on px, em, or %
3. Color (border): From the color picker, choose the background color for your border
4. Border Radius: Enter a chosen value in the fields based on px, em, or %
5. Padding: Enter a chosen value in the fields based on px, em, or %

Button

1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
2. Color (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown below
3. Background Type: Use the icons to choose between a solid or gradient background
4. Color (background): From the color picker, select the color(s) for the field
5. Image: Click to select or upload an image to the media library to use as the background image of your field
6. Box Shadow: Click the pencil icon to open the shadow properties options.

Borders (Button)

1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Width (border): Enter a chosen value in the fields based on px, em, or %
3. Color (border): From the color picker, choose the background color for your border
4. Border Radius: Enter a chosen value in the fields based on px, em, or %
5. Padding: Enter a chosen value in the fields based on px, em, or %

Order Details

Layout

1. Rows Gap: Use the slider or enter the value in the field in PX

Titles and Totals

1. Color: From the color picker, choose the text color for your titles and totals. 
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Text Shadow: Click the pencil icon to open the shadow properties options.

Items

1. Color: From the color picker, choose the text color for your items
2. Typography: From the pencil icon, click to open the font option 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.

1. Color: From the color picker, choose the color for your product links

Dividers

1. Border Type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Color: From the color picker, choose the color for your Dividers
3. Weight: Use the slider or manual enter a value in the field (PX, EM)

Buttons

1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
2. Color (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown below
3. Background Type: Use the icons to choose between a solid or gradient background
4. Color (background): From the color picker, select the color(s) for the field
5. Image: Click to select or upload an image to the media library to use as the background image of your field
6. Box Shadow: Click the pencil icon to open the shadow properties options.

Borders (Button)

1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Width (border): Enter a chosen value in the fields based on px, em, or %
3. Color (border): From the color picker, choose the background color for your border
4. Border Radius: Enter a chosen value in the fields based on px, em, or %
5. Padding: Enter a chosen value in the fields based on px, em, or %

Advanced

Global Advanced tab options are available for this widget.