Documentation

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

Are you using Image Swap for WooCommerce yet?

Start your 14-day free trial right now and get instant access to the features described in this article.

or learn more

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.

Image Swap for WooCommerce

Image Swap for WooCommerce

Not got the plugin yet? Get instant access right now, free for 14 days.

or learn more

Still need help?

If you haven't found what you're looking for in our documentation, please contact support.

Get Support