A professional WordPress plugin that transforms static product images into interactive, clickable experiences with intelligent popup overlays. Built specifically for WooCommerce stores, this plugin enables merchants to create engaging visual product presentations where customers can explore multiple products within a single showcase image through intuitive hotspot interactions.
Technologies Used
- Backend: PHP 7.4+, WordPress 6.0+ APIs, WooCommerce integration
- Frontend: Vanilla JavaScript (jQuery), HTML5, CSS3
- Database: WordPress wpdb abstraction layer with custom tables
- Architecture: Object-oriented PHP with singleton pattern
- Admin Interface: WordPress native UI components, media uploader, color picker
- Styling: Scoped CSS with unique identifiers, responsive design with media queries
- Positioning: Fixed positioning with viewport-aware calculations
Key Features
🎯 Interactive Hotspots
- Click-to-reveal product information overlays
- Smooth pulse animations to draw attention
- Unlimited hotspots per showcase image
- Drag-and-drop positioning in admin panel
- Real-time preview during creation
🎨 Customizable Design
- Color picker for hotspot background and icon colors
- Customizable button text for CTAs
- Automatic theme adaptation
- Professional animations and transitions
- Responsive design for all screen sizes
🛍️ WooCommerce Integration
- Direct product search from WooCommerce catalog
- Automatic product data import (title, image, URL)
- Custom product descriptions per hotspot
- Product thumbnail displays in popups
- Direct links to product pages
📱 Smart Responsive Positioning
- Desktop: Right-aligned popups with left fallback
- Mobile: Below-hotspot centered popups
- Intelligent overflow detection and adjustment
- Scroll-aware positioning that tracks viewport
- Arrow indicators showing hotspot relationship
💾 Database Architecture
- Custom tables for showcase storage
- JSON-based hotspot data structure
- Settings management system
- Efficient queries with prepared statements
- Support for multiple showcase instances per page
🔒 Security Implementation
- Nonce verification on all AJAX requests
- Capability checks (manage_options)
- Data sanitization (sanitize_text_field, esc_url_raw)
- SQL injection prevention via $wpdb->prepare()
- XSS protection (esc_html, esc_attr, esc_url)
📊 Admin Dashboard
- Three-tab interface: Design, Add Image, Images
- WordPress media library integration
- Real-time hotspot editor with visual feedback
- Shortcode generation and copy functionality
- Bulk showcase management
🎬 Advanced Features
- Multiple showcases on single page support
- Unique ID generation prevents conflicts
- HTML stripping from descriptions
- Scoped CSS prevents theme conflicts
Impact & Results
✅ User Experience Enhancement: Transformed static product images into engaging, interactive experiences that increase customer engagement time on product pages
✅ Conversion Optimization: Direct product links in popups reduce friction in the buyer journey, enabling one-click navigation to product pages
✅ Content Management: Enabled store owners to showcase multiple products in a single lifestyle image, reducing page load times compared to traditional image grids
✅ Mobile Optimization: Responsive design ensures consistent experience across all devices, with touch-optimized interactions for mobile users
✅ Developer-Friendly: Clean, documented code with proper WordPress coding standards, making it easy to extend and customize
✅ Performance: Lightweight implementation with no external dependencies beyond WordPress and WooCommerce, minimal impact on page load times
✅ Accessibility: Keyboard navigation support, semantic HTML structure, and screen reader compatibility
Installation & Usage
- Upload plugin to
/wp-content/plugins/interactive-product-showcase/ - Activate via WordPress admin panel
- Configure design settings (colors, button text)
- Upload product showcase image
- Click image to add hotspots and link to WooCommerce products
- Copy generated shortcode:
[ips_showcase id="X"] - Paste shortcode into any page/post
Technical Specifications
- Database Tables: 2 custom tables (showcases, settings)
- AJAX Endpoints: 4 (save_settings, save_showcase, delete_showcase, search_products)
- File Structure: 10+ organized PHP classes and assets
- Shortcode System: Dynamic rendering with inline CSS/JS
- Popup Width: 220px (consistent across desktop/mobile)
- Hotspot Size: 26px desktop, 18px mobile top-layer guarantee
- Animation: Pulse effect (2s infinite) with scale transforms
