Question

我对woocomerce的3.3.5版本有疑问，特别是在product-thumbnais.php页面中。

场景：我们在产品库中提供了特色产品图片和其他5-6张图片，这些图片显然显示为主要图片下方的产品缩略图。

现在，缩略图彼此之间只是堆叠在一起，似乎无法将这些缩略图显示在单行轮播中，而导航箭头可以滚动该轮播。

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

这是我的脚本

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

}）;

注意：我不知道应该在哪里添加猫头鹰-单产品-缩略图ID。

这是product-thumbnails.php页面：

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

}

全局$ product;

$ attachment_ids = $ product-> get_gallery_image_ids（）;

if（$ attachment_ids && has_post_thumbnail（））{ foreach（$ attachment_ids as $ attachment_id）{ 回声apply_filters（'woocommerce_single_product_image_thumbnail_html'，wc_get_gallery_image_html（$ attachment_id），$ 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' );

woocommerce 3.3.5产品-缩略图页面不同

1 个答案: