In this documentation, we will show you how to customize the Single Product (Page) widget by Ultimate Store Kit.
Enable the Single Product (Page) Widget
To use the Single Product (Page) 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 Single Product (Page) Widget Name.
- Enable the Single Product (Page) Widget.
- Hit the Save Settings Button.
Inserting the Single Product (Page) widget
- Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
- Search the Single Product (Page) widget.
- Drag the widget and drop it on the editor page
Work with the Style Tab
Product Title Section
Go to Style > Product Title
1. Color: You can change the product title color with this option.
2. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Product Price Section
Go to Style > Product Price
1. Color: You can change the product price color with this option.
2. Typography: Change the price’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Product Description Section
Go to Style > Product Description
1. Color: You can change the description text color with this option.
2. Typography: Change the text’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 with this option.
2. Background Color: 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.
3. Color: You can change the background color with 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 with this option.
6. Border Color: This option allows you to change the border color.
7. Border Radius: The Border Radius controls the roundness of the border.
8. Size: This option allows you to change the button size from small to large.
9. Typography: Change the button text’s font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
10. 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.
Now let’s proceed to the Hover Tab –
11. Color: You can change the button text hover color with this option.
12. Border Color: You can change the border hover color with this option.
13. Background Type: You can change the background type to classic or gradient with this option.
14. Color: This option allows you to change the background color.
Quantity Field Section
Go to Style > Quantity Field
1. Width: This option allows you to change the width of the quantity field button.
2. Color: You can change the quantity color with this option.
3. Background type: You can change the background type to classic or gradient with this option.
4. Color: You can change the background color with this option.
5. Border Type: You can change the border type with this option.
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: The Border Radius 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: This option allows you to adjust the space & create gaps around the quantity field.
11. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
12. Box Shadow: You can add a shadow with this option.
Tabs Item Section
Go to Style > Tabs Item
1. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
2. Margin: This option allows you to adjust the space & create gaps around the tabs item.
3. Typography: Change the text’s font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
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 with this option.
6. Border Color: You can change the border color with this option.
7. Border Radius: The Border Radius controls the roundness of the border.
In this section, we have three tabs. These are Normal, Hover & Active. Let’s start with the Normal tab –
1. Color: You can change the tab text color with this option.
2. Background Color: You can change the background color with this option.
3. Color: You can change the background color with this option.
4. Image: You can add/change the background image with this option.
Now, let’s proceed to the Hover Tab –
1. Color: You can change the tabs text hover color with this option.
2. Background Type: This option allows you to change the background type to classic or gradient. Here we selected classic.
3. Color: You can change the background hover color with this option.
4. Image: You can change the background image with this option.
5. Border Color: You can change the border hover color with this option.
Now, let’s proceed to the Active Tab –
1. Color: You can change the tabs text active color with this option.
2. Background Type: This option allows you to change the background type to classic or gradient. Here we selected classic.
3. Color: You can change the background active color with this option.
4. Image: You can set a background image with this option.
5. Border Color: You can change the active border color with this option.
6. Active line color: This option allows you to add and change active line color.
Tabs Content Section
Go to Style > Tabs Content
1. Color: You can change the content color with this option.
2. Background Color: This option allows you to change the background type to classic or gradient. Here we selected classic.
3. Color: You can change the content background color with this option.
4. Image: You can set a background image with this option.
5. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
6. Border Radius: The Border Radius controls the roundness of the border.
7. Border Type: You can change the border type with this option.
8. Border Width: Set the thickness of the border with this option.
9. Border Color: You can change the border color with this option.
Related Product Section
Go to Style > Related Product
In this section, we will get four more sub-section. Let’s explore those one by one.
Heading Sub Section
1. Color: You can change the heading color with this option.
2. Typography: Change the heading’s text font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
3. Margin: This option allows you to adjust the space & create gaps around the badge.
Title Sub Section
1. Color: You can change the title color with this option.
2. Typography: Change the title’s text font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
Price Sub Section
1. Color: You can change the price color with this option.
2. Typography: Change the price’s text font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
Cart Sub Section
1. Color: You can change the cart text color with this option.
2. Background: You can change the cart background color with this option.
3. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
4. Typography: Change the cart’s text font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
Variation Swatches Section
Go to Style > Variation Swatches
1. Label Color: You can change the label color with this option.
2. Right Spacing: You can adjust the space between the label & the icon with this option.
3. Label Typography: Change the label’s text font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
In this section, we have three tabs. These are Normal, Hover & Active. Let’s start with the Normal tab –
1. Text Color: You can change the text color with this option.
2. Background Type: There are two types of background. These are Classic & Gradient. Here we selected classic.
3. Color: You can change the background color with this option.
4. Border Type: You can add & select the border type with this option.
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 with this option.
8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
9. Gap: This option allows you to adjust the space between the icons.
10. Box Shadow: You can add shadow with this option.
11. Typography: Change the icon’s text font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
12. Reset Text Color: You can change the reset text with this option.
13. Left Spacing: You can adjust the space of the reset text with this option.
14. Typography: Change the reset text font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
Now let’s proceed to the Hover Tab –
1. Text Color: You can change the text hover color with this option.
2. Background Type: There are two types of background. These are Classic & Gradient. Here we selected classic.
3. Color: You can change the background hover color with this option.
4. Border Color: You can change the border hover color with this option.
5. Box Shadow: You can make changes to the hover shadow with this option.
Now let’s proceed to the Active Tab –
1. Text Color: You can change the text active color with this option.
2. Background Type: There are two types of background. These are Classic & Gradient. Here we selected classic.
3. Color: You can change the background active color with this option.
4. Border Color: You can change the border active color with this option.
5. Box Shadow: You can make changes to the active shadow with this option.
Quantity Plus Minus Section
Go to Style > Quantity Plus Minus
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 icon color with this option.
2. Background type: There are two types of background. These are Classic & Gradient. Here we selected classic.
3. Color: You can change the background color with this option.
4. Border Type: You can add & select the border type with this option.
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. 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 shadow with this option.
10. Icon Size: You can make changes the size of quantity plus minus button with this option.
Now, let’s proceed to the Hover tab –
1. Color: You can change the icon hover color with this option.
2. Background type: There are two types of background. These are Classic & Gradient. Here we selected classic.
3. Color: You can change the background hover color with this option.
4. Border Color: You can change the border hover color with this option.
5. Box Shadow: You can make changes to the hover shadow with this option.
Sale Badge Section
Go to Style > Sale Badge
1. Color: You can change the sale badge text color with this option.
2. Background Type: Here you can select the background to classic or gradient. We selected classic.
3. Color: This option allows you to change the background color.
4. Image: You can set an image in the background with this option.
5. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
6. Margin: This option allows you to adjust the space & create gaps around the badge.7. Border Radius: The Border Radius controls the roundness of the border.
8. Typography: Change the badge’s text font family, size, weight, transform, style, decoration, line height, letter spacing & word spacing from here.
All done! You have successfully customized the Single Product (Page) widget on your website.
Video Assist
The video and demo will come soon.
Thanks for being with us.
