我为我的 WooCommerce 商店构建了自己的主题。 目前我对现有模板文件做了很少的更改。
但我想更改产品页面上图像 slider 的 View 。 目前,我正在使用带有一些基本样式的基本输出。
问题是,如果单行不适合,缩略图会显示在多行中。
我需要的是缩略图的 slider 。
我尝试更改模板文件product-thumbnails.php
。但它使用了一个名为 wc_get_gallery_image_html
的函数。我不知道如何以好的方式改变它。
然后我意识到 WooCommerce 使用 FlexSlider 插件。这个插件可以提供我想要/需要的东西。
请参阅此处:
http://flexslider.woothemes.com/thumbnail-slider.html
我只是不知道如何将该行为添加到我的产品图像 slider 中。
我看到上面的例子中有一个示例JS和HTML代码。但我不知道如何使其适应我的 slider ,因为我的 HTML 输出看起来有很大不同,并且重命名 ID 不起作用。
编辑:
我找到了一种向 slider 添加选项的方法。答案来自这里:
https://stackoverflow.com/a/46448407/1788961
我添加了以下代码(并且它正在工作)以向 slider 添加选项:
// 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"
});
最佳答案
WooCommerce 目录中有一个文件,其中包含产品缩略图 slider 的所有设置,您可以在其中编辑设置。
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;
}
关于php - WooCommerce 中产品缩略图的 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49938106/