Navigation arrows in Woocommerce 3.x product gallery slider

Viewed 14486

Has anyone been able to add navigation arrows for Next/Prev slides in the new woocommerce slider?

The thumbnail navigation particularly on mobile/table is great, but having arrows as well for desktop users would be a dream! Arrows on the main product image are preferred over the lightbox. You will understand why on our site: http://52.56.199.58/collection/bedroom/giorgetti-syn-bedside-table/

Would seem an easy and obvious option that Woocommerce has forgotten. Any help or guidance would be much appreciated.

Cheers

3 Answers

You can update the Flexslider options in WooCommerce V3 by hooking into the 'woocommerce_single_product_carousel_options' filter. So specifically to enable the navigation arrows the 'directionNav' option should be set to 'true'.

Put this example function in your functions.php file and you should be good to go:

// 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;

    return $options;
}

Some more tested value with woocommerce 3.5.3

add_filter('woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options');
function ud_update_woo_flexslider_options($options) {
      // show arrows
      $options['directionNav'] = true;
      $options['animation'] = "slide";

      // infinite loop
      $options['animationLoop'] = true;

      // autoplay (work with only slideshow too)
      $options['slideshow'] = true;
      //$options['autoplay'] = true;

      // control par texte (boolean) ou bien par vignettes
      // $options['controlNav'] = true;
      //$options['controlNav'] = "thumbnails";

      // $options['mousewheel'] = true;

      return $options;
  }
Related