
You could upload 10 images, one for each color of your variable product… or you could be slightly smarter and simply upload 1 “blank” image, and then when the user selects a color to trigger a background color change!
Easier to code than to explain, so let’s take a look at the screenshot below (image must be a PNG with transparent background) and the PHP snippet. This could be a time-saver, enjoy!

-
When yellow is selected -
When no variation is selected
PHP Snippet: Switch Featured Image Background Color On Color Variation Select @ Single Product Page
/** * @snippet Switch Image Background @ WooCommerce Single Variable Product * @author PHP - Stackoverflow * @compatible WooCommerce 4.0/ */ add_action( 'woocommerce_after_variations_form', 'phpsof_switch_image_background_variable_colors' ); function phpsof_switch_image_background_variable_colors() { wc_enqueue_js( " $('input.variation_id').change(function(){ if('' != $('input.variation_id').val()) { if($('#pa_color').val() =='red'){ $('.woocommerce-product-gallery figure').css('background-color', 'red'); } else if($('#pa_color').val() =='yellow'){ $('.woocommerce-product-gallery figure').css('background-color', 'yellow'); } } else { $('.woocommerce-product-gallery figure').css('background-color', 'transparent'); } }); "); }
Where to add this snippet?
You can place PHP snippets at the bottom of your child theme functions.php file (before “?>” if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files – if you need more guidance, please take a look at free video tutorial “Where to Place WooCommerce Customization?”
Does this snippet (still) work?
Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with the Storefront theme, the WooCommerce version listed above, and a WordPress-friendly hosting on PHP 7+.
If you think this code saved you time & money, feel free to join 10,000+ WooCommerce Weekly subscribers for blog post updates or 250+ PHP Stackoverflow supporters for 365 days of WooCommerce benefits. Thank you in advance 🙂