WooCommerce 产品图片尺寸：三个尺寸分别是什么，以及怎么真正改掉它们

你上传的每一张产品照片，WooCommerce 都会生成三个图片尺寸，而其中只有两个能在 WordPress 后台里改。woocommerce_thumbnail 是目录网格图，woocommerce_single 是产品页上的大图，woocommerce_gallery_thumbnail 是主图下面那一小排缩略图。修改的位置在 外观 > 自定义 > WooCommerce > 产品图片——如果这个面板只给了你一个裁切下拉框、却没有宽度输入框，那是你的主题在代码里故意锁死了宽度。

三个尺寸

尺寸名	出现在哪里	裁切方式	能否在自定义器里改
woocommerce_thumbnail	商店页、分类网格、相关产品、交叉销售	默认硬裁切成正方形	宽度和比例
woocommerce_single	单个产品页上的主图	不裁切——保留原始宽高比	只有宽度
woocommerce_gallery_thumbnail	产品主图下方的小排缩略图	硬裁切成正方形	不能

这些是叠加在 WordPress 标准尺寸之上的。一张产品照通常会产出 thumbnail、medium、medium_large、large、三个 WooCommerce 尺寸，还可能有主题通过 add_image_size 注册的额外尺寸。每次上传要生成的文件相当多，这也是为什么导入 300 个产品要花那么久。

图库缩略图是最让人意外的一个：它完全没有后台控件。默认安装下它是一个小方块，历史上是 100px，也是最容易在视网膜屏上显得发虚的尺寸，因为这个文件确实太小了。

设置到底在哪里

外观 > 自定义 > WooCommerce > 产品图片 给了你三个控件：

• 主图宽度——woocommerce_single 的宽度。高度是自动的，所以原始宽高比会被保留。
• 缩略图宽度——woocommerce_thumbnail 的宽度。
• 缩略图裁切——1:1（正方形，默认）、自定义（自己填一个比例，比如 4:3）或者 不裁切。

注意少了什么：目录缩略图没有高度输入框，因为高度是由裁切比例推出来的。而图库缩略图则完全没有任何选项。

改动之前，先看清一个具体文件到底会产出哪些派生尺寸会很有帮助——把一张真实的产品照丢进 WordPress 图片尺寸工具，你就能拿到完整清单，包括你的源图是否大到足以在不放大的前提下填满每一个尺寸。

你的目录图片为什么看着不对

目录缩略图会硬裁切成正方形。硬裁切的意思是，WooCommerce 从你的照片里取出正中的一个正方形，其余全部丢掉——它不会加黑边，也不会压扁。一张 2000x1200 的产品照会变成从中间切出来的 1200x1200，然后再缩小。

对于一瓶摆在正中、四周留白的产品照，这没问题。但对下面这些情况就是灾难：

• 长条形产品（滑雪板、线缆、窗帘杆）——你只能看见中间那三分之一
• 主体偏离中心的构图——产品跑到画面边缘，被切掉一块
• 主体铺满整个画面的照片——上下被切没了
• 产品位于角落的场景图

常见的建议是”把裁切改成不裁切”。这确实有效，但代价要说清楚：不裁切意味着每张缩略图都保留自己的宽高比，于是横竖混杂的网格看起来就参差不齐，除非你主题的 CSS 能处理不等高，否则每一行都对不齐。大多数主题都假定图片是正方形。

如果条件允许，更好的办法是在源头解决：统一用正方形产品照，主体居中、留白均匀。这样正方形硬裁切等于什么都没做，后面所有环节都是可预期的。改裁切设置是权宜之计；统一的源图才是真正的解决方案。

当主题锁死了宽度

如果你的”产品图片”面板只提供裁切选项，说明你的主题在注册 WooCommerce 支持时声明了固定宽度：

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

主题传入这些值时，WooCommerce 会把宽度控件从自定义器里移除，只留下比例。这不是 bug，也不是主题在为难你——主题的产品布局 CSS 就是围着这些具体像素宽度写的，让你随便改会把网格搞乱。

你可以在子主题的 functions.php 里用针对单个尺寸的过滤器覆盖它们：

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

同样的写法也适用于 woocommerce_get_image_size_thumbnail。而且这也是修改图库缩略图的唯一途径，因为它没有界面。

把代价直说了：覆盖一个被锁死的宽度，意味着 WooCommerce 生成的文件不再和主题 CSS 预期的对得上。多数情况下图片只是在浏览器里缩放一下，看着没事，因为它现在比容器还大。但有时候主题用的是固定高度的容器，你就会看到黑边或者溢出。先在一个产品上测试，再去重新生成那 2000 张。

改了尺寸就得重新生成

每一项尺寸设置都只影响新上传的图片。已有产品会继续输出它们上传当时生成的文件，所以在你重建之前，前台不会有任何变化。

保存自定义器时，WooCommerce 会启动一个后台重新生成任务。小目录上这就够了。大目录上它取决于 WP-Cron 能否可靠触发，而低流量店铺往往做不到，结果你得到一个只重建了一半的图库。还是自己跑吧：

wp media regenerate --yes

只重建产品图片：

wp media regenerate --yes --post_type=product

如果你想在手动处理时把后台任务先挡掉：

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

重新生成有两件事不会做。它不会删掉旧文件——你的上传目录会留着之前设置下产生的每一个无用派生文件，而且只会越攒越多。另外，它也没法生成比源图更大的尺寸，因为 WordPress 不放大图片。如果你把主图宽度设成 1200，而产品照只有 800px 宽，那么 1200px 的文件根本不会生成；浏览器拿到 800px 的文件去拉伸，srcset 也拿不出更好的选择。

到底该上传多大的图

目标是正方形源图，尺寸大约是你配置的最大宽度的两倍——600px 主图配 1200x1200，主题用 800px 就配 1600x1600。这既覆盖了 2 倍视网膜屏，也给了 WordPress 足够的像素去生成每一个派生尺寸而不用放大。让所有产品保持同样的尺寸，网格才会整齐。

还是没解决？

如果尺寸配置正确、也重新生成过了，某个产品看起来还是不对，那就在新标签页里打开这张图，读一下文件名。如果尺寸后缀跟你配置的任何一个尺寸都对不上，说明是别的东西注册了它。完全没有后缀，则说明 WooCommerce 退回用了原始尺寸文件，这几乎总是意味着源图对你要的那个尺寸来说太小了。把那个源文件放进图片尺寸工具跑一遍，把 WordPress 应该生成的东西和浏览器实际加载的东西对比一下——两者对不上时，中间通常坐着一个图片优化插件或者 CDN 的图片处理服务。