In this documentation, we will show you how to customize the Upsells widget by Ultimate Store Kit.
Enable the Upsells Widget
To use the Upsells 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 Upsells Widget Name.
- Enable the Upsells Widget.
- Hit the Save Settings Button.
Inserting the Upsells widget
- Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
- Search the Upsells 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.
Upsells Section
Go to Content > Upsells
1. Columns: You can set the columns number to your working demand. Here you you will get the number of columns 1 to 12.
2. Order By: You can decorate your selected Upsells using Order By options. Under this option, you can select ( Date, Title, Price, Popularity, Rating, Random, and Menu Order) any of them to show your selected upsells on your Page.
3. Order: You can show the upsells selected items in Asc and Desc Order.
Work with the Style Tab
Heading Section
Go to Style > Heading
1. Heading: Enable or disable the heading switcher button to show/hide the heading.
2. Color: You can change the heading color with this option.
3. Typography: Change the heading’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
4. Text Align: You can select the heading position to left, center, right or Justify with this option.
5. Spacing: You can set the heading spacing from here.
Item Section
Go to Style > Item
1. Background Type: You can change the color of any object background to classic or gradient. In Classic, you can change the background color and also set an image to the background. In the gradient option, you can also set background color along with locations and angle for each breakpoint to ensure the gradient adapts to different screen sizes. Also, you can change the gradient type (Radial & Linear) and positions.
2. Color: You can change the item background color with this option.
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 with this option.
5. Border Color: You can change the border color with this option.
6. Border Radius: This option controls the roundness of the border.
7. Box Shadow: The Box Shadow property is used to create the shadow around the Category Button. It takes Four values: Horizontal offset, Vertical offset, blur, and Spread to customize the Box shadow.
Position: you can set the Box Shadow position Outline and Inset. Here we set the Box Shadow position Outline.
Box Shadow Color: This lets you change the Box Shadow color.
8. Item Padding: This option lets you set the padding for the item.
9. Content Padding: This option lets you set the padding for the content.
10. Alignment: You can set the alignment as- left, center, and right.
Title Section
Go to Style > Title
1. Color: This option lets you set the item title color.
2. Hover Color: This option lets you set the item title hover color.
3. Margin: Adjusts the position of an object over the canvas.
4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
Price Section
Go to Style > Price
1. Color: This option lets you set the Sale color.
2. Regular Color: This option lets you set the Regular color.
3. Margin: Adjusts the position of an object over the canvas.
4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
Action Button Section
Go to Style > Action Button
1. Color: This option lets you change the Action button normal color.
2. Background Color: This option lets you change the Action button normal background color.
3. Hover Color: This option lets you change the Action button hover color.
4. Hover Background Color: This option lets you change the Action button hover background color.
5. 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.
6. Border Width: Set the thickness of the border with this option.
7. Border Color: You can change the border color with this option.
8. Border Radius: This option controls the roundness of the border.
9. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
10. Margin: Adjusts the position of an object over the canvas.
11.Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
All done! You have successfully customized the Upsells widget on your website.
Video Assist
The demo and video will come soon. Thanks for staying with us.
