fbpx
🤝  NEW YEAR SALE RETURNS - 50% OFF all plans! 🤝 Grab it Now

Product Gallery vs Variation Images

Hello,

I recently purchased the Pro plugin for additional variation images gallery for woocommerce.

The issue I am having is that if I ONLY add variation images for a variation, there is no gallery image on the main shop page.

However, if I DO add a generic gallery product image, then that same image shows up in the other variations – most of which it doesn’t apply to.

For instance, I have a leggings product that comes in 3 colors – black, rose, and green. On the main gallery page, I would like to display the black color. However, when a customer clicks the gallery image and is taken to the page where they can select a size and color, they may select rose. When they select rose, I would expect ONLY the rose images to be displayed. What I am seeing is that the rose images are displayed IN ADDITION to the single black leggings that I chose for the gallery image.

How can I fix this?

Thank you,

Kendall

Hakik Zaman

Hello Kendall,

Thanks for reaching out to us.

The issue I am having is that if I ONLY add variation images for a variation, there is no gallery image on the main shop page.

Please set a product image to display an image on the shop page. Our gallery plugin has no feature for the shop page.

Thanks

That’s terrible. I don’t have a generic product image, only variation images. How can there not be a way to default to a single variation image???? If I set a product image, it ruins all the variation galleries with either a duplicate image, in the case of the correct variation, or an irrelevant image, in the case of the incorrect variation. I really need a better solution for this. Surely there is a workaround even if it involves coding. Please help.

Hakik Zaman

Hello Kendall,

Our Additional Variation Images Gallery Plugin just allows us to set more images for each variation and display them with WooCommerce default Gallery.

Displaying the image on the shop page is a feature of WooCommerce or the Theme you are using. Basically, this image displayed on the shop page

We have no code base for the shop page. I hope I could clear your confusion.

Thanks

Do you have code to prevent the generic / default product image (displayed on the shop page) from showing up in the variation image galleries?

Hakik Zaman

Hello Kendall,

To get the first variation image on the shop page you can apply the below code using the Code Snippet plugin. You can also put the code inside your child theme’s funcitons.php

add_action('woocommerce_shop_loop_item_title','woocommerce_template_single', 5);
function woocommerce_template_single() {
   global $product;
   if($product->is_type('variable')){

      $variations = $product->get_available_variations();
      $size = 'woocommerce_thumbnail';
      $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );

      $i = 0;
      foreach ($variations as $variation){
         $i++;
         if($i == 1){ //Change the variation image serial, I have applied the first image 
         $init_variation = new WC_Product_Variation( $variation['variation_id'] );
            echo $init_variation->get_image();
         }
      }
}
}

add_action('template_redirect', 'remove_shop_thumbnail');
function remove_shop_thumbnail(){
   remove_action('woocommerce_before_shop_loop_item_title','woocommerce_template_loop_product_thumbnail', 10);
}

add_action('woocommerce_before_shop_loop_item_title', 'woo_template_loop_product_thumbnail', 10);

function woo_template_loop_product_thumbnail() {
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
   echo woo_get_product_thumbnail();
}

function woo_get_product_thumbnail( $size = 'woocommerce_thumbnail', $deprecated1 = 0, $deprecated2 = 0 ) {
   global $product;

   $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );

   if(!$product->is_type('variable')):
      return $product ? $product->get_image( $image_size ) : '';
   endif;
}

Thanks