Главная / Блог / Галерея изображений товара на странице категории woocommerce

Блог

Галерея изображений товара на странице категории woocommerce

Галерея выполнена на Slick. Часть кода подсмотрена тут
Итак, код:

<?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 );

<?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>';

$(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 );

Достаточно вставить этот код в functions.php вашей темы. Так же нужно подключить скрипты Slick слайдера.

Post Views: 6 909

+359-87-701-35-06

vchuy.develop@gmail.com