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/
Xem thêm:
- Cài đặt sản phẩm có biến thể với theme Flatsome từ phiên bản 3.14 cho website WordPress
- Thay đổi đường dẫn đăng nhập admin trong WordPress
- Hướng dẫn xóa chế độ Responsive trên thiết bị di động sử dụng Theme Flatsome
- How to adding frames to wordpress product images
- Ý nghĩa từng Template trong Woocommerce