WCSpots – image hotspots for WooCommerce

<p>Here's a screenshot of the newly-added WCSpots block using the inserter. The basic block layout prompts you to upload (or select an existing) image, choose products from the sidebar in block settings, and add an optional title and description to the block.</p>

<p>Select an image to showcase the product and choose the products to include. Also, you can set the basic settings and styles, add a title and description, and the next step is to place the hotspots and assign products to each one. To add hotspots, you just need to click on the image.</p>

<p>After you added the hotspots, and double-click on each one, a modal prompt appears with a selection of products. Once you choose a product, the hotspot will be linked to it.</p>

<p>Once you've assigned a product to a hotspot, a popover with the product details immediately appears. In the editor, the popover's visibility can be toggled only by clicking on the hotspot. This allows for easy visual control of changing popover properties and styles. On the frontend, the popover can be disabled by clicking anywhere on the page.</p>

<p>You can change the appearance of the block using intuitive controls located under the block settings and styles tabs. In the "Settings" tab, you'll find product and image selection, as well as layout properties for products, images, and popovers. Meanwhile, under the "Styles" tab, you can adjust colors, sizes, spacings, and other style properties.</p>

<p>The WCSpots block in action on the frontend, showing off the products with the showcase image and hotspots.</p>

<p>Showcasing audio product, with different layout and hotspot styles.</p>

<p>Showcasing cosmetic products, with variation of popup style, this time without the product image.</p>