Flexslider thumbnail with more 4 image don't slide - php

Question

I am creating a site with woocomerce and wordpress, and I have a product with 6 related images and instead of showing 4 images the flex slider shows me the 6 images in two lines. I tried using this filter to change the flexslider settings but I can't find a way to make it a slider.
I have the images inside a li inside a ol with class="flex-control-nav flex-control-thumbs"
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );
function ud_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
$options['sync'] = '.flex-control-thumbs';
$option['minItems']=0;
$option['maxItems']=4;
$option['animaton']='slide';
$option['itemWidth']=': 210';
return $options;
}
Thank you.

Answer 1

Did you sort this in the end? I also came across the same issue and so far I've found the following.
The FlexSlider 2 jQuery plugin is being used for the primary image and thumbnails on the WooCommerce product page. Specifically this example is being used - the "Slider w/thumbnail controlNav pattern"
Slider w/thumbnail controlNav pattern
This is what produces the unorder list mark-up you mention:
<ol class="flex-control-nav flex-control-thumbs">
<li><img/></li>
</ol>
But I haven't found an option to enable a horizontal scroll for this mark up generated for the thumbnails via FlexSlider 2. This would be the simplest solution here if there was an option. By default, there's no horizontal scroll and thumbnails display on multiple rows.
However, it looks like if we can change how WooCommerce uses Flexslider we can use the "Slider w/thumbnail slider" example form the FlexSlider website instead:
Slider w/thumbnail slider
I've been able to make progress with this and using the "woocommerce_single_product_carousel_options" filter you have done is correct but going slightly further:
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );
function ud_update_woo_flexslider_options( $options ) {
$options['sync'] = '#our_own_thumnail_markup';
$options['controlNav'] = false;
return $options;
}
Note the "controlNav" option. This should be changed to false so the jQuery plugin doesn't automatically generate it's own thumbnails.
And taking the "Slider w/thumbnail slider" example from the FlexSlider website we need to generate our own markup for thumbnails just before the last closing div in "woocommerce/single-product/product-image.php" in our theme:
$attachment_ids = $product->get_gallery_image_ids();
if ( $attachment_ids && $product->get_image_id() ) {
echo '<div id="our_own_thumnail_markup">';
foreach ( $attachment_ids as $attachment_id ) {
echo wc_get_gallery_image_html( $attachment_id );
}
echo '</div>';
}
And call the following via jQuery:
$('#our_own_thumnail_markup').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '.woocommerce-product-gallery__wrapper'
});
I haven't got this to work but I think I'm heading in the right direction.