Show all variation images of product on Shop page for WooCommerce

I had an idea to show all the different variation images for a product on the Shop page within WooCommerce. The goal was to show all the different colors available for a hat and other similar items on a client site. Showing just a single image didn’t seem to make it clear enough that there were lots of colors to choose from for users. So, quick little code snippet to the rescue!

Example of how it looks in the end. First two products have variations with images, second two only have a single image.

This does a few things:

  • Unhooks the default thumbnail function
  • Adds a new custom hook
  • Looks for product variations, and if any are found…
  • Loop through each variation and look for the thumbnail image
  • Checks to make sure an image is not shown more than once if used for multiple variations (helpful if the same image is used for multiple sizes)
  • If no variations are found, run the default thumbnail function to display as usual
  • Option to only show first 4 images, uncomment the increment counter part of the code
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ); // Unhook default thumbnail action
add_action( 'woocommerce_before_shop_loop_item_title', function() {
    global $product;
    if ( $product->is_type( 'variable' ) ) { // Check if product is variable
        $variations = $product->get_available_variations(); // Get variations
        $image_urls = array();
        $images = array();
        $i = 0;
        foreach ( $variations as $variation ) {
            if ( !empty( $variation['image']['gallery_thumbnail_src'] ) && !in_array( $variation['image']['gallery_thumbnail_src'], $image_urls ) ) {
                // Only use images that have a thumbnail and have not yet been shown
                $image_urls[] = $variation['image']['gallery_thumbnail_src'];
                $images[] = '<img src="' . $variation['image']['gallery_thumbnail_src'] . '" alt="" />';
                /* Remove comments if you want to limit to first 4 images at all times
                $i++;
                if ( $i == 4 ) {
                    break;
                }
                */
            }
        }
        if ( !empty( $images ) && count( $images ) > 2 ) {
            // If we found more than 1 image, let's show them off!
            echo '<div class="product--thumbnail--variations product--thumbnail--variations' . count( $images ) . '">';
            echo join( '', $images );
            echo '</div>';
        } else {
            woocommerce_template_loop_product_thumbnail(); // Show default if no variations had any images
        }
    } else {
        woocommerce_template_loop_product_thumbnail(); // Show default thumbnail if not a variable product
    }
}, 10 );

You can spice this up with a little custom CSS as well to display those thumbnail images in a grid pattern. If there are < 4 images it will show in 2 columns, 5 or 6 images in 3 columns, and 7 or 8 images in 4 columns. You can keep extending this if you have even more images.

.product--thumbnail--variations { display: grid; grid-template-columns: 1fr 1fr; }
.product--thumbnail--variations5,
.product--thumbnail--variations6 { grid-template-columns: 1fr 1fr 1fr; }
.product--thumbnail--variations7,
.product--thumbnail--variations8 { grid-template-columns: 1fr 1fr 1fr 1fr; }