Product Hotspots documentation
Pin products onto a photo and let people buy from the image.
Before you start
- WordPress 6.0 or newer, WooCommerce 7.0 or newer, PHP 7.4 or newer
- Published WooCommerce products to pin — the pins read live price and stock from them
- The image itself: a lookbook photo, a furnished room, a parts diagram
What it does not do
- It does not create the products. Pins link to WooCommerce products that already exist.
- It does not edit or host images. You supply the photograph.
- It is not a 360-degree or zoom viewer. Pins sit on a flat image.
What is in the download
A WordPress plugin ZIP with the admin canvas, the front-end renderer and the block, widget and shortcode. It extends WooCommerce and takes no payments of its own.
GPL source. The tooltip markup is ordinary templates, so a developer can change what a pin shows.
Installing it
WooCommerce first. Then Plugins → Add New → Upload Plugin with the ZIP, activate, and paste the licence key from your purchase email.
If you use Elementor, the widget registers itself; nothing extra has to be enabled.
Placing pins that get clicked
Use the highest-resolution image you have. The pins are positioned relative to the image, so a small image scaled up puts every pin slightly off where the object actually is.
Fewer pins convert better than more. A photograph with four pins reads as a shoppable image; the same photograph with twenty reads as clutter and gets scrolled past.
Check the phone layout before publishing. The bottom sheet changes how much of the image is visible while a card is open, and it is worth seeing on a real handset.
Licence, updates and support
- One licence covers 1 WordPress site.
- 1 year of updates, from the date of purchase.
- 1 year of email support.
- Instant download + licence key by email
- 30-day money-back guarantee
Questions this page does not answer go to support@webkoding.com. If you bought from us and cannot find your licence key, look it up here.
Common questions
Does the price on a pin go stale?
No. Price and stock are read at render time from the product, so a pin shows what the product page shows. There is nothing to re-enter when a price changes.
Can somebody add to cart without leaving the image?
Yes, straight from the tooltip over AJAX, and the cart count updates. Sending a browsing visitor to a product page and back is where most of them stop.
What does it look like on a phone?
The tooltip becomes a full-width bottom sheet rather than a small floating card, because a floating card next to a thumb-sized pin is unusable on a phone.
How do I put a map on a page?
A Gutenberg block, an Elementor widget or a shortcode. Several maps on one page is supported.
Can the tooltip match my theme?
There are Light, Dark and Minimal themes, set per map, so a dark lookbook and a light catalogue page can use different ones on the same site.