当用户选择不同形状时候， 左侧大图也跟着显示，设置方式
上面设置不好看，
1. 调整图标位置 (Swatch position)
就在蓝色的 Replacement mode 下方，您可以看到 Swatch position（采样位置）：
-
操作： 请点击选择
Start of the label（标签的开头）。 -
效果： 这会强制图标从“正中间”移到文字的“左侧”。
2. 修改排列方式 (Items per row)
在最下方的 Items per row (Desktops and laptops)：
-
操作： 把数值从
2改为1。 -
效果： 这样每个选项（图标+文字）会自己占据完整的一行，变成竖着排列的长条。
终极方法2
1、首先关闭Blocksy自带的放大镜功能（和我们的这个功能有冲突，需要先关闭）关闭 Blocksy 的图片增强功能，页面会回退到最基础的图片渲染模式，这样我们的脚本干扰就会少很多。
在主题设置中关闭放大镜
进入 Appearance (外观) -> Customize (自定义)。找到 WooCommerce -> Single Product (单个产品)。向下滚动找到 Product Gallery (产品图库) 设置。
关闭 (Disable) 以下两个选项：
Image Zoom (图片放大)
Lightbox (灯箱/弹出预览)
点击 Publish (发布)。
2、输入js代码，在输入之前需要先看起 Blocksy的可以自动代码的功能
如果有，进入 Blocksy -> Extensions，检查 “Custom Code Snippets” 是否开启。开启后，在后台侧边栏会出现一个新的菜单让你放 JS。
进入 Blocksy -> Extensions，检查 “Custom Code Snippets” 在headerscripts处 放下面代码：
<script>(function($){
“use strict”;
console.log(“%c 🚀 原始高清图强制模式已启动 (V6.0)”, “color: white; background: #673ab7; padding: 5px; border-radius: 3px;”);
$(document).on(“click touchend”, “.tmcp-field-wrap”, function() {
var $wrapper = $(this);
setTimeout(function() {
var $input = $wrapper.find(‘input.tm-epo-field’);
var variationsData = $input.attr(‘data-image-variations’);
var hdImage = “”;
if (variationsData) {
try {
var jsonData = JSON.parse(variationsData);
// 1. 获取 Product Image 链接
var rawLink = “”;
if (jsonData.imagep && jsonData.imagep.image_link) {
rawLink = jsonData.imagep.image_link;
} else if (jsonData.image && jsonData.image.image_link) {
rawLink = jsonData.image.image_link;
}
if (rawLink) {
// 2. 【关键修复】：强制抹除类似 -258×300 或 -100×100 的后缀
hdImage = rawLink.replace(/-(\d+)x(\d+)\.(jpg|jpeg|png|webp)$/i, ‘.$3’);
console.log(“💎 原始高清原图地址: ” + hdImage);
}
} catch (e) {
console.error(“❌ JSON 数据解析失败”, e);
}
}
if (hdImage) {
// 3. 定位 Blocksy 主图容器
var $targetImg = $(“figure.ct-media-container img, .ct-product-gallery-container img, .woocommerce-product-gallery__image img”).first();
if ($targetImg.length) {
// 强制覆盖所有可能限制尺寸的属性
$targetImg.attr({
“src”: hdImage,
“srcset”: hdImage, // 必须覆盖 srcset，否则浏览器会根据屏幕自动选小图
“data-src”: hdImage,
“data-o_src”: hdImage
}).css({
“opacity”: “1”,
“visibility”: “visible”
});
// 同步父级容器并清除背景干扰
$targetImg.closest(“figure”).attr(“data-src”, hdImage).css(“background-image”, “none”);
// 告知 Blocksy 重新计算布局
$(window).trigger(‘resize’);
console.log(“%c ✅ 原始大图（无尺寸限制）已应用！”, “color: green; font-weight: bold;”);
}
}
}, 350);
});
})(jQuery);</script>
