Question

我为我的WooCommerce商店建立了一个自己的主题。目前我对现有的模板文件进行了很少的更改。

但我想更改产品页面上图像滑块的视图。目前，我正在使用基本输出和一些基本样式。

问题是，如果单行中没有拟合，缩略图会以多行显示。

我需要的是缩略图的滑块。我尝试更改模板文件product-thumbnails.php。但它使用了一个名为wc_get_gallery_image_html的函数。我不知道如何以一种好的方式改变它。

然后我意识到WooCommerce使用FlexSlider插件。这个插件可以提供我想要/需要的东西。

请参见此处： http://flexslider.woothemes.com/thumbnail-slider.html

我只是不知道，如何将该行为添加到我的产品图片滑块。

我看到上面的示例中有一个示例JS和HTML代码。但是我不知道如何将它改编为我的滑块，因为我的HTML输出看起来很不一样，并且重命名ID不起作用。

修改

我找到了一种向滑块添加选项的方法。答案来自：https://stackoverflow.com/a/46448407/1788961

我添加了以下代码（并且它正在工作）以向我的滑块添加选项：

// Update WooCommerce Flexslider options
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );

function ud_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;
    $options['sync'] = '.flex-control-thumbs';

    return $options;
}

问题是，我还需要为缩略图添加选项。有没有办法做到这一点？

目前，HTML输出如下所示：

<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out;">
    <a href="[path]" class="woocommerce-product-gallery__trigger"></a>
    <div class="flex-viewport" style="overflow: hidden; position: relative; height: 400px;">
        <figure class="woocommerce-product-gallery__wrapper" style="width: 2600%; transition-duration: 0s; transform: translate3d(-1911px, 0px, 0px);">
            <div data-thumb="[path]" class="woocommerce-product-gallery__image flex-active-slide" data-thumb-alt="" style="width: 637px; margin-right: 0px; float: left; display: block; position: relative; overflow: hidden;">
                <a href="[path]">
                    <img width="600" height="400" src="[path]" class="" alt="" title="[title]" data-caption="" data-src="[path]" data-large_image="[path]" data-large_image_width="2000" data-large_image_height="1333" srcset="[path]" sizes="(max-width: 600px) 100vw, 600px" draggable="false">
                </a>
                <img src="[path]" class="zoomImg" style="position: absolute; top: 0px; left: 0px; opacity: 0; width: 2000px; height: 1333px; border: none; max-width: none; max-height: none;">
            </div>
            <div data-thumb="[path]" class="woocommerce-product-gallery__image" data-thumb-alt="" style="width: 637px; margin-right: 0px; float: left; display: block; position: relative; overflow: hidden;">
                <a href="[path]">
                    <img width="600" height="400" src="[path]" class="" alt="" title="[title]" data-caption="" data-src="[path]" data-large_image="[path]" data-large_image_width="2000" data-large_image_height="1333" srcset="[path]" sizes="(max-width: 600px) 100vw, 600px" draggable="false">
                </a>
                <img src="[path]" class="zoomImg" style="position: absolute; top: -578.46px; left: -7.48901px; opacity: 0; width: 2000px; height: 1333px; border: none; max-width: none; max-height: none;">
            </div>
            <!-- ...more items... -->
        </figure>
    </div>

    <ol class="flex-control-nav flex-control-thumbs">
        <li><img src="[path]" draggable="false" class="flex-active"></li>
        <li><img src="[path]" draggable="false" class=""></li>
        <!-- ...more items... -->
    </ol>
</div>

编辑：见上文，以下部分无效。这就是我尝试过的：

$('.flex-control-thumbs').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '.woocommerce-product-gallery__wrapper'
  });

  $('.woocommerce-product-gallery__wrapper').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: ".flex-control-thumbs"
  });

Answer 1

试试这个插件： https://wordpress.org/plugins/woo-product-galllery-images-slider/

画廊布局[水平/垂直贴图]
响应式布局
非常轻巧
轻松的管理员设置
导航支持
滑块自动播放选项
自定义滑块箭头（颜色选项）
迷人的灯箱效果
处理大多数高级主题
启用了触摸和滑动等。

Answer 2

woocommerce目录中有一个文件，其中包含“产品缩略图”滑块的所有设置，您可以在其中编辑设置。

wp-content / plugins / woocommerce / includes / class-wc-frontend-scripts.php

$params = array(
                    'i18n_required_rating_text' => esc_attr__( 'Please select a rating', 'woocommerce' ),
                    'review_rating_required'    => get_option( 'woocommerce_review_rating_required' ),
                    'flexslider'                => apply_filters(
                        'woocommerce_single_product_carousel_options', array(
                            'rtl'            => is_rtl(),
                            'animation'      => 'slide',
                            'smoothHeight'   => true,
                            'directionNav'   => false,
                            'controlNav'     => 'thumbnails',
                            'slideshow'      => false,
                            'animationSpeed' => 500,
                            'animationLoop'  => true, // Breaks photoswipe pagination if true.
                            'allowOneSlide'  => false,
                        )
                    ),

更改这些属性。

WooCommerce中产品缩略图的滑块

2 个答案: