在WordPress和Woocommerce中，我尝试在子主题functions.php中应用javascript，所以如果用户点击特定的产品属性颜色样本，它会将预览图像（显示在样本选择器下面）用特定的ID更改为新的图像源URL。
我可以得到一个单一的样本（黑色）来改变目标图像，但我不知道如何重复其他样本的命令。

add_action( 'woocommerce_before_single_product', 'bluetera_swatch_onclick' );

function bluetera_swatch_onclick() { ?>

    <script type='text/javascript'>
        var input = document.getElementById("ecorigidswatches_Black");
        input.onclick = function swapproductimg() {
        document.getElementById('selected-swatch').src="https://www.laserfelt.com/wp-content/uploads/2021/06/BlackHexagon.jpg";

}

    </script>
    <?php
}

以下是相关产品页面的链接：
https://www.laserfelt.com/product/hexagon-acoustic-wall-tiles/
我还尝试创建一个条件语句，使其仅在用户查看特定类别的产品时才执行此函数。但我也不知道如何执行。所有尝试都失败了。我们有不同的颜色样本集，我正在尝试找到一种方法，使脚本仅在需要时加载。
我也想知道这是否是最有效的方法来达到预期的结果，或者是否有更好的方法来提高页面加载速度？我被限制在使用现有的插件来创建这些产品样本选项。这就是为什么我不得不以一种迂回的方式插入onclick函数。
我们不想使用任何预先存在的样本插件，只改变了主要的产品形象。
我真的很感激一些指点，提示和方向。谢谢！
--更新--
根据Michal的建议，我也尝试了这个方法，但没有效果：

var black = document.getElementById("ecorigidswatches_Black");
var berry = document.getElementById("ecorigidswatches_Berry");
if (berry.checked = true) {
  document.getElementById('selected-swatch').src="https://www.laserfelt.com/wp-content/uploads/2021/06/BerryHexagon.jpg";
} elseif (black.checked = true) {
  document.getElementById('selected-swatch').src="https://www.laserfelt.com/wp-content/uploads/2021/06/BlackHexagon.jpg";
}

---更新-部分解决方案---
在弗拉基米尔的帮助下，我能够让这个工作，但如果我点击任何其他产品属性或输入，它会将目标img src更改为“undefined”和图像变得破碎.以下是我的工作代码，是在functions.php文件：

add_action( 'woocommerce_before_single_product', 'bluetera_swatch_onclick' );

function bluetera_swatch_onclick() { ?>

    <script type='text/javascript'>
        
        
  
  const images = {
    'ecorigidswatches_Berry':"https://www.laserfelt.com/wp-content/uploads/2021/06/BerryHexagon.jpg",
    'ecorigidswatches_Black':"https://www.laserfelt.com/wp-content/uploads/2021/06/BlackHexagon.jpg", 
    'ecorigidswatches_Brown':"https://www.laserfelt.com/wp-content/uploads/2021/06/BrownHexagon.jpg"
  };
  
  //select all elements with data-color attribute
  const swatch = document.querySelectorAll('[id]'); 

  swatch.forEach(element => {
    element.addEventListener('click', () => {
      let color = element.getAttribute('id');
      document.getElementById("selected-swatch").src = images[color];
    });
  });
  

    </script>
    <?php
}