Product picture gallery on woocommerce category page

The gallery made on Slick.
So, the code is:

<?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.