从WooCommerce单一产品中去除产品图像移动滑动功能

时间:2019-05-20 作者:Desi

在手机上,是否有办法删除允许您用手指滑动以滚动浏览产品图像的功能?

我只希望用户能够触摸缩略图,并显示主图像。

1 个回复
SO网友:LoicTheAztec

所需的一切都位于Class WC_Frontend_Scripts source code:

要定位移动设备,可以使用WordPress条件标记wp_is_mobile().

A) For the Photoswipe functionality 基本上有两个挂钩:

  • woocommerce_single_product_photoswipe_enabled 禁用它
  • woocommerce_single_product_photoswipe_options 要更改选项,请参见下文
1) To disable it, 您将使用:

add_filter( \'woocommerce_single_product_photoswipe_enabled\', \'__return_false\' );
或针对移动设备(带触摸屏):

add_filter( \'woocommerce_single_product_photoswipe_enabled\', function(){
    if( wp_is_mobile() )
        return false;
});
代码进入函数。活动子主题(或活动主题)的php文件。测试和工作。

2) to change options:

这个woocommerce_single_product_photoswipe_options 挂钩可用参数包括:

array(
    \'shareEl\'               => false,
    \'closeOnScroll\'         => false,
    \'history\'               => false,
    \'hideAnimationDuration\' => 0,
    \'showAnimationDuration\' => 0,
)
您可以从woocommerce插件打开相关的JS文件,查看其工作原理(或更多选项):
-assets/js/photoswipe/photoswipe-ui-default.js
-assets/js/photoswipe/photoswipe.js

<小时>B) For Flexslider functionality 基本上有两个挂钩:

  • woocommerce_single_product_flexslider_enabled 禁用它
  • woocommerce_single_product_carousel_options 要更改选项,请参见下文
1) To disable it, 您将使用:

add_filter( \'woocommerce_single_product_flexslider_enabled\', \'__return_false\' );
或针对移动设备(带触摸屏):

add_filter( \'woocommerce_single_product_flexslider_enabled\', function(){
    if( wp_is_mobile() )
        return false;
});
代码进入函数。活动子主题(或活动主题)的php文件。测试和工作。

2) to change options:

这个woocommerce_single_product_carousel_options 挂钩可用参数包括:

array(
    \'rtl\'            => is_rtl(),
    \'animation\'      => \'slide\',
    \'smoothHeight\'   => true,
    \'directionNav\'   => false,
    \'controlNav\'     => \'thumbnails\',
    \'slideshow\'      => false,
    \'animationSpeed\' => 500,
    \'animationLoop\'  => false, // Breaks photoswipe pagination if true.
    \'allowOneSlide\'  => false,
)
您可以从woocommerce插件打开相关的JS文件,查看其工作原理(或更多选项):
-assets/js/flexslider/jquery.flexslider.js

<小时>To change options 您可以参考这个类似的回答线程:
How to get rid of the hover zoom in WooCommerce single products