In this documentation, we will show you how to customize the Product Related widget by Ultimate Store Kit.
Enable the Product Related Widget
To use the Product Related 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 Product Related Widget Name.
- Enable the Product Related Widget.
- Hit the Save Settings Button.
Inserting The Product Related widget
- Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
- Search the Product Related 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 for the definition of content and functionality to align with design goals.
Related Product Section
Go to Content > Related Products
1. Columns: Set here how many columns you want to show for the layout section.
2. Columns Gap: You can adjust the space between columns with this option.
3. Row Gaps: You can adjust the space between rows with this option.
4. Heading: Enable the switcher to show the heading by using this option.
5. Products Per Page: You can select the number of products that you want to be visible on your page.
6. Order By: It controls the data you want to display through author, approved, date, content & random.
7. Order: This option controls the order in which data is arranged. There are two types of order. Ascending Order (Starts from the smallest or lowest value and goes to the largest or highest.) & Descending Order (Starts from the largest or highest value and goes to the smallest or lowest.)
Work with the Style Tab
Heading Section
Go to Style > Heading
1. Alignment: You can set the heading position to left, center or right by using this option.
2. Color: You can change the heading color by using 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. Margin: This option allows you to adjust the space & create gaps around the heading.
Items Section
Go to Style > Items
In this section, we have two tabs. One is Normal and the other is Hover. Let’s start with the Normal tab –
1. 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.
2. Border Width: Set the thickness of the border by selecting the width.
3. Border Color: You can change the border color by using this option.
4. Border Radius: The Border Radius controls the roundness of the border.
5. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
6. Box Shadow: The Box Shadow property is used to create the shadow around the itmes. It has 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.
7. Alignment: You can change the position of the content to left, center or right by using this option.
Now, let’s proceed to the Hover tab –
1. Border Color: You can change the border hover color by using this option/
2. Box Shadow: You can make changes to the hover box shadow by using this option.
Image Section
Go to Style > Image
In this section, we have two tabs. One is Normal and the other is Hover. Let’s start with the Normal tab –1. Background Type: You can change background type here. There are two options in background type. These are Classic & 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 gradient adapts to different screen sizes. Also, you can change the gradient type (Radial & Linear) and positions.
2. Color: You can change the background color by using this option.
3. Image: You can add an image to the background by using this option.
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, dots, dashes, and grooves.
5. Border Width: Set the thickness of the border by selecting the width.
6 Border Color: You can change the border color by using this option.
7. Border Radius: The Border Radius controls the roundness of the border.
8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
9. Box Shadow: You can add a box shadow to the image and customize the shadow with this option.
Now, Let’s Proceed to the Hover Tab –
10. Background Type: You can select the background type to classic or radiant. Here we selected the classic.
11. Color: You can change the background hover color by using this option.
12. Image: You can set a background hover image by using this option
13. Border Type: You can add and select various types of borders here.
14. Border Width: Set the thickness of the border with this option.
15. Border Color: You can change the border color by using this option.
16. Border Radius: The Border Radius controls the roundness of the border.
17. Box Shadow: You can add a hover box shadow & customize the shadow with this option.
Title Section
Go to Style > Title
1. Color: You can change the title color by using this option.
2. Hover Color: You can change the title hover color by using this option.
3. Margin: This option allows you to adjust the space & create gaps around the title.
4. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
Rating Section
Go to Style > Rating
1. Color: You can change the rating star color with this option.
2. Active Color: You can change the rating star active color with this option.
Price Section
Go to Style > Price
1. Regular Color: You can change the regular color with this option.
2. Sale Color: You can change the sale color by using this option.
3. Margin: This option allows you to adjust the space & create gaps around the heading.
4. Typography: Change the price’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Add To Cart Section
Go to Style > Add to Cart
In this section, we have two tabs. One is Normal and the other is Hover. Let’s start with the Normal tab –
1. Color: You can change the button text color by using this option.
2. Background Color: You can change the button’s background color by using this option.
3. Border Type: You can add the button border with this option.
4. Border Width: Set the thickness of the border by using this option.
5. Border Color: You can change the border color with this option.
6. Border Radius: The Border Radius controls the roundness of the border.
7. Padding: Padding allows you to control the internal space inside the button.
8. Margin: By using this option, you can add/remove space from the margin around the button.
9. Typography: Change the button 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 –
1. Color: You can change the hover color of the button text with this option.
2. Background Color: You can change the button background hover color with this option.
3. Border Type: You can change the border type with this option.
4. Border Width: Set the thickness of the border with this option.
5. Border Color: You can change the border color with this option.
Sale Flash Section
Go to Style > Sale Flash
1. Sale Flash: Enable the switcher to show the sale flash with this option.
2. Text Color: You can change the sale flash text color with this option.
3. Background Color: You can change the sale flash background color with this option.
4. Typography: Change the sale flash button text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
5. Border Radius: The Border Radius controls the roundness of the border.
6. Width: You can change the sale flash icon width with this option.
7. Height: You can change the sale flash icon height with this option.
8. Position: This option allows you to change the sale flash icon position to left or right.
9. Distance: This option allows you to control the sale flash icon distance within the item box.
All done! You have successfully customized the Product Related widget on your website.
Video Assist
The video will come soon. Please visit the demo page for examples.
Thanks for being with us.
