Image Hotspot Block
Easily create interactive image hotspots with WooCommerce product integration. Add tooltips and product information directly from the Gutenberg block editor.
Key Features
Easy to Use
Simply add the block to your page, add your image and products, and you're good to go! No coding required.
Easy to Customize
Control the color of dots, tooltip content, layout, and styling to create the perfect look for your site.
Performance Optimized
Scripts and styles only load when the page actually uses the block, keeping your site fast.
How to Use
Add the Block
Open a page or blog post using the Gutenberg editor and add the "Image Hotspot" block.
Choose an Image
Select the image where you want to add interactive hotspots.
Add Products
In the block options sidebar, click "Add product" and either add WooCommerce products or create custom products.
Position Hotspots
Move hotspots by holding Ctrl (or Cmd) and dragging them to the desired position.
Customize
Customize tooltip layout, content, colors, and other styling options to match your theme.
WooCommerce Integration
Seamlessly integrate with WooCommerce to automatically pull product information, images, prices, and links. Perfect for product showcases, lookbooks, and interactive catalogs.
Note: WooCommerce is not required - you can also create custom hotspots with your own content.