WooCommerce – Switch Image Background On Color Variation Selection (Image Gallery & Navigation Thumbnails)

ByReid Walley

Setup: WooCommerce Variable Product for t-shirts with multiple colors and multiple sizes. Theme: GeneratePress. Primary image is of a t-shirt with artwork on it. Secondary image is a close-up of just the artwork with a colored background that matches the color of the t-shirt. Since there are multiple t-shirt colors (and multiple designs), I don’t…

Switch Image Background Color On WooCommerce Variation Image Gallery

ByReid Walley

Goal: Display an enlarged version of t-shirt artwork on 9 different garment color options. Approach: Instead of generating and uploading 9 different artwork files with 9 different color backgrounds, we’re doing the following: This keeps everything lightweight. Switch Image Background (using CSS) On Color Variation Selection – Business Bloomer