I have products with variations, different images per variation. I tried to use the built in bricks product gallery widget, but it killed my page load speed (>3-5s LCP), even with perfmatters. When I delayed all offending js, the product image is not displayed until user interaction which is definitely not desirable from a page abandonment perspective. Perhaps I am not using perfmatters correctly, but after fighting with it for hours, I think going down a different track is better.
I really don’t need the zoom in or multi-image swiping functionality that product gallery provides. I just need the product image to change when the user selects a different product variation, starting with the featured image on page load
Does anyone have a code based solution that does this? I am using the bricks add-to-cart widget.
Ran into the same issue here. Did you ever find a solution to this? I also have products with different color variations and want the image to change when the user selects a different color from the dropdown. Can’t get this to work with both Image and Product Gallery elements :(.
Hi @kubus,
Yeah, I figured it out. You have to use a custom javascript to make it work, looking at the form data embedded in the bricks add-to-cart element. Inspect the element on an instantiated product page and you’ll see all of the available variation data you can pull from.
In my example, this particular woocommerce product template is for resume templates.
I used a simple image for the product image (with class rtemplate_featured_img), rather than the brick’s product gallery widget. The image is set nominally to the product’s featured image.
I have two variations, resume-style and package-type, where I want to change the displayed image to that set in the woocommerce variations, based on user selection.
In WPCodeBox, I have custom javascript that listens for the change and swaps the image. You will need to tweak this to your specific variations. Look in the add to chart element to get the #selectors.
(function($) {
// Get the variation select elements
var variationSelects = $('select#resume-style, select#package-type');
// Get the image element you want to update
var imageElement = $('.rtemplate__featured-img img');
// Get the initial image URL (featured image)
var initialImageURL = imageElement.attr('src');
var initialImageURLsrcset = imageElement.attr('srcset');
// Event handler for variation change
$('body').on('change', 'select#resume-style, select#package-type', function() {
// Get the selected variation ID
var selectedVariationID = $(this).children('option:selected').val();
// Get the variation object from the product variations data
var variationObject = getProductVariationById(selectedVariationID);
if(variationObject) {
// Update the image URL
if (variationObject.image.src && variationObject.image.srcset) {
imageElement.attr('src', variationObject.image.src);
imageElement.attr('srcset', variationObject.image.srcset);
}
else {
// If no variation image is available, revert to the initial image
imageElement.attr('src', initialImageURL);
imageElement.attr('srcset', initialImageURLsrcset);
}
}
});
/**
* Pulls an item from the form data.
*/
function getProductVariationById(variationId) {
var productVariations = $('.variations_form').data('product_variations');
for(i = 0; i < productVariations.length; i++) {
if(productVariations[i].attributes['attribute_resume-style'] == variationId) {
return productVariations[i];
break;
}
}
return false;
}
})(jQuery);
