In this documentation, we will show you how to customize the Thankyou Order Details widget by Ultimate Store Kit.
Enable the Thankyou Order Details Widget
To use the Thankyou 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 Thankyou Order Details Widget Name.
- Enable the Thankyou Order Details Widget.
- Hit the Save Settings Button.
Inserting Thankyou Order Details widget
- Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
- Search the Thankyou Order Details widget.
- Drag the widget and drop it on the editor page
Work with the Style Tab
Container Section
Go to Style > Container
In this section, we have two tabs. These are – Wrapper & Title. Let’s start with the Wrapper tab –
1. Background Color: You can change the background 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. 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, Groove.
4. Border Width: Set the thickness of the border by selecting the width.
5. Border Color: You can change the border color by using this option.
6. Border Radius: The Border Radius controls the roundness of the border.
7. Box Shadow: While working with this option you will get three more options (Blur, Horizontal & Vertical). Blur Controls how sharp or soft the shadow will appear. By using the horizontal option you can move the shadow left or right and by using the vertical option you can move the shadow up or down.
Now, Let’s Proceed to the Title Tab –
8. Color: You can change the title color with this option.
9. Indicator Color: You can change the indicator color with this option.
10. Border Color: You can change the border color with this option.
11. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
12. Margin: This option allows you to adjust the space & create gaps between elements..
13. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
Table Section
Go to Style > Table
1. Background Color: You can change the table background color with this option. (This option will apply only to the row cell.)
2. Border Type: This option allows you to add a border around the table.
3. Border Width: Set the thickness of the border by selecting the width.
4. Border Color: You can change the border color by using this option.
5. Border Radius: The Border Radius controls the roundness of the border.
6. Cell Padding: You can adjust the internal space of the cell with this option.
7. Footer Cell Padding: You can adjust the footer’s internal space with this option.
Table Header Section
Go to Style > Table Header
1. Background Color: You can change the background color with this option.
2. Text Color: You can change the header text color with this option.
3. Typography: Change the header’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Table Body Section
Go to Style > Table Body
In this section, we have three tabs. These are Noraml, Hover & Even. Let’s proceed with the the Normal tab first –
1. Background Color: You can change the background color by using this option.
2. Text Color: You can change the text color with this option.
3. Typography: Change the table body text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
4. Meta Color: You can change the meta color by using this option.
5. Meta Typography: Change the meta text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now, let’s proceed to the Hover Tab –
6. Background Color: You can change the background hover color by using this option.
7. Text Color: You can change the text hover color with this option.
8. Meta Color: You can change the meta hover color with this option.
Now, let’s proceed to the Even Tab –
9. Background Color: You can change the even background color by using this option.
10. Text Color: You can change the text color with this option.
11. Meta Color: You can change the meta color with this option. (In this even cell, there are no meta present.)
Table Footer Section
Go to Style > Table Footer
In this section, we have two tabs. These are Normal and Last Row. Let’s start with the Normal Tab –
1. Background Color: You can change the footer background color by using this option.
2. Text Color: You can change the footer text color with this option.
3. Typography: Change the table footer text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now, let’s proceed with the Last Row Tab –
4. Background Color: You can change the last row background color by using this option.
5. Text Color: You can change the last row text color with this option.
6. Typography: Change the last row text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
All done! You have successfully customized the Thankyou Order Details widget on your website.
Video Assist
The video and demo will come soon.
