This documentation provides comprehensive insights into the My Account Page Widget developed by Ultimate Store Kit Pro.

Create Themes Builder Pages

To use the My Account Page first need to create a themes builder pages. Create Dashboard, Downloads, Orders, Account Details, Wishlist, and Logout page via themes builder and activate it.

Add New Templates

1. Go to Ultimate Store Kit > Template Builder section from Dashboard.
2. Find the ” Add New Template ” button to create a new templates. It will open a popup window and select the pages that want to create.

Dashboard Page

1. Select the Dashboard from the option value.

2. Set the name of the Template.
3. Select the status Active.
4. Click on the Create Template button to create a dashboard page.

Insert the My Account ( Page ) Widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the My Account Page widget name.
3. The widget will appear, Check the Ultimate Store Kit logo on top right corner.
4. Select the widget then Drag and Drop it on the editor page.

5. After inserting the widget you don’t need to edit, Just leave as it and click on the ” Publish ” button.

Orders Page

1. Select the Orders from the option value.

2. Set the name of the Template.
3. Select the status Active.
4. Click on the Create Template button to create a Orders page.

Downloads Page

1. Select the Downloads from the option value.

2. Set the name of the Template.
3. Select the status Active.
4. Click on the Create Template button to create a Downloads page.

Address Page

1. Select the Address from the option value.

2. Set the name of the Template.
3. Select the status Active.
4. Click on the Create Template button to create a Address page.

Account Details Page

1. Select the Account Details from the option value.

2. Set the name of the Template.
3. Select the status Active.
4. Click on the Create Template button to create a Account page.

Wishlist Page

1. Select the Wishlist from the option value.

2. Set the name of the Template.
3. Select the status Active.
4. Click on the Create Template button to create a Wishlist page.

Customer Logout Page

1. Select the Customer Logout from the option value.

2. Set the name of the Template.
3. Select the status Active.
4. Click on the Create Template button to create a Logout page.

Enable the My Account Page Widget

To use the My Account Page from Ultimate Store Kit Widget must be enabled. Navigate to WordPress Dashboard > Ultimate Store Kit Plugin dashboard.

1. Navigate to WC Widgets Tab.
2. Search by the My Account Page Widget Name.
3. Enable the My Account Page Widget.
4. Hit the Save Settings Button.

Inserting The My Account Page widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the My Account Page widget name.
3. The widget will appear, Check the Ultimate Store Kit logo on top right corner.
4. Select the widget then Drag and Drop it on the editor page.

Configuring the Content Tab

The Content Tab provides options to manage and structure the core settings of elements. It allows to define the content and functionality to align with design goals.

My Account Section

Go to Content > My Account

Horizontal Layout

1. Layout: Set the layout horizontal. The Navbar will appear in horizontal view.
2. Alignment: Make the alignment of the content on Left, Right, Center,
3. Show User Profile Header: Enable the switcher to show the Profile Header.

Vertical Layout

1. Layout: Select the layout for the Horizontal Design.
2. Alignment: Set the alignment for the Navigation. Select the position the Left, Center, Right, and Alignment.
3. Show User Profile Header: Enable the switcher to show the Profile Header.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

My Account Header Section

Go to Style > My Account Header

1. Background Type: Select the background type color for the header section. Choose the color for it.
2. Border Type: Set the type for the border.
3. Border Width: Set the thickness for the border.
4. Border Color: Choose the color for the border.

5. Border Color: Choose the color for the border.
6. Border Radius: Make the border radius for the account header.
7. Padding: Set the padding for inner space.
8. Margin: Set the margin by following.
9. Box Shadow: Make a shadow for the Header Section.

Avatar

1. Size: Set the size for the avatar of header section.
2. Border Type: Select the border type solid, dashed, dotted, etc.
3. Border Width: Set the thickness for the Border.
4. Border Color: Choose color for the border.

5. Border Radius: Set the radius for the border.
6. Box Shadow: Make a shadow for the avatar.
7. Gap: Set the gap between the between the avatar and Text.

User Infor

1. Color: Set the color for the user info.
2. Typography: Select typography for this.
3. Margin: Choose margin for the user info.

Logout

1. Text Color: Set the color for the text.
2. Typography: Choose the typography for the logout button.
3. Background Type: Select the background type for the button.
4. Border Type: Choose the Border Type.
5. Border Width: Set the thickness for the border.

My Account Wrapper Section

Go to Style > My Account Wrapper

1. Background Type: Set the background type color and choose the color for the wrapper section.
2. Border Type: Select the type of the border, Solid, Dashed, Dotted, Double etc.
3. Border Width: Set the thickness of the border.
4. Border Color: Set the color for the border.

5. Border Radius: Make the border radius for the wrapper.
6. Padding: Set the inner space by following the padding.
7. Margin: Set the margin for outer space.
8. Space Between: Set the space between the wrapper and section.

Account Navigation Section

Go to Style > Account Navigation

