Display WooCommerce Product Gallery with FlexSlider - woocommerce

Question

I set up a WooCommerce Theme. Now I'm trying to visualize the Product Gallery Images on the Product Detail-Pages with Flexslider.
I implemented the ".js" and the Styles that are needed.
But Im not quite sure where to put in which Code. Im guessing I have to manipulate the "product-image.php" inside the "WooCommerce/single-product"-Folder.
This is what I have done so far inside that File:
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '
<div class="flexslider">
<ul class="slides">
<li>
%s
</li>
</ul>
</div>', $image_link, $image_caption, $image ), $post->ID );
I want it to look something similar to this:
http://www.twothirds.com/product/aruba_sand/
Any Ideas of what am I doing wrong so far?
Looking forward for any help :)

Answer 1

Custom Flexslider for Woocommerce.
* This template needs be overridden by copying it to yourtheme/woocommerce/single-product/product-thumbnails.php. replace the contents of this template with code provided. Woocommerce Version 2.5.5 April 2016.
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $post, $product, $woocommerce;
$attachment_ids = $product->get_gallery_attachment_ids();
if ( $attachment_ids ) {
$loop = 0;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
?>
<div id="shop-slider" class="flexslider">
<ul class="slides"><?php
foreach ( $attachment_ids as $attachment_id ) {
$image_link = wp_get_attachment_url( $attachment_id );
if ( ! $image_link )
continue;
$image_title = esc_attr( get_the_title( $attachment_id ) );
$image_caption = esc_attr( get_post_field( 'post_excerpt', $attachment_id ) );
$image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_single' ), 0, $attr = array(
'title' => $image_title,
'alt' => $image_title
) );
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<li>%s</li>', $image ), $attachment_id, $post->ID, $image_class );
$loop++;
}
?></ul>
</div>
<?php
}
Then follow this tutorial to get flexslider going http://flexslider.woothemes.com/.
Hope this helps.