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 🙂
