Description
REYCOB Shop the Look connects products and exact product variations to visual hotspots placed over an image.
Each hotspot stays synchronized with its matching carousel item. Desktop visitors can hover or click, while touch devices support taps and swipe navigation. Hotspot coordinates are stored as percentages so they remain correctly positioned across screen sizes.
The scene editor includes product and variation search, drag-and-drop hotspot positioning, navigation controls, colors, image recommendations, and a shortcode for placement in Elementor, the block editor, or other page builders.
Shortcode example: [reycob_shop_the_look id=”123″]
Each scene can use its original product card or a published Elementor Loop Item template. Elementor Pro is required to create Loop Item templates. Dynamic product widgets use the product linked to each hotspot. If Elementor or the selected template is unavailable, the original card is used.
The scene editor includes font family, desktop and mobile font sizes, weight, line height, and alignment for the scene heading and product title. Font families must already be available on the website. Empty typography fields retain the existing design. Product title overrides also apply to Elementor Post Title and Product Title widgets; other template widgets remain editable in Elementor.
Installation
- Install and activate WooCommerce.
- Install and activate REYCOB Shop the Look.
- Open WooCommerce > Shop the Look and create a scene.
- Select the main scene image.
- Click the image to create hotspots and select a product or exact variation for each one.
- Drag the hotspots into position and reorder the rows to control the carousel order.
- Publish the scene and place its shortcode on a page.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“REYCOB Shop the Look” is open source software. The following people have contributed to this plugin.
Contributors
Translate “REYCOB Shop the Look” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.4.0
- Added per-scene selection of published Elementor Loop Item templates for product cards.
- Added font family, desktop and mobile size, weight, line height, and alignment controls.
- Preserves product context for dynamic widgets and restores page context after rendering.
- Falls back to the original card when the selected template is unavailable.
1.3.2
- The main scene image determines the desktop component height.
- The carousel automatically resizes to stay within the scene image height.
- Removed the empty background below shorter scene images.
1.3.1
- Added a dedicated secure endpoint for simple products and exact variations.
- Added a green confirmation state after a successful AJAX cart request.
1.3.0
- Added exact variation selection to the scene editor.
- Each hotspot can represent a specific size, color, or other attribute combination.
- Uses the selected variation image, price, stock status, and product link.
1.2.1
- Added direct AJAX cart requests independent from theme button handlers.
- Added automatic button recovery after errors or timeouts.
1.2.0
- Added per-scene navigation settings for dots, arrows, both, or neither.
- Added color controls for text, cards, prices, buttons, badges, and navigation.
- Centered carousel arrows over the product image.
- Added visible AJAX cart progress and completion states.
- Improved long titles and removed padding around product images.
- Added a recommended main image size in the scene editor.
1.1.0
- Added a compact horizontal mobile product card.
- Added square 500 by 500 pixel product image presentation.
- Added direct cart actions for available simple products and a separate product link.
- Improved long-title containment in cards and tooltips.
1.0.0
- Initial visual scene editor using the WordPress media library.
- Added unlimited draggable hotspots connected to products.
- Added AJAX product search and carousel ordering.
- Added two-way synchronization between hotspots, arrows, and dots.
- Added tooltips, sale and out-of-stock badges, mobile swipe, and responsive styling.