The gallery made on Slick. Part of the code is peeped here
So, the code is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <?php function woocommerce_archive_gallery() { global $product; $post_ids = $product->get_id(); $attachment_ids = $product->get_gallery_attachment_ids(); echo '<div class="mainimg feature-slider-'; echo $post_ids; echo '">'; echo '<div>'; echo get_the_post_thumbnail( $post->ID, 'shop_single', $attributes ); echo '</div>'; foreach( $attachment_ids as $attachment_id ) { echo '<div>'; echo wp_get_attachment_image( $attachment_id, 'shop_catalog' ); echo '</div>'; } echo '</div>'; echo '<div class="thumb thumbnail-slider-'; echo $post_ids; echo '">'; echo '<div>'; echo get_the_post_thumbnail( $post->ID, 'shop_single', $attributes ); echo '</div>'; foreach( $attachment_ids as $attachment_id ) { echo '<div>'; echo wp_get_attachment_image( $attachment_id, 'shop_catalog' ); echo '</div>'; } echo '</div>'; ?> <script> $(document).ready(function() { $('.feature-slider-<?php echo $post_ids; ?>').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false }); $('.thumbnail-slider-<?php echo $post_ids; ?>').slick({ slidesToShow: 4, slidesToScroll: 1, asNavFor: '.feature-slider-<?php echo $post_ids; ?>', dots: false, centerMode: true, focusOnSelect: true }); }); $('.slick-slide').mouseover(function(){ $(this).click(); }); </script> <?php } remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ); //Убираем вывод картинки по умолчанию add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_archive_gallery', 8 ); |
It is enough to insert this code into the functions.php of your theme. You also need to connect scripts Slick slider.