1. Background Type: Set the background type color and choose the color for the Account Navigation section.
2. Border Type: Select the type of the border, Solid, Dashed, Dotted, Double etc.
3. Border Width: Set the thickness of the border.
4. Border Color: Set the color for the border.

5. Border Radius: Make the radius for the border.
6. Padding: Set the inner space by following the padding.
7. Gap: Set the gap from the wrapper section.

Nav Items

Normal

1. Background Type: Set the background type color and choose the color for the Nav Items in normal state.
2. Color: Set the color for the nav items.
3. Border Type: Select the type of the border, Solid, Dashed, Dotted, Double etc.
4. Border Width: Set the thickness of the border.

5. Border Color: Set the color for the border.
6. Border Radius: Make the radius for the border.
7. Padding: Set the inner space by following the padding.
8. Typography: Set the typography for the normal tab.

Hover

1. Color: Set the color for the nav items.
2. Background Type: Set the background type color and choose the color for the Nav Items in normal state.
3. Border Type: Select the type of the border, Solid, Dashed, Dotted, Double etc.

Active

1. Color: Choose the text color for the Nav Items.
2. Background Type: Set the background type color and choose the color from the color plate.
3. Border Color: Set the color for the border.

Account Content Section

Go to Style > Account Content

1. Text Color: Set the color of the Text for the Account Content.
2. Title Color: Set the color for the Title.
3. Heading Color: Select the heading color for the account content.

4. Stats Color: Set the color for the status area.
5. Stats Icon Color: Choose color for the stats icon color.
6. Stats Icon Background Color: Select the background color for the stats icon.

7. Link Color: Set the color for the link.
8. Link Hover Color: Choose the link hover color.
9. Background Type: Select the background type color and choose color for the content.
10. Border Type: Choose the type border for the area.

11. Border Width: Set the width for the border.
12. Border Color: Choose the color for the border.
13. Border Radius: Make the border corner edges rounded by setting the border.

14. Padding: Set the padding for the inner space of the content.
15. Spacing: Set spacing from the left section.
16. Typography: Choose the typography for this.

Table Section

Go to Style > Table

1. Border Width: Set the width for the border.
2. Border Color: Choose the color for the border.

Table Header

1. Color: Choose the color for the Table Header.
2. Background Color: Set the background color for the tabl.
3. Padding: Set the inner spacing of the table header.
4. Typography: Choose the typography of the table.

Table Body

1. Text Color: Choose the color of the Text.
2. Link Color: Set the color for the link.
3. Link Hover Color: Set the hover color for the link.
4. Background Color: Set the background of the table body.

Action Button

Normal

1. Color: Choose the color for the action button.
2. Background Type: Set the background type color of the button.
3. Border Type: Set the border color for the button.

5. Border Radius: Make the border corder edges rounded by setting the border.
6. Padding: Set the padding for the button.
7. Typography: Choose the typography of the button.

Hover

1. Color: Choose the color for the action button.
2. Background Type: Set the background for the button.
3. Border Color: Choose the border color.

Address Section

Go to Style > Address

Address Info

1. Edit Link Color: Set the color for the Edit link.
2. Edit Link Hover Color: Set the color for the hover link.
3. Typography: Set the typography of the address info.

Address Info

1. Address Info Color: Set the color for the address info.
2. Typography: Set the typography of the address.

Divider Color

1. Divider Color: Set the color for the divider.
2. Background Type: Choose the background type color for the divider section.
3. Border Type: Select the type border.

4. Border Width: Set the thickness of the border.
5. Border Color: Set the color for the border.
6. Border Radius: Make the border radius to Border Corner edges rounded.
7. Padding: Set the padding for the inner space.

Form Fields Section

Go to Style > Form Fields

1. Color: Choose the color for the Title of Form Fields.
2. Typography: Set the typography for the fields section.

Fields

1. Label Color: Set the label color for the forms fields.
2. Label Typography: Set the typography for the label.

3. Input Color: Set the color for the input fields.
4. Input Background Color: Choose the background color of the input.
5. Input Border Radius: Set the border corner edges rounded by setting the padding.

6. Input Border Radius: Set the border radius for the input.
7. Input Padding: Set the spacing for the input padding.
8. Input Typography: Choose the typography of the Input section.

Submit Button

Normal

1. Color: Choose the color for the submit button text.
2. Background Type: Select the background type color for the button.
3. Border Type: Set the border type, Different types of border are available double, dashed, dotted, solid, none etc.
4. Border Width: Set the thickness of the border.

5. Border Color: Choose the color for the border.
6. Border Radius: Make the border corner edges rounded by setting the border radius.
7. Padding: Set the padding for the button.
8. Typography: Choose the typography for the button.

Hover

1. Color: Choose the color for the submit button.
2. Background Type: Set the background type color and select color for it.
3. Border Color: Set the color for the border.

Video Assist

Video Tutorial Coming Soon and Check the demo by following.
Thanks in advance.