If you feel clicking to product thumbnail is not really interested, you may need this jquery code snipet to change flatsome flickity gallery on hover product thumbnail of woocommerce single product page.
The flatsome theme is using Flickity for it’s sliders. So i looked around Flickity guides to write this snippet. You needn’t to click, just hover product thumbnail, the gallery will change automatically. And here is my code:
You might also like
ADVERTISEMENT
function hitet_flatsome_hover_thumb_change_gallery(){;?>
<script>
jQuery(document).ready(function($) {
var slidermain = $('.woocommerce-product-gallery__wrapper').flickity({"cellAlign": "center","wrapAround": true,"autoPlay": false,"prevNextButtons":true,"adaptiveHeight": true,"imagesLoaded": true,"lazyLoad": 1, "dragThreshold" : 15,"pageDots": false,"rightToLeft": false
});
var slidernav = $('.product-thumbnails').flickity({
asNavFor: '.product-gallery-slider',contain: true,pageDots: false,
});
slidernav.on( 'mouseover', '.col', function( event ) {
var index = $( event.currentTarget ).index();
slidermain.flickity( 'select', index );
});
});
</script>
<?php }
add_action('wp_footer','hitet_flatsome_hover_thumb_change_gallery',0);
How to use:
Paste the code to current theme functions.php then enjoy the show!
