woocommerce 3.3.5产品缩略图页面不同

Question

我对Woocomece的3.3.5版本有一个问题，特别是在product-thumbnais.php页面。

场景：我们在产品图库中有一个特色产品图像和另外5-6个图像，它们明显地显示为主图像下的产品缩略图。

现在缩略图只是堆叠在一起，似乎没有办法让这些缩略图显示在单行旋转木马中，导航箭头滚动旋转木马。

假设我想在任何给定的时间显示4个缩略图，然后单击导航箭头滚动缩略图，就像本页上的flexnav演示一样https://imgur.com/a/Geh2H

这是我的剧本

$(document).ready(function(){
$('#owl-single-product').owlCarousel({
    items:1,
    itemsTablet:[768,2],
    itemsDesktop : [1199,1]

});

$('#owl-single-product-thumbnails').owlCarousel({
    items: 4,
    pagination: true,
    rewindNav: true,
    itemsTablet : [768, 4],
    itemsDesktop : [1199,3]
});

$('#owl-single-product2-thumbnails').owlCarousel({
    items: 6,
    pagination: true,
    rewindNav: true,
    itemsTablet : [768, 4],
    itemsDesktop : [1199,3]
});

$('.single-product-slider').owlCarousel({
    stopOnHover: true,
    rewindNav: true,
    singleItem: true,
    pagination: true
});

$(".slider-next").click(function () {
    var owl = $($(this).data('target'));
    owl.trigger('owl.next');
    return false;
});

$(".slider-prev").click(function () {
    var owl = $($(this).data('target'));
    owl.trigger('owl.prev');
    return false;
});

$('.single-product-gallery .horizontal-thumb').click(function(){
    var $this = $(this), owl = $($this.data('target')), slideTo = $this.data('slide');
    owl.trigger('owl.goTo', slideTo);
    $this.addClass('active').parent().siblings().find('.active').removeClass('active');
    return false;
});

});

注意：我不知道a应该在哪里添加owl单一产品缩略图ID。

这是product-thumbnails.php页面：

if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
return;

}

全球$产品；

$attachment_ids=$product-

如果（$attachment_id）

Answer 1

您可以在functions.php文件中使用以下代码声明对WooCommerce库功能的支持：

function add_woocommerce_support() {
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'add_woocommerce_support' );