In this documentation, we will show you how to customize the Account Order Details widget by Ultimate Store Kit.
Enable the Account Order Details Widget
To use the Account Order Details widget by Ultimate Store Kit, first, you have to enable the widget.
- Go to WordPress > Ultimate Store Kit Plugin dashboard.
- Then, Click the WC Widgets Tab.
- Search the Account Order Details Widget Name.
- Enable the Account Order DetailsWidget.
- Hit the Save Settings Button.
Inserting the Account Order Details widget
- Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
- Search the Cart (Page) widget.
- Drag the widget 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 defining the content and functionality to align with design goals.
Select Order By ID Section
Go to Content > Select Order by ID
1. Order ID No: You can select the order ID no from this option.
Work with the Style Tab
Header Section
Go to Style > Header
1. Color: You can change the heading color with this option.
2. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
3. Margin: This option allows you to adjust the space & create gaps between elements.
4. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Table Section
Go to Style > Table
1. Stripe Table: Enables alternating row background colors to improve readability in the table.
2. Padding: This option controls the inner spacing between the content and the border of each cell.
3. Margin: This option controls the outer spacing around the table to separate it from surrounding elements.
4. Border Type: This option allows you to add borders to your items. You can select various border types from this option, such as Solid, Double, Dotted, Dashed and Groove.
5. Border Width: Set the thickness of the border with this option.
6. Border Color: You can change the border color with this option.
7. Border Radius: This option controls the roundness of the border.
Table: Header Section
Go to Style > Table: Header
1. Color: You can change the table header color with this option.
2. Background Color: You can change the background header color with this option.
3. Padding: This option controls the inner spacing between the content and the border.
4. Border Type: You can change the border type from here.
5. Border Width: Set the thickness of the border with this option.
6. Border Color: You can change the border color with this option.
7. Border Radius: This option controls the roundness of the border.
8. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Table: Body Section
Go to Style > Table: Body
1. Border Type: You can change the table border type with this option.
2. Cell Padding: This option controls the space inside the cells.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
In this section, we have three tabs. These are Normal, Hover & Stripe. Let’s start with the Normal Tab first – 1. Background: You can change the background color with this option.
2. Text Color: You can change the text color with this option.
3. Link Color: You can change the link color with this option.
4. Border Color: You can change the border color with this option.
Now, let’s proceed to the Hover tab –
5. Background: You can change the background hover color with this option.
6. Text Color: You can change the text hover color with this option.
7. Link Color: You can change the link hover color with this option.
Now, let’s proceed to the Stripe tab –
8. Background: You can change the stripe background color with this option.
9. Text Color: You can change the stripe text color with this option.
10. Link Color: You can change the stripe link color with this option.
Table: Footer Section
Go to Style > Table: Footer
1. Color: You can change the table footer color with this option.
2. Background: You can change the table footer background color with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Order Again Button Section
Go to Style > Order Again Button
In this section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab –
1. Color: You can change the button text color with this option.
2. Background: You can change the button background color with this option.
3. Padding: This option controls the inner space of the button.
4. Margin: This option allows you to adjust the space & create gaps between elements.
5. Radius: This option controls the roundness of the button border.
6. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now let’s proceed to the Hover Tab –
7. Color: You can change the button text color with this option.
8. Background: You can change the button background color with this option.
9. Padding: This option controls the inner space of the button.
10. Margin: This option allows you to adjust the space & create gaps between elements.
11. Radius: This option controls the roundness of the button border.
12. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Address Info Section
Go to Style > Address Info
1. Color: You can change the address information text color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
All done! You have successfully customized the Account Order Details widget on your website.
Video Assist
The video will come soon. Please check the demo page for more examples. Thanks for being with us.
