In this documentation, we will show you how to customize the Product Image widget by Ultimate Store Kit.

Enable the Product Image Widget

To use the Product Image widget by Ultimate Store Kit, first, you have to enable the widget.

1. Go to WordPress > Ultimate Store Kit Plugin dashboard.
2. Then Click the WC Widgets Tab.
3. Search the Product Image (Single) Widget Name.
4. Enable the Product Image (Single) Widget.
5. Hit the Save Settings Button.

Inserting The Product Image Widget

1. Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
2. Search the Product Image widget.
3. Drag the widget and drop it on the editor page.

Work with the Style Tab

Product Image Section

Go to Style > Product Image

1. Sale Flash: Enable/disable the Sale Flash switcher to show/hide the sale badge on the image.
2. 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.
3. Color: You can set the background color by using this option.
4. Image: You can select a background image by using this option.

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 by selecting the width.
7. Border Color: You can set the border color by using this option.
8. Border Radius: The Border Radius controls the roundness of the border.
9. Spacing: This option allows you to adjust the space between the product image and the thumbnails.

Thumbnails Sub-Section

10. 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.
11. Border Width: Set the thickness of the border by selecting the width.
12.  Border Color: You can set the border color by using this option.
13. Border Radius: The Border Radius controls the roundness of the border.
14. Spacing: This option allows you to adjust the space between the thumbnail images.

All done! You have successfully customized the Product Image widget on your website.

Video Assist

The video will come soon. Please visit the demo page for examples.

Thanks for being with us.