Variable product image Will not display on single product view

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
    }
}

kashalo kashalo · Accepted Answer · 2018-04-02T01:39:04

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();

Variable product image Will not display on single product view

1 Answers