altima-interactive

Altima LookBook Free provides your online store with “Shop the look” experience. First of all it is intended for online retailers who use WooCommerce.
To view demo visit http://wplookbook.u2.com.ua/ 
Altima Lookbooks Free for WooCommerce provides the next functionality:
<ol>
<li>One slider.</li>
<li>Product name, link to product page, price and stock status in hotspot, also any link with text supported</li>
<li>Up to five slides .</li>
<li>Up to three hotspots per slide.</li>
<li>2 flip and 2 fade transition effects.</li>
<li>Default link from each slide allows to define an URL linked with the areas of the slide not related with any hotspots, so effectively you can use Altima Lookbook Free as a simple slider. That default link is also clickable when a slider degrades to a simple gallery mode on small screens</li>
<li>Support of responsiveness – lookbook sliders are adaptive and resize according screen resolution</li>
<li>Mobile and touchscreens friendly – support of gestures to slide the slides</li>
</ol>
There is a more advanced version of the plug-in with unlimited number of slides and sliders and other additional features available at https://shop.altima.net.au/woocommerce-lookbook-professional.html
<h3>Requirements</h3>
<ol>
<li>Installed WordPress version 4.0 or higher</li>
<li>Installed WooCommerce 2.3.0 or higher (Tested up to 3.0.1)</li>
</ol>
<h3>WordPress Lookbook Free step by step guide</h3>
<ol>
<li>
Tab “Settings”
“Uploaded file max size (bytes)” – set limit for max file size for uploading files. For example if you interred 20 000 000 it means – you can upload files with maximum file size up to 20 MB (megabytes)
“Allowed extensions” – string with comma separated file extensions allowed to upload. Example: png,gif,jpg,jpeg
“Disallow hotspots areas overlap” – If “Yes”, will disallow hotspots areas overlap.
</li>
<li>
Tab “Lookbook Sliders”
<ul>
<li>
2.1 Edit slider
“Slider Name” – it’s required field to identify slider.
“Slider Width (px)” / “Slider Height (px)” – dimensions in pixels for slider, it’s required fields.
“Slider Thumbnail Width (px)” / “Slider Thumbnail Height (px)” – dimensions in pixels for slider thumbnails, it’s required fields too.
“Transition effect” – you can select one or multiple effects (keep CTRL pressed) from the list.
“Show navigation” – this option activate navigation layer under the pictures – and right arrows and stop/play button.
“Navigation on hover state only” – if “Yes” than navigation appears only if mouse will be over the slider area.
“Show thumbnails” – control to show or hide thumbnails under the slides.
“Deny resize images” – if you select “Yes” pictures will not resize after upload, it’s have reason if you uploaded already prepared pictures for slider dimensions, otherwise for good result select option “No” and thumbnails will be resized automatically.
“Pause” – time in milliseconds (1000 – 1s) before pictures will change, required fields.
“Transition duration” – time in milliseconds, sets the duration of transition between the slides.
“Content Before” – text before slider.
“Content After” – text after slider.
“Status” – enable/disable slider publication.
“Show Slide Caption” – showing caption on the slide.
Note: If you change slider or thumbnail dimensions it affects all already uploaded pictures(of course if “Deny resize images” – in “No” state).
</li>
<li>
2.2 Manage Slides
On this page placed ordered list of all slides.
<ul>
<li>
2.2.1 Add slide
“Name” – arbitrary text field, but required.
“Caption” – text for slide caption
“Order” – numeric field to assign the order of slides, lower order means priority to display
“Link” – default url address, for situation when user clicks outside hotspot areas or when the slider degraded to simple gallery. Must start with http://.
</li>
</ul>
“Status” – enable/disable slide in slider.
“Upload file” – field for picture files.
</li>
</ul>
</li>
<li>
Hotspot point
<ol>
<li>
After slide image is uploaded, “Add Hotspot” button appears below the image
</li>
<li>
Click to “Add Hotspot” to open dialog popup window, where you can select one of 2 type hotspot
a – Product page
b – External page
</li>
<li>
For type “Product page” – you should input id of post, page or product from woocommerce shop plugin. If page/product/post with this id doesn not exist, you will see warning message.
</li>
<li>
For type “External page” – you should input right url link for external page and title for this link.
</li>
<li>
In edit mode hotpoint is draggable so you can place it on any places on picture.
</li>
<li>
Also you can resize area around hotspot, it’s area that activates hotspot for your website visitors
</li>
</ol>
</li>
<li>
Inserting the Slider
<ul>
<li>
4.1 Inserting the Slider into the Post or Page.
You should use shortcode. The shortcodes takes the following form: 
 [slider_render slider_id=”1″]
