For a temporary solution i have created a dirty ChatGPT script:
In your (child) template create a file named âfix-bricks-swatch-thumbs.jsâ and place this in: /assets/js/fix-bricks-swatch-thumbs.js
Copy-paste the below code:
(function($){
'use strict';
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');
// Any images used as swatches inside the table
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');
});
}
$(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);
In your funtions.php place the following code:
add_action( 'wp_enqueue_scripts', function () {
if ( is_product() ) {
wp_enqueue_script(
'fix-bricks-swatch-thumbs',
get_stylesheet_directory_uri() . '/assets/js/fix-bricks-swatch-thumbs.js',
['jquery'],
'1.0.0',
true
);
}
}, 20 );
Now it works untill there is a native solution
as it holds back a large WooCommerce project i am working on now.
