hooks - Get rid of product images mobile swipe functionality from WooCommerce single product

admin管理员组

文章数量:1022736

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

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.

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

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.

• woocommerce-offtopic
• hooks

Share Improve this question edited May 21, 2019 at 12:50 LoicTheAztec 3,3911717 silver badges2424 bronze badges asked May 20, 2019 at 20:54 DesiDesi 1,24944 gold badges3737 silver badges5454 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

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.

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

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.

• woocommerce-offtopic
• hooks

Share Improve this question edited May 21, 2019 at 12:50 LoicTheAztec 3,3911717 silver badges2424 bronze badges asked May 20, 2019 at 20:54 DesiDesi 1,24944 gold badges3737 silver badges5454 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： hooksGet rid of product images mobile swipe functionality from WooCommerce single product