How to use Image Swap Effects for Product Variations (Show Single Variations)

If you’re using Image Swap for WooCommerce with our plugin WooCommerce Show Single Variations, you might want to show image swap effects for individual product variations.

If this is the case, you’d need to show the parent product gallery (including the other variation images), for each variation. Using this method, you’d see the variation image first, then customers can hover or click to see the rest of the parent product gallery images.

For example, the image below shows the default behavior of Image Swap for WooCommerce:

image swap variations
The main product (Hoodie) and its variations

You can see the variable product first with the image swap effects working. Then you can see the individual product variations without any image swap effects.

If you want to show the same gallery effect for product variations too, you can use this snippet code in the functions.php file of your theme:

<?php
add_filter(
	'woocommerce_product_variation_get_gallery_image_ids',
	function( $value, $product ) {

		$parent_product = wc_get_product( $product->get_parent_id() );

		if ( empty( $value ) && $parent_product ) {
			$product_thumbnail_id                     = get_post_thumbnail_id();
			$parent_product_thumbnail_id         = get_post_thumbnail_id( $parent_product->get_id() );
			$parent_product_gallery_image_ids = Iconic_WIS_Product::get_gallery_image_ids( $parent_product );

			if ( $parent_product_thumbnail_id ) {
				$parent_product_gallery_image_ids[] = $parent_product_thumbnail_id;
			}

			$value = array_filter(
				$parent_product_gallery_image_ids,
				/**
				 * Filter out the variation thumbnail if already include on gallery.
				 */
				function( $image_id ) use ( $product_thumbnail_id ) {
					return $image_id !== $product_thumbnail_id;
				}
			);
		}

		return $value;
	},
	10,
	2
);

The result will be all variations using the gallery of parent product:

image swap effects product variations

Image Swap for WooCommerce

Add image swap effects to your product archive pages. Slide, zoom, thumbnails, fade, flip, and more. Make your product collection easier to browse.

Buy Now

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.