Wordpress Woocommerce: Single product page gallery of variations - wordpress

Question

The thing I need is variation to be changed on selected products when I click on image associated with it. The same way as displayed image changes clicking variation from dropdown (but vice versa). I spent days looking for solution, that must be so simple. Is it solvable with writing some code? I don’t want plugins like swatches. I am not born English speaker, so hope it’s understandable enough. Thanks for ANY kind of help.
Here:
http://obrazyzedreva.cekuj.net/produkt/svata-rodina/
Wordpress, Woocommerce, Customify template

Answer 1

This is how I solved it:
part of product-image.php
<div>
<div>
<?php
if( $product->is_type( 'variable' ) ){
?>
<div>
<div>
<strong>Vyberte si variantu:</strong>
</div>
<?php
$variations = $product->get_available_variations();
foreach ( $variations as $variation ) {
echo '<div style="display:inline-block">';
echo '<img class="selector_'. $variation['variation_id'] .'" width="80" height="80" src=' . $variation['image']['url'] . ' style="margin-right:7px;">';
echo '</div>';
}
?>
</div>
<script type="text/javascript">
jQuery(function($){
<?php foreach ( $variations as $variation ) {
foreach($variation['attributes'] as $attributes) {
?>
$('.selector_<?php echo $variation['variation_id'] ?>').click(function(){
$('select[name="attribute_model-vyrobni-cislo"] option[value="<?php echo $attributes ?>"]').attr("selected","selected").trigger('change');
});
<?php
}
}
?>
});
</script>
<?php
}
?>
</div>
</div>