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

Enable the Image Hotspot Widget

To use the Image Hotspot from Ultimate Store Kit Widget must be enabled. Navigate to WordPress Dashboard > Ultimate Store Kit Plugin dashboard.

1. Navigate to Other Widgets Tab.
2. Search by the Image Hotspot Widget Name.
3. Enable the Image Hotspot Widget.
4. Hit the Save Settings Button.

Inserting The Image Hotspot widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the Image Hotspot widget name.
3. The widget will appear, Check the Ultimate Store Kit logo on top right corner.
4. Select the widget then Drag 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 to define the content and functionality to align with design goals.

Image Hotspot Section

Go to Content > Image Hotspot

The layout section contains the basic controls of the featured box. Make any changes by following the instruction.

Layout

Choose the different layout available on there.

Slider

This is interesting slider layout. It It works with the slider when select the Tooltip.

1. Layout: Select the Slider layout for the image hotpsot.
2. Select any Hotspot section.
3. The Slider info will appear on the left section.

Tooltip

1. Layout: Select the Tooltip layout.
2. Hover over the Image hotspot section.
3. The hotspot info will appear as Tooltip.

Work with Tooltip Layout

1. Layout: Select the Tooltip layout.
2. Image: Select the image from the tooltip section.

3. Hotspot Type: Select the Type for the Hotspot Image. The Query based product image will appear on there.

4. Hotspot Type: Select the Type of Hotspot Icon. The Icon will appear.
5. Icon: Choose the icon from the icon library for the Hotspot.

Query Section

Go to Content > Query

1. Source: Select the source for the image hotspot.
2. Product Limit: Set the limitation for appearing the product item.
3. Select Include / Exclude for being more specify of the source.
4. Include By: Select the Include by condition( Author or Terms ). Choose the Terms.
5. Terms: Select the terms for specify. Here it will appear the Category or Tags.

Learn more about the Query.

Additional Option Section

Go to Content > Additional Options

Content Tab

1. Title: Set the title for the Content tab.
2. Title HTML Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Category: Enable the switcher to show the Category.
4. Category HTML Tag: Set any HTML Tag for Category ( H1, H2, H3, H4, H5, H6, p, span ). The Category tag is essential for both user experience and search engine optimization (SEO).

5. Rating: Enable the switcher to show the Rating of the Content. The rating appear on mouse hover over the Content.

6. Price: Enable the switcher to show the Price of the
7. Image Resolution: Set the image resolution for the image.

Badge Tab

1. Sale: Enable the switcher to show the Sale for this.
2. Percentage: Enable the switcher to show the percentage of it.
3. Stock Status: Check the stock status ( In Stock or Out of Stock ).

4. Trending: Set the product as Trending. Enable the switcher to show it.
5. New: Enable the switcher to show it new.
6. Newness Day: Select the day to appear as Newness Day.

Action Btn

1. Wishlist: Enable the switcher to show the wishlist The Wishlist appear on mouse hover over it.
2. Compare: Comparing the Product is good things. Enable it to show the compare product.
3. Quick View: Enable the switcher to Quick view. It will take new page and provide product details info.
4. Add to Cart: Enable the switcher to adding the product to the Cart.

Hotspot Settings Section

Go to Content > Hotspot Settings

1. Hotspot item will appear on there, Click on it and item will toggle.
2. X Position: Adjust the position of Horizontally.
3. Y Position: Set the position of it Vertically.
4. Hotspot Style: Select the style for the Hotspot.
5. Background Color: Set the background color of it.

6. Add more item by clicking on the “ + Add Item ” button.

Tooltip Settings Section

Go to Content > Tooltip Settings

Animation

1. Animation: Different tooltip animation appear on there. Select the Shift-Away, Shift-Toward, Fade, Scale, Perspective animation style from there.

Placement

2. Placement: Select the placement position for the tooltip. Available placement is Top Left, Top, Top Right, Bottom Left, Bottom, Bottom Right, Left, Right.

Other Controls

3. Offset: Set the offset position for the Tooltip settings.
4. Distance: Set the distance of it.
5. Arrow: Enable the switcher to show the Arrow.

6. Trigger on Click: Enable the switcher to enable it by clicking on the rtigger.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

Image Hotspot Section

Go to Style > Image Hotspot

Normal Tab

1. Background Type: Set the background type color.
2. Border Type: Set the type of the border ( None, Solid, Dashed, Dotted, Double ).
3. Border Width: Set the width for the border. It’s thickness of the border.
4. Border Color: Set the color for the border.

5. Border Radius: Set the border corner edges round by following the border.
6. Size: Set the size of the border.

7. Shadow Pulse Color: Set the color for the image hotspot.
8. Shadow Pulse Size: Set the size for the shadow pulse. It’s a special effect of animation.

Hover Tab

1. Background Type: Set the Background type color for the hover overing the image hotspot.
2. Color: Set the color of it.
3. Shadow Pulse Color: Set the shadow pulse color. It will reflect on mouse hover.

Product Items Section

Go to Style > Product Items

1. Background Type: Select the type for the Background color for the product items.
2. Border Type: Select the type for the border.
3. Border Width: Set the thickness of the border.
4. Border Color: Set the color for the border.

5. Border Radius: Set the radius for the border.
6. Padding: Set the padding for the inner space of the content.
7. Width: Set the width of the content. Set it with % or px.

Hover Tab

1. Background Type: Set the background type color for the image
2. Border Color: Set the border color.

Image Section

Go to Style > Image

Normal Tab

1. Background Type: Set the background type color for the image.
2. Border Type: Set the border type.
3. Border Radius: Make the border corner radius.
4. Padding: Set the padding for the image.