</li>
<li>
4.2 Inserting the Slider into the template.
The shortcode can be easily inserted into a template/theme which corresponds to the WordPress standards. 
It can be done by inserting the following shorcode:
<pre><code><?php echo do_shortcode('[slider_render slider_id="1" admin=true]'); ?>
</code></pre>
or for WP version bigger than 5.4
 
For shortcode possible 1 additional boolean parameter admin=true|false,
if true – in slider will output all slides outside of slide parameter “Status”.
</li>
</ul>
</li>
</ol>

Altima Lookbook Free for WooCommerce

The plug-in allows WooCommerce merchants to create slider/carousel with multiple clickable tag points per slider images.

azexo

Frontend page builder with image map editor and HTML source editing possibility.
<a href="https://www.youtube.com/playlist?list=PLgb-qaKNfugFNm2gRvl1CsSinlMqRN4cH" rel="nofollow ugc">Demo Videos</a>
<h4>Addons</h4>
<ul>
<li><a href="https://1.envato.market/b9J4x" rel="nofollow ugc">Availability Image Map</a> – for Apartment Complex presentation. <a href="http://azexo.com/" rel="nofollow ugc">Preview</a></li>
<li><a href="https://wordpress.org/plugins/elastik-page-builder/" rel="ugc">Elastik elements and sections</a> – free version. <a href="http://azexo.com/elastic/" rel="nofollow ugc">Preview</a></li>
<li><a href="https://wordpress.org/plugins/mynx-page-builder/" rel="ugc">Mynx elements and sections</a> – free version. <a href="http://azexo.com/mynx/" rel="nofollow ugc">Preview</a></li>
<li><a href="https://wordpress.org/plugins/cost-calculator-by-azexo/" rel="ugc">Form Builder</a> – with flexible cost calculator builder</li>
<li><a href="https://wordpress.org/plugins/popup-builder-by-azexo/" rel="ugc">Popup Builder</a> – building in frontend (useful for high quality complex designs)</li>
<li><a href="https://wordpress.org/plugins/marketing-automation-by-azexo/" rel="ugc">Marketing Automation</a> – drip marketing, abandoned cart, autoresponder and many more</li>
</ul>
<h4>Image Map builder</h4>
<iframe loading="lazy" class="youtube-player" width="640" height="360" src="https://www.youtube.com/embed/MiOC830wqN8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe>
Place locations, add text, yeah sure – that’s true. But that’s where the ordinary stops. Image Map by AZEXO comes with its own feature rich web app, so you can quickly and easily create the most comprehensive selection of custom image maps, pins, SVG and polygon shapes, and immediately export them to your website.
<h4>Main features</h4>
<ul>
<li>CSS styles – fast editing.</li>
<li>Responsive design – fast editing.</li>
<li>Unlimited nested layouts.</li>
<li>Image/SVG Map editing.</li>
<li>Photoshop-like page building (dragging layers).</li>
<li>Parallax background.</li>
<li>Video background.</li>
<li>Gradient background.</li>
<li>Shape dividers.</li>
<li>Layered overlays.</li>
<li>WordPress Widgets – supported.</li>
<li>Any masonry grid layouts – fast building.</li>
<li>Any slider layouts – fast building.</li>
<li>Contact form – fast building with any layout.</li>
<li>Anchors menu – fast building.</li>
<li>Sticky header – fast building with any layout.</li>
<li>Classic table – fast building with any contents.</li>
<li>Hover overlay – fast building with any layout and with animations.</li>
<li>Modal dialog – fast building with any layout.</li>
<li>Scroll animation – simple and flexible.</li>
<li>Blank Page Template – with header and footer possibility.</li>
<li>Integrated with Elementor page builder plugin</li>
</ul>
<h4>Documentation</h4>
<ul>
<li><a href="https://www.youtube.com/playlist?list=PLgb-qaKNfugFNm2gRvl1CsSinlMqRN4cH" rel="nofollow ugc">Video Tutorials</a></li>
<li><a href="http://azexo.com/builder-documentation" rel="nofollow ugc">How to make elements and sections for builder</a></li>
</ul>

Page Builder with Image Map by AZEXO

Frontend page builder with image map editor and HTML source editing possibility.

Altima Lookbook Free for WooCommerce vs Page Builder with Image Map by AZEXO