1

On mobile, is there a way to remove the function that allows you to swipe with your finger to scroll through the product images?

I just want users to be able to touch the thumbnails and have the main image show.

1

Everything required is located on Class WC_Frontend_Scripts source code:

To target mobile devices, you can use the WordPress conditional tag wp_is_mobile().

A) For the Photoswipe functionality you have essentially 2 hooks:

  • woocommerce_single_product_photoswipe_enabled to disable it.
  • woocommerce_single_product_photoswipe_options to change options (see below).

1) To disable it, you will use:

add_filter( 'woocommerce_single_product_photoswipe_enabled', '__return_false' );

or targeting mobile devices (with touch screen):

add_filter( 'woocommerce_single_product_photoswipe_enabled', function(){
    if( wp_is_mobile() )
        return false;
});

Code goes in functions.php file of your active child theme (or active theme). Tested and work.

2) to change options:

The woocommerce_single_product_photoswipe_options hook available parameters are:

array(
    'shareEl'               => false,
    'closeOnScroll'         => false,
    'history'               => false,
    'hideAnimationDuration' => 0,
    'showAnimationDuration' => 0,
)

You can open related JS files from woocommerce plugin to see how it work (or more options):
- assets/js/photoswipe/photoswipe-ui-default.js
- assets/js/photoswipe/photoswipe.js


B) For Flexslider functionality you have essentially 2 hooks:

  • woocommerce_single_product_flexslider_enabled to disable it.
  • woocommerce_single_product_carousel_options to change options (see below).

1) To disable it, you will use:

add_filter( 'woocommerce_single_product_flexslider_enabled', '__return_false' );

or targeting mobile devices (with touch screen):

add_filter( 'woocommerce_single_product_flexslider_enabled', function(){
    if( wp_is_mobile() )
        return false;
});

Code goes in functions.php file of your active child theme (or active theme). Tested and work.

2) to change options:

The woocommerce_single_product_carousel_options hook available parameters are:

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

You can open related JS files from woocommerce plugin to see how it work (or more options):
- assets/js/flexslider/jquery.flexslider.js


To change options you can refer to this similar answer thread:
How to get rid of the hover zoom in WooCommerce single products

|improve this answer|||||
  • I tried the two options in A1 to disable Photoswipe, but nothing changed. I'm still able to swipe the main image and have it go through the thumbnails. – Desi May 21 '19 at 17:50
  • @Desi I will investigate that deeper... – LoicTheAztec May 21 '19 at 18:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.