Hi All,
Currently in Bricks it’s not possible to change the WooCommerce Product image with a swatch variation upon click. I think for running a good webshop with product variations, this is mandatory:
Example:
What i would propose:
- make a setting in the Bricks where you can select which attribute to use for main img change
- on product page; allow image swatches to change main image
Here is a working proof of concept script:
/*
/* Generic function change Product Image with swatches
/* Make sure you have the Bricks WooCommerce Gallery element in your template
*/
(function($){
'use strict';
// ===== CONFIGURATION =====
// Set the attribute slug that should be allowed to change the main product image
// Examples: 'pa_kleur', 'pa_color', 'pa_colour'
// Set to null to allow ALL attributes with images to change the main image
var TARGET_ATTRIBUTE = 'pa_kleur';
// =========================
function cacheOriginal($img){
if (!$img.attr('data-o_src')) $img.attr('data-o_src', $img.attr('src') || '');
if (!$img.attr('data-o_srcset')) $img.attr('data-o_srcset', $img.attr('srcset') || '');
if (!$img.attr('data-o_data_src')) $img.attr('data-o_data_src', $img.attr('data-src') || '');
if (!$img.attr('data-o_data_srcset')) $img.attr('data-o_data_srcset', $img.attr('data-srcset') || '');
}
function restoreOriginal($img){
var oSrc = $img.attr('data-o_src');
var oSrcset = $img.attr('data-o_srcset');
var oDataSrc = $img.attr('data-o_data_src');
var oDataSet = $img.attr('data-o_data_srcset');
if (oSrc && $img.attr('src') !== oSrc) $img.attr('src', oSrc);
if (typeof oSrcset !== 'undefined' && $img.attr('srcset') !== oSrcset) $img.attr('srcset', oSrcset);
if (oDataSrc && $img.attr('data-src') !== oDataSrc) $img.attr('data-src', oDataSrc);
if (typeof oDataSet !== 'undefined' && $img.attr('data-srcset') !== oDataSet) $img.attr('data-srcset', oDataSet);
}
function lockSwatchImages($scope){
// Scope: the variations table only
var $tbl = $scope && $scope.length ? $scope : $('table.variations');
// Lock ALL swatch images in the variations table (not just target attribute)
var $swatchImgs = $tbl.find('td.value img, .variable-items-wrapper img');
// Cache originals once
$swatchImgs.each(function(){
var $img = $(this);
cacheOriginal($img);
// Guard against any script that tries to change src/srcset later
if (!$img.data('bs_observed')){
var obs = new MutationObserver(function(mutations){
mutations.forEach(function(m){
if (m.type === 'attributes' && (m.attributeName === 'src' || m.attributeName === 'srcset')) {
restoreOriginal($img);
}
});
});
obs.observe(this, { attributes: true, attributeFilter: ['src','srcset'] });
$img.data('bs_observed', true);
}
});
// Also restore on common events that plugins use
var $form = $tbl.closest('form.variations_form');
if ($form.length){
$form.on('found_variation reset_image woocommerce_update_variation_values', function(){
$tbl.find('td.value img, .variable-items-wrapper img').each(function(){
restoreOriginal($(this));
});
});
}
// Optional: visual active state without swapping images
$tbl.on('click', '.variable-item, [data-value], img', function(){
var $cell = $(this).closest('td.value');
$cell.find('.is-selected').removeClass('is-selected');
$(this).closest('li, a, button, img').addClass('is-selected');
});
// If TARGET_ATTRIBUTE is set, only allow that attribute to change the main image
if (TARGET_ATTRIBUTE && TARGET_ATTRIBUTE !== '' && TARGET_ATTRIBUTE !== null) {
// Find the target attribute row
var $targetRow = $tbl.find('tr.attribute_' + TARGET_ATTRIBUTE);
// When clicking on the target attribute, allow the variation change
$targetRow.on('click', '.variable-item, [data-value], img, li, a, button', function(e){
var $clicked = $(this);
var value = $clicked.attr('data-value') || $clicked.closest('[data-value]').attr('data-value');
if (value) {
// Find the select dropdown for this attribute
var $select = $form.find('select[name="attribute_' + TARGET_ATTRIBUTE + '"]');
if ($select.length) {
// Change the select value (this triggers WooCommerce variation change)
$select.val(value).trigger('change');
}
}
});
// Block other attributes from changing variations (if they try)
$tbl.find('tr').not('.attribute_' + TARGET_ATTRIBUTE).on('click', '.variable-item, [data-value], img, li, a, button', function(e){
// Prevent propagation that might trigger variation image change
e.stopImmediatePropagation();
// Still allow the value to be selected for cart purposes
var $clicked = $(this);
var $row = $clicked.closest('tr');
var attrName = '';
// Extract attribute name from row class
var classes = $row.attr('class');
if (classes) {
var match = classes.match(/attribute_(pa_[^\s]+)/);
if (match) {
attrName = match[1];
var value = $clicked.attr('data-value') || $clicked.closest('[data-value]').attr('data-value');
if (value && attrName) {
var $select = $form.find('select[name="attribute_' + attrName + '"]');
if ($select.length) {
// Temporarily unbind variation change events
$form.off('change', 'select');
$select.val(value);
// Rebind after a short delay
setTimeout(function(){
$form.on('change', 'select', function(){
$form.trigger('woocommerce_variation_select_change');
});
}, 100);
}
}
}
}
});
}
}
$(function(){
lockSwatchImages($('table.variations'));
// If your theme replaces the table via AJAX, re-lock on DOM changes
$(document).on('wc_variation_form', function(){
lockSwatchImages($('table.variations'));
});
});
})(jQuery);
I place it under /bricks-child/assets/js/fix-bricks-swatch-thumbs-with-img-change.js
And then enque it:
<?php
add_action( 'wp_enqueue_scripts', function () {
if ( is_product() ) {
wp_enqueue_script(
'fix-bricks-swatch-thumbs-with-img-change',
get_stylesheet_directory_uri() . '/assets/js/fix-bricks-swatch-thumbs-with-img-change.js',
['jquery'],
'1.2',
true
);
}
}, 20 );
Feature request related to these issues: