WooCommerce产品图片缩放？

学完这篇，你能在 WooCommerce 商品页上正确开启「悬停放大镜 + 点击看大图」两种缩放效果，并知道图片该设多大才不糊。

第一步：先确认 WooCommerce 自带的缩放开关

从 WooCommerce 3.0 开始，灯箱（Lightbox）和放大镜（Zoom）是内置功能，不用装插件，但入口藏得比较深。进入 WordPress 后台 → WooCommerce → 设置 → 产品 → 显示，往下拉到「产品图片」区块，勾选 灯箱（Lightbox），保存更改。这时点商品主图会弹出大图，可以左右切换画廊。

放大镜则取决于主题：Storefront、Astra、OceanWP 这类主流主题都已经声明支持，鼠标悬停在主图上会自动出现放大效果，无需再设开关。如果你的主题不支持，看第三步。

注意：WooCommerce 3.0 以前的版本没有内置灯箱，老站升级前先备份，别指望后台有勾选项。

第二步：把图片尺寸调够，否则放大就是糊

灯箱和放大镜的效果上限由原图决定。同一页面（设置 → 产品 → 显示 → 产品图片）里设置：

• 单张图片宽度：填 800–1200（像素），这是主图渲染尺寸
• 缩略图宽度：填 300
• 硬裁剪：勾上，保证所有商品图比例一致

改完尺寸后必须重新生成缩略图，否则前台还是旧尺寸。安装 Regenerate Thumbnails 插件 → 工具 → Regenerate Thumbnails → 点「Regenerate All Thumbnails」，等进度跑完。

注意：上传前原图宽度最好不小于 1200px。原图只有 600px，把单张图片宽度设成 1200 只会得到一张被拉糊的图。

第三步：主题不支持时，用代码打开缩放

打开 外观 → 主题文件编辑器，选 functions.php，在末尾加入：

add_action( 'after_setup_theme', function () {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}, 20 );

保存后刷新商品页。反过来，如果主题自带的缩放和你的插件打架，把 add_theme_support 换成 remove_theme_support 即可关掉。

注意：不要直接改父主题的 functions.php，主题一升级改动就没了。用子主题，或者装 Code Snippets 插件把这段代码贴进去。

第四步：需要更炫的效果就上插件

想要「放大镜跟随鼠标、右侧独立放大窗口」这类效果，用插件更省事：

• YITH WooCommerce Zoom Magnifier：启用后进 YITH → Zoom Magnifier → Settings，可选放大镜位置（Inside 在图片内 / Outside 在图片外）、放大倍数、是否在移动端启用。
• WP Image Zoom：进 Settings → Image Zoom，勾选 Enable on WooCommerce product images，设置 Lens Shape（圆形 / 方形）和 Zoom Window 大小。

注意：缩放类插件只装一个。两个同时启用会出现双重放大镜，鼠标一动画面乱跳。

第五步：清缓存，再到前台实测

缓存插件和 CDN 会缓存旧的 CSS/JS，改完先清：WooCommerce → 状态 → 工具 → 清除缓存，再清你的缓存插件（如 WP Rocket 的「清除并预加载缓存」）。

然后打开一个有 3 张以上画廊图的商品页，逐项验证：鼠标悬停主图是否放大、点击是否弹出灯箱、灯箱左右箭头是否可用、手机上双指是否可缩放。

注意：手机端没有 hover，悬停放大在触屏上等于不存在。别把缩放做成唯一的看图方式，灯箱一定要保留。

小结

• 缩放开关在 WooCommerce → 设置 → 产品 → 显示 → 产品图片，灯箱直接勾选，放大镜靠主题支持。
• 单张图片宽度设 800–1200px，缩略图 300px，改完用 Regenerate Thumbnails 重新生成。
• 主题不支持就用 add_theme_support( 'wc-product-gallery-zoom' ) 等三行代码补上，写在子主题或 Code Snippets 里。
• 需要更强效果用 YITH Zoom Magnifier 或 WP Image Zoom，同类插件只留一个。
• 改完务必清缓存，并在桌面端和手机端都实测一遍。