Show all variation images of product on Shop page for WooCommerce

Derek Ashauer July 19, 2022

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!

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