Variable product image Will not display on single product view - php

Question

My theme uses custom code to display the Woocommerce single product image but the variable product images will not display. The feature image shows and the gallery images show. When using the woocommerce standard template from product-image.php the variable image works but I do not want to use standard template because it does not work well with my theme (gallery image slider not working properly). here is the custom code below. Any idea what's missing or what can be done to get the variable images to show up?
Thanks in advance.
$image_size = array(500,600);
$url_image_default = ST_MaxShop_Assets::url('images/img-default.png');
$attachment_ids = $product->get_gallery_image_ids();
$post_thumbnail_id = $product->get_image_id();
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $product->get_id(), apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) );
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 1; transition: opacity .25s ease-in-out;width:100%">
<div class="clearfix">
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( has_post_thumbnail() ) {
?>
<a class="jqzoom" href="<?php echo get_the_post_thumbnail_url($product->get_id() , array(1500,1800)); ?>" id="jqzoom" data-rel="gal-1">
<?php
$props = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
?>
<img src="<?php echo $image_url[0]; ?>" title="<?php echo esc_attr($props['title']); ?>" alt ="<?php echo esc_attr($props['alt'])?>">
<?php
?>
</a>
<?php
} else { ?>
<a class="jqzoom" href="<?php echo esc_url($url_image_default); ?>" id="jqzoom" data-rel="gal-1">
<?php
$dimensions = wc_get_image_size( $image_size ); ?>
<img src="<?php echo esc_url($url_image_default); ?>" width="<?php echo esc_attr( $dimensions['width'] ) ?> " height="<?php echo esc_attr( $dimensions['height'] ) ?> " alt="<?php esc_html_e('Image Default','maxshop')?>" title="<?php esc_html_e('product','maxshop')?>" />
<?php
?></a><?php
}
?>
</figure>
</div>
</div>
<?php
if($attachment_ids){
?>
<ul class="jqzoom-list">
<?php
if ( has_post_thumbnail() ) { ?>
<li>
<a class="zoomThumbActive" href="javascript:void(0)" data-rel="{gallery:'gal-1', smallimage: '<?php echo get_the_post_thumbnail_url($post -> ID,$image_size); ?>', largeimage: '<?php echo get_the_post_thumbnail_url($post->ID , array(1500,1800)); ?>'}">
<?php echo get_the_post_thumbnail( $post->ID, array(100,100)); ?>
</a>
</li>
<?php } ?>
<?php
foreach ($attachment_ids as $attachment_id){ ?>
<li>
<a href="javascript:void(0)" data-rel="{gallery:'gal-1', smallimage: '<?php echo esc_url(wp_get_attachment_image_url($attachment_id,$image_size)); ?>', largeimage: '<?php echo esc_url(wp_get_attachment_image_url($attachment_id, array(1500,1800))); ?>'}">
<?php
echo wp_get_attachment_image($attachment_id,array(100,100)); ?>
</a>
</li>
<?php
}
?>
</ul>
<?php
}
}

Answer 1

as i can see you are getting only the main product image at this line
$attachment_ids = $product->get_gallery_image_ids();
and you are looping through all of them withing your code and in order to get the variation images you need to add the following code as follow:
$image_size = array(500,600);
$variation_image_id = array();
$attachment_ids = $product->get_gallery_image_ids();
$variations = $product->get_available_variations();
foreach ( $variations as $variation ) {
$variation_image_id[]= $variation["image_id"];
}
$attachment_ids = array_merge( $variation_image_id , $attachment_ids);
$post_thumbnail_id = $product->get_image_id();