WooCommerce 中产品缩略图的滑块

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

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

您可以使用过滤器更改 FlexSlider 属性，如下所示：

add_filter( 'woocommerce_single_product_carousel_options', 'customslug_single_product_carousel_options', 99, 1 );
function customslug_single_product_carousel_options( $options ) {
    $options['animation'] = 'fade';
    $options['animationSpeed'] = 400;
    return $options;
}

Answer 2

最好的方法是创建自己的滑块，而不是使用内置的 woocomerce。尝试了不同的定制方式，但徒劳无功。我自定义了模板文件并在 product-thumbnails.php 中添加了自己的结构

<div class="pd-gallery-slider">
    <div class="swiper-container">
       <div class="swiper-wrapper">
        <?php
            foreach($attachment_ids as $attachment_id) {
                $image_url = wp_get_attachment_url($attachment_id);
                ?>
                <div class="swiper-slide pd-gal-slide fx fx-jc fx-ac">
                    <a class="fx fx-wrap fx-ae" data-fancybox="gallery" href="<?php echo $image_url; ?>" style="background: url(<?php echo $image_url; ?>) center no-repeat;background-size:cover;">
                        <img src="<?php echo $image_url; ?>" alt="gallery">
                    </a>
                </div>
            <?php }
        ?>
    </div>
    <div class="gal-btn-prev fx"></div>
    <div class="gal-btn-next fx"></div>
</div>