phpjquerywordpresswoocommerceflexslider

Use dots in WooCommerce FlexSlider instead of thumbnails on mobile

I want to change the the WooCommerce FlexSlider to use dots in the gallery instead of the thumbnails. But on Desktop I want to show the thumbnails.

I found a solution to use dots or thumbnails but not both of them in different viewports.

Here's what I do to use thumbnails:

add_filter( 'woocommerce_single_product_carousel_options', 'custom_update_woo_flexslider_options' );
function custom_update_woo_flexslider_options( $options ) {

    $options['controlNav']      = 'thumbnails';
    
    return $options;
}

And for the dots I'm changing the code to this:

    $options['controlNav']      = true;

But in this case I have to use one of them for all viewports.

Is there any way to use both? Or one per viewport?

Solution

  • Did you tried to use WordPress wp_is_mobile() conditional function like:

    add_filter( 'woocommerce_single_product_carousel_options', 'custom_update_woo_flexslider_options' );
function custom_update_woo_flexslider_options( $options ) {

    $options['controlNav'] = wp_is_mobile() ? true : 'thumbnails';
    
    return $options;
}

    It could works…