On hover woocommerce product thumbnail change flickity gallery flatsome theme

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

How music shapes the way we play video games

February 26, 2022

Building a Southwest Pacific regional organization

February 25, 2022

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!