Hướng dẫn cách khi hover vào ảnh của thư viện ảnh sản phẩm thì các ảnh bên trên di chuyển theo bằng code.

Các bạn vào đường dẫn:
Giao diện > sửa giao diện > function.php
Và dán đoạn code này vào là được:
function hover_slider_alowebtot(){;?>
<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_alowebtot',0);
Như vậy là đã hoàn thành rồi, các bạn ra hover vào các ảnh con bên dưới ảnh sản phẩm xem đã được chưa nhé.
tham khảo: pttuan410.com/cach-hover-chuyen-anh-gallery-cua-woocommerce-danh-cho-theme-flatsome/
Bùi Anh hiện đang là tác giả viết Blog cho Alowebtot. Luôn không ngừng học hỏi, tìm kiếm và chia sẻ cho cộng đồng WordPress những kiến thức mới hơn, tối ưu hơn và tốt hơn.