WooCommerce – Switch Image Background On Color Variation Selection (Image Gallery & Navigation Thumbnails)
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 want to have to produce every close-up with a different color background in an image-editing program. It’s very time-consuming, and each graphic adds weight to the page. This process of displaying a CSS background color behind a transparent PNG file was inspired by Business Bloomer’s article (but their code only works for the product image gallery background color and not the navigation thumbnail background color).
Method: Produce one piece of artwork in transparent PNG format to use for the Image Gallery and Navigation Thumbnail.
I used ChatGPT to generate the code to display the various background colors behind a transparent PNG file in image gallery and navigation thumbnail.
Place the code in a WordPress child theme.
functions.php file:
// ChatGPT: This code registers and enqueues the custom.js script file, and ensures that it is loaded after the jQuery library.
// Also only loads the custom.js file on WooCommerce Product pages via if ( is_product() ).
function enqueue_custom_scripts() {
if ( is_product() ) {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );
jQuery file:
Create a folder in Child Theme called js, with the below code in a file called custom.js.
jQuery(document).ready(function($) {
// Function to update the background color of the gallery and thumbnails
function updateGalleryColor(color) {
$('.woocommerce-product-gallery figure .woocommerce-product-gallery__image img').css('background-color', color);
$('.woocommerce-product-gallery .flex-control-thumbs li img').css('background-color', color);
}
// Get the default color and set the gallery and thumbnails background color (based on Default Form Values in Product Variation tab)
var defaultColor = $('select[name="attribute_pa_color"]').val();
// Set the background color based on the default color value
switch (defaultColor) {
case 'aqua-triblend':
updateGalleryColor('#33869F');
break;
case 'berry-triblend':
updateGalleryColor('#BC437C');
break;
case 'blue-triblend':
updateGalleryColor('#62749B');
break;
case 'brown-triblend':
updateGalleryColor('#563e32');
break;
case 'charcoal-black-triblend':
updateGalleryColor('#171b19');
break;
case 'clay-triblend':
updateGalleryColor('#9a5344');
break;
case 'emerald-triblend':
updateGalleryColor('#142C1E');
break;
case 'grey-triblend':
updateGalleryColor('#766d66');
break;
case 'maroon-triblend':
updateGalleryColor('#5d323e');
break;
case 'navy-triblend':
updateGalleryColor('#464d7e');
break;
case 'purple-triblend':
updateGalleryColor('#5f4172');
break;
case 'red-triblend':
updateGalleryColor('#B4333C');
break;
case 'teal-triblend':
updateGalleryColor('#156560');
break;
case 'true-royal-triblend':
updateGalleryColor('#2E4C86');
break;
default:
// Reset the background color if no color is selected
updateGalleryColor('');
}
// Event listener for the color variation dropdown
$('select[name="attribute_pa_color"]').on('change', function() {
// Get the selected color value
var selectedColor = $(this).val();
// Set the background color of the gallery and thumbnails based on the selected color
switch (selectedColor) {
case 'aqua-triblend':
updateGalleryColor('#33869F');
break;
case 'berry-triblend':
updateGalleryColor('#BC437C');
break;
case 'blue-triblend':
updateGalleryColor('#62749B');
break;
case 'brown-triblend':
updateGalleryColor('#563e32');
break;
case 'charcoal-black-triblend':
updateGalleryColor('#171b19');
break;
case 'clay-triblend':
updateGalleryColor('#9a5344');
break;
case 'emerald-triblend':
updateGalleryColor('#142C1E');
break;
case 'grey-triblend':
updateGalleryColor('#766d66');
break;
case 'maroon-triblend':
updateGalleryColor('#5d323e');
break;
case 'navy-triblend':
updateGalleryColor('#464d7e');
break;
case 'purple-triblend':
updateGalleryColor('#5f4172');
break;
case 'red-triblend':
updateGalleryColor('#B4333C');
break;
case 'teal-triblend':
updateGalleryColor('#156560');
break;
case 'true-royal-triblend':
updateGalleryColor('#2E4C86');
break;
default:
// Reset the background color if no color is selected
updateGalleryColor('');
}
});
});
