Нужно переделать стандартное представление галереи изображений в карточке товара. Сделаем данный функционал более похожим на привычный в виде карусели.
Для этого подключаем функционал карусели slick, и создать скрипт инициализации
$(document).ready(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
autoplaySpeed: 6000,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
centerMode: true,
focusOnSelect: true
});
});Рекомендуемые стили CSS:
.slick-slider {width: 100%; float: left;}
.slider-nav .slick-slide {
background-color: #fff;
margin: 10px 5px 10px 5px;
border-radius: 3px;
padding: 3px;
}
.slick-slide {cursor: pointer;}Верстка
<div class="slider slider-for">
<div><a href="/wp-content/uploads/2016/09/teplocom-st555-1.jpg"><img src="/wp-content/uploads/2016/09/teplocom-st555-1-500x500.jpg"></a></div>
<div><a href="/wp-content/uploads/2016/09/teplocom-st555-2.jpg"><img src="/wp-content/uploads/2016/09/teplocom-st555-2-500x500.jpg"></a></div>
</div>
<div class="slider slider-nav">
<div><img src="/wp-content/uploads/2016/09/teplocom-st555-1-150x150.jpg"></div>
<div><img src="/wp-content/uploads/2016/09/teplocom-st555-2-150x150.jpg"></div>
</div>При данной структуре карусели у нас 2 контейнера. В одном меняются большие изображения по одному (изображение товара), в другом листаются превьюхи других изображений в виде миниатюр по 3 шт. Контейнеры синхронизированы. Чтобы это заработало — изменяем два файла шаблонов woocommerce: product-image.php и product-thumbnails.php
product-image.php
<?php
/**
* Single Product Image
*
* @version 2.6.3
*/
if ( ! defined( 'ABSPATH' ) ) { exit; }
global $post, $product; ?>
<div class="images slider slider-for">
<?php
if ( has_post_thumbnail() ) {
$attachment_count = count( $product->get_gallery_attachment_ids() );
$gallery = $attachment_count > 0 ? '[product-gallery]' : '';
$props = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $props['title'],
'alt' => $props['alt'],
) );
echo apply_filters(
'woocommerce_single_product_image_html',
sprintf(
'<div><a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto%s">%s</a></div>',
esc_url( $props['url'] ),
esc_attr( $props['caption'] ),
$gallery,
$image
),
$post->ID
);
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
?>
<?php global $post, $product, $woocommerce;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach ( $attachment_ids as $attachment_id ) {
$image_class = implode( ' ', $classes );
$props = wc_get_product_attachment_props( $attachment_id, $post );
if ( ! $props['url'] ) { continue; }
echo apply_filters(
'woocommerce_single_product_image_thumbnail_html',
sprintf(
'<div><a href="%s" class="%s zoom" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a></div>',
esc_url( $props['url'] ),
esc_attr( $image_class ),
esc_attr( $props['caption'] ),
wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), 0, $props )
),
$attachment_id,
$post->ID,
esc_attr( $image_class )
);
$loop++;
}
?>
</div>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>product-thumbnails.php
<?php
/**
* Single Product Thumbnails
*
* @version 2.6.3
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $post, $product, $woocommerce;
$attachment_ids = $product->get_gallery_attachment_ids();
if ( $attachment_ids ) {
$loop = 0;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
?>
<div class="slider slider-nav thumbnails <?php echo 'columns-' . $columns; ?>">
<div>
<?php $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), array(
'title' => $props['title'],
'alt' => $props['alt'],
) ); ?>
<?php echo $image; ?>
</div>
<?php
foreach ( $attachment_ids as $attachment_id ) {
$classes = array( 'zoom' );
$image_class = implode( ' ', $classes );
$props = wc_get_product_attachment_props( $attachment_id, $post );
if ( ! $props['url'] ) { continue; }
echo apply_filters(
'woocommerce_single_product_image_thumbnail_html',
sprintf(
'<div><!--<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">-->%s<!--</a>--></div>',
esc_url( $props['url'] ),
esc_attr( $image_class ),
esc_attr( $props['caption'] ),
wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
),
$attachment_id,
$post->ID,
esc_attr( $image_class )
);
$loop++;
}
?></div>
<?php
}Необходимы корректировки, т.к. для миниатюр подгружаются изображения бОльшего размера
В версии Woocommerce 3.0 данный функционал уже реализован
Новая верстка галереи для сайта
Подходит для изображений, которые разные по пропорциям и размерам. Миниатюры можно сделать 2-х видов: в виде одной линии с пролистыванием или чтобы они строились столбиками (FLEX).
Верстка (c Featured gallery):
<div id="product-gallery">
<?php $galleryArray = get_post_gallery_ids($post->ID);
if ( !empty($galleryArray) ): ?>
<div class="slider slider-for">
<a href="<?php the_post_thumbnail_url('full'); ?>"><?php the_post_thumbnail('medium'); ?></a>
<?php $galleryArray = get_post_gallery_ids($post->ID); ?>
<?php foreach ($galleryArray as $id) { ?>
<a href="<?php echo wp_get_attachment_image_url($id, 'full'); ?>"><img src="<?php echo wp_get_attachment_image_url( $id, 'medium' ); ?>"></a>
<?php } ?>
</div>
<div class="slider slider-nav">
<?php the_post_thumbnail('thumbnail'); ?>
<?php foreach ($galleryArray as $id) { ?>
<img src="<?php echo wp_get_attachment_image_url( $id, 'thumbnail' ); ?>">
<?php } ?>
</div>
<?php else: ?>
<a href="<?php the_post_thumbnail_url('full'); ?>"><?php the_post_thumbnail('medium'); ?></a>
<?php endif; ?>
</div>Скрипт slick:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: false,
asNavFor: '.slider-nav',
});
$('.slider-nav').slick({
slidesToShow: 4,
asNavFor: '.slider-for',
arrows: false,
centerMode: true,
focusOnSelect: true,
// Для миниатюр FLEX
infinite: false,
centerPadding: '0',
});Стили:
#product-gallery {position: relative; width: 500px; float:left; margin-right: 50px; margin-bottom: 30px;}
#product-gallery img {cursor: pointer;}
.slider-for {height: 500px; display: flex !important; align-items: center; border: 1px solid #eee; margin-bottom: 15px; background: red;}
/*.slider-for .slick-list {height: 500px !important;}*/
.slider-for .slick-track {display: flex;}
.slider-for .slick-slide {margin: auto; width: 100% !important;}
.slider-for .slick-slide img {width: 100%;}
.slider-nav img {padding: 5px; border: 1px solid #eee; margin: 0 7px;}
/* Для миниатюр FLEX */
.slider-nav .slick-track {
display: flex !important;
justify-content: space-between;
width: auto !important;
transform: unset !important;
flex-wrap: wrap;
}
.slider-nav .slick-track:before, .slider-nav .slick-track:after {display: none;}
.slider-nav img {width: 17% !important; margin: 0 0 15px 0;}
