相关疑难解决方法(0)

我为我的 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" …