In this documentation guide, you will learn how to build interactive, shoppable image showcases using the Woo Products Hotspot modul. This guide demonstrates how to upload lifestyle imagery, place clickable or hoverable hotspot pins, link WooCommerce products, and style product preview tooltips.

Step-by-step setup guide

1. Add the Woo Products Hotspot module to your page.
2. Under the Content Tab, upload your main lifestyle or background image.
3. Click Add New Hotspot Item to place a pin marker.
4. Search and select a WooCommerce product for this hotspot pin.
5. Drag or adjust the X-Axis (%) and Y-Axis (%) positioning sliders to align the pin over the corresponding item in the image.
6. Customize the tooltip content (Title, Price, Add to Cart button).
7. Design the pin pulse effect and tooltip styling under the Design Tab.

Detailed settings reference

A. Content tab

1. Main Canvas Image

• Image Upload: Upload or choose a high-resolution background photo from your Media Library.
• Image Alt Text: Provide accessibility alt text for SEO.

2. Hotspot Pin Items (Child Item Settings)

• Select Product: Choose the linked WooCommerce product for this hotspot.
• Pin Position X-Axis (%): Position the pin horizontally from left (0%) to right (100%).
• Pin Position Y-Axis (%): Position the pin vertically from top (0%) to bottom (100%).
• Pin Label / Icon: Choose default icon, custom upload icon, or text label (e.g., +, 1, $49).
• Trigger Event: Choose whether tooltip pops up on Hover or Click.
• Tooltip Direction: Set popup direction (Top, Bottom, Left, Right, or Auto).

3. Tooltip Content Options

• Show Product Thumbnail: Display product preview image in the popup card.
• Show Product Title: Turn product title display On/Off.
• Show Product Price: Show live price including sale price updates.
• Show Product Rating: Display star ratings.
• Show Add to Cart / View Details Button: Allow customers to add item directly to cart or open product page.

B. Design Tab

• Pin Marker Styling:
  • Pin Background Color: Primary color of hotspot marker.
  • Pin Icon Color: Color of icon or text inside the marker.
  • Pulse Animation: Enable/Disable pulsating wave animation behind the pin marker to draw visitor attention.
  • Pulse Wave Color: Customize the glow or expanding ring color.
  • Pin Radius and Shape: Adjust border radius to make pins circular, square, or custom badge shape.
• Tooltip Card Styling:
  • Tooltip Background Color: Set popup background color (supports semi-transparent RGBA / Glassmorphism).
  • Tooltip Padding and Border Radius: Control box curve and inner padding.
  • Tooltip Box Shadow: Apply subtle drop shadow for depth.
  • Tooltip Pointer Arrow: Customize arrow pointer color pointing to the marker.
• Tooltip Typography and Button Styling:
  • Adjust typography for Title, Price, and CTA Button inside the tooltip.

C. Advanced tab

• Z-Index: Control layering order so tooltips always pop up over surrounding modules.
• Custom CSS: Add specific CSS rules for pins, pulse animations, or tooltip popups.

Was this article helpful?

0 out Of 5 Stars

5 Stars		0%
4 Stars		0%
3 Stars		0%
2 Stars		0%
1 Stars		0%

5 Submit

How can we improve this article?

Please submit the reason for your vote so that we can improve the article.

Name

Email

Submit