Hover Tab

1. Background Type: Set the background type for the image.
2. Border Type: Set the border type.
3. Border: Set the border for the image.

Content Section

Go to Style > Content

Normal Tab

1. Background Type: Set the background type for the content.
2. Border Type: Set the border type.
3. Border Width: Set the width for the border.

4. Border Color: Set the color for the border.
5. Border Radius: Set the border radius.
6. Padding: Set the padding for the content.

Hover Tab

1. Background Type: Set the background type for the content.
2. Border Color: Set th border color.

Title Section

Go to Style > Title

1. Color: Set the color for the Title.

3. Margin: Set the margin for the title.
4. Typography: Set the typography for the title.

2. Hover Color: Set the hover color for the title.

Category Section

Go to Style > Category

Normal Tab

1. Color: Set the color for the category text.
2. Background Type: Select the background type color and set the color for the background.
3. Border Type: Different border type are available select any e.g: Solid, Dashed. Dotted. Double.
4. Border Width: Select the thickness of the border select the border width.

5. Border Color: Select the border color of the category.
6. Border Radius: Make the border edges rounded by setting the border radius.
7. Padding: Set the padding for the inner space.
8. Margin: Set the margin for outer space.

9. Space Between: Make spaces between the categories.
10. Typography: Set the typography of it.
11. Box Shadow: Set the box shadow for the category.

Hover Tab

1. Color: Select the hover color for the category.
2. Background Type: Set the background type color for this.
3. Border Color: Set the border color.

Price Section

Go to Style > Price

1. Regular Color: Set the Regular Price Color of the Products.
2. Sale Color: Select the Sale color from the section.
3. Margin: Set spacing around by inputting the value of margin.
4. Typography: Select the Typo for the Regular and Sale text, Font family, size, weight, line height etc.

Rating Section

Go to Style > Rating

1. Color: Set the color for the Rating, The Color appear while the rating is not fill.
2. Active Color: Select the Color for the Active state of the Rating.

Badge Section

Go to Style > Badge

1. Border Type: Select the border type for the badge. Available border type is none, solid, dotted, dashed, double.
2. Border Radius: Make the border corner edges rounded by setting the border radius.
3. Padding: Set the padding for the inner space.

4. Margin: Make outer space by setting the margin.
5. Space Between: Make space between the badges. Click the sleek bar to add value.
6. Typography: Select the Typo for the Regular and Sale text, Font family, size, weight, line height etc.

Sale Badge

1. Color: Choose the color for the sale badge text.
2. Background Type: Select the background type Color and choose the color for the Sale badge.
3. Border Color: Set the border color for the Sale badge.

Discount Badge

1. Color: Choose the color for the discount badge text.
2. Background Type: Select the background type Color and choose the color for the Discount badge.
3. Border Color: Set the border color for the Discount.

Stock Badge

1. Color: Choose the color for the Stock badge text.
2. Background Type: Select the background type Color and choose the color for the Stock badge.
3. Border Color: Set the border color for the Stock.

Trending Badge

1. Color: Choose the color for the Trending badge text.
2. Background Type: Select the background type Color and choose the color for the Trending badge.
3. Border Color: Set the border color for the Trending.

New Badge

1. Color: Choose the color for the New badge text.
2. Background Type: Select the background type Color and choose the color for the New badge.
3. Border Color: Set the border color for the New.

Add to Cart Section

Go to Style > Add to Cart

Normal Tab

1. Color: Choose the color for the add to cart text button.
2. Background Type: Select the background type Color and choose the color for it.
3. Border Type: Select the border type for the add to cart button. Available border type is none, solid, dotted, dashed, double.
4. Border Width: Set the thikness of the border by setting the Width.

1. Border Color: Select the color for the border.
2. Border Radius: Make the border corner edges rounded by setting the radius.

7. Width(%): Set the width for the button. The measure will appear in percentage.
8. Height(px): Ser the height for the button. The value will add in pixel.
9. Typography: Select the Typo for the Regular and Sale text, Font family, size, weight, line height etc.

Hover Tab

1. Color: Choose the color for the Add to Cart text.
2. Background Type: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the add to cart button.

Action Button Section

Go to Style > Action Button

1. Border Type: Select the border type for the Action button. Available border type is none, solid, dotted, dashed, double.
2. Border Width: Set the thickness of the border border by selecting the width.
3. Border Color: Choose the color for the border.
4. Border Radius: Make the border corner edges rounded by setting the border radius.

5. Padding: Make inner space by setting the padding of the Action button.
6. Margin: Add outer space by adding the value of Margin.
7. Icon Size: Set the size of the Icon.
8. Tooltip Font: Select the font for the Tooltip. All the fonts are available on there.

Wishlist Button

1. Color: Choose the color for the Wishlist button.
2. Background Type: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the Wishlist button.

Hover State

1. Color: Choose the color for the Wishlist button.
2. Background Color: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the Wishlist button.

Active State

1. Color: Choose the color for the Wishlist button active state.
2. Background Type: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the Wishlist button.

Compare Button

1. Color: Choose the color for the Compare button.
2. Background Type: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the Compare button.

Hover State

1. Color: Choose the color for the Compare button.
2. Background Type: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the Compare button.

Active State

1. Color: Choose the color for the Compare button.
2. Background Type: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the Compare button.

Quickview

1. Color: Choose the color for the Quickview button.
2. Background Type: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the Quickview button.

Hover State

1. Color: Choose the color for the Quickview button.
2. Background Type: Select the background type Color and choose the color of it.
3. Border Color: Set the border color for the Quickview button.

Video Assist

Video Tutorial Coming soon!

Please visit the demo page for examples.
Thanks for being with us.