Nếu bạn cảm thấy việc click vào thumnail thì hình ảnh của product quá nhàm chán thì bạn có thể sử dụng đoạn code dưới đây để bớt nhàm chán nhé.

Hover thumbnail ảnh sẽ tự thay đổi.

Flatsome hiện tại đang sử dụng thư viện Flickity để làm slider, vì vậy mình đã tìm DOC của nó để đọc vào thực hiện được 1 đoạn code khá hay, bạn không cần phải click, chỉ cần hover là ảnh sản phẩm sẽ tự động thay đổi. Các bạn follow đoạn code sau để có thể làm được việc này nhé.

Dán vào function nhé

Code vào functions.php
function hover_slider_pttuan(){;?>
 <script>
jQuery(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','hover_slider_pttuan',0);

Và tận hưởng kết quả của mình đi nào.

Donate ủng hộ tinh thần

Có bất kì câu hỏi nào thì hãy gửi về cho mình nhé, mình sẽ cố gắng giải đáp trong thời gian sớm nhất

Ủng hộ mình một ly cà phê nhé: Vì đầy là động lực để mình có thể giúp đỡ mọi người nhé.

Ủng hộ bằng momo: