WooCommerce: Switch Image Background On Color Variation Selection

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 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!

The final output: background-color switches to “Red” once the “Red” 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
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.0
 * @community     https://businessbloomer.com/club/
 */

add_action( 'woocommerce_after_variations_form', 'bbloomer_switch_image_background_variable_colors' );

function bbloomer_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 custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Display “FREE” Instead of $0.00 Price
    In older versions of WooCommerce free prices used to display as “FREE!” and products with empty prices were not publishable/purchasable. Now they’ve changed this around, but I still believe “FREE” looks much better than “$0.00”. It’s much more enticing, isn’t it? Well, here’s how you restore the old WooCommerce functionality – as usual it’s as […]
  • WooCommerce: Display Variations’ Stock @ Shop Page
    Thanks to the various requests I get from Business Bloomer fans, this week I’m going to show you a simple PHP snippet to echo the variations’ name and stock quantity on the shop, categories and loop pages. Of course, if “Manage stock” is not enabled at variation level, the quantity will be null, and therefore […]
  • WooCommerce: How to Display Variations with Color / Size Buttons?
    Displaying product pages nicely is the entrepreneur’s dream. Good UX means a much higher probability the interested customer is going to add to cart and complete the checkout. However, WooCommerce variable products come with annoying dropdowns for each attribute (color, size, style, etc. depending on what options you have set up). And as you’ve already […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

12 thoughts on “WooCommerce: Switch Image Background On Color Variation Selection

  1. Is it possible to do the same with the Variation gallery and change the image based on selected color while having 2 attributes with 2 variations like color + size. But use something similar to change images based on selected color and don’t wait to choose size?

    1. Hi Zimmer, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Hi Rodolfo,
    Code works great. Is there a way to make it autonomous so that we don’t have to code the available colors names and hex numbers? If you just get the selected color and adjust the background color acording to the color that is set on the selected attribute?

    1. Hi Chris, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  3. How to change the background color for the zoomImg and pswp_img classes?
    The color does not keep with zoom and new tab open.

    1. Can’t help here sorry

  4. Wow Brilliant! I never had to use variants so far but definitely will visit back when it comes. As always you are the best!

    1. Thanks Peter!

      1. Hi Rodolfo,
        I couldn’t get it working,
        I added a variable product with a color option. I can see the JS function is loading in my browser, but I am guessing the class or ID I am trying to reference is wrong. Something that I really havent got my head around fully yet.

        1. It could be you have a custom theme and something may need to be changed

          1. I got it sorted,

            I I am just using storefront with a pretty vanilla child theme.

            This is what I did:

            function bbloomer_switch_image_background_variable_colors() {
                
               wc_enqueue_js( "
                
                  $('#color').change(function(){
            	  	console.log('on change function')
                     if('' != $('#color').val()) {
            		 console.log('2 on change function')
                        if($('#color').val() =='Red'){
            			console.log('3 on change function')
                           $('.woocommerce-product-gallery figure').css('background-color', 'red');
                        } else if($('#color').val() =='Yellow'){
                           $('.woocommerce-product-gallery figure').css('background-color', 'yellow');
                        } 
                     } else {
                        $('.woocommerce-product-gallery figure').css('background-color', 'transparent');
                     }
                  });
                
               ");
                
            }
            

            Thanks for your reply though.

            Cheers,

            Aaron.

            1. Nice!

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *