WooCommerce 平台指南
WooCommerce 产品图片尺寸与缩略图
一次看清 WooCommerce 建议的上传尺寸、它会从每张上传图生成的三种图片尺寸、控制裁切的设置,以及排查产品图模糊的简短清单。
WooCommerce 建议上传至少 800 x 800 像素的产品图片。它会从每张上传图生成单品图、目录图和产品缩略图,最终显示多大由你的主题决定。
下面的数值整理自 WooCommerce 官方文档。主题和后续版本可能改变这些设置,批量上传前请先查看店铺的 Customizer 和最新文档。

01 · 当前数值
WooCommerce 产品图片尺寸速查
以下是 WooCommerce 为产品图片公布的数值。官方文档没有规定的项目,表中会直接写明,不做补充推测。
| 字段 | WooCommerce 数值 | 怎么用 |
|---|---|---|
| 建议上传尺寸 | 至少 800 x 800 像素 | WooCommerce 说明这个尺寸用作单品图、目录图和缩略图都能正常显示。细节较多的产品,用更大的图片效果更好。 |
| 单品图 | 不裁切显示;默认宽度 600 像素 | 这是商品详情页上的主图。它保持上传图的比例,因此所有主图最好统一一个宽高比。 |
| 目录图(缩略图) | 默认宽度 300 像素,裁成正方形 | 用于商店页、分类页、相关商品、追加销售和交叉销售。让商品居中,方形裁切时就不会被切掉。 |
| 图库缩略图 | 始终裁成正方形;默认 100 x 100 像素 | 显示在主图下方,用于切换图库图片。在这个尺寸下商品也应能一眼认出。 |
| 缩略图裁切方式 | 1:1 正方形、自定义比例或不裁切 | 在 Appearance > Customize > WooCommerce > Product Images 中设置。这些设置不作用于单品图。 |
| 文件格式与大小上限 | 所核对的 WooCommerce 页面未规定 | 产品图通过 WordPress 媒体库上传,限制来自你的 WordPress 站点和主机,而不是 WooCommerce 本身。 |
来源:WooCommerce 官方文档《Adding Product Images and Galleries》《Product Page and Images》(Customizer)《Fixing blurry product images》及开发者文档《Image sizing for theme developers》,2026 年 10 月 15 日核对。主题可以自行声明图片宽度,此时 Customizer 中的宽度选项会被隐藏。
02 · 裁切设置
为商品目录选择合适的 WooCommerce 缩略图裁切
Customizer 为目录图和缩略图提供三种裁切方式。选哪一种,决定了上传前图片要怎么准备。
默认
1:1 正方形
所有目录图都显示为正方形,商品网格整齐划一。让商品居中,四周留出少量空间,重要部位就不会被裁掉。
自定义比例
自定义比例
高瘦的商品可以填入 3:4 等比例。WooCommerce 提示,尺寸不够匹配该比例的图片无法填满画框,因此所有图片都应按同一比例导出。
保持原样
不裁切
图片保持各自的比例,商品行可能高低不齐。只有所有产品图本来就是同一宽高比时才适合用它。
修改之后
重新生成缩略图
修改宽度、裁切方式或更换主题后,到 WooCommerce > Status > Tools 运行 Regenerate shop thumbnails,旧图片才会按新尺寸重新生成。
03 · 图片模糊
WooCommerce 产品图为什么模糊,怎么解决
WooCommerce 官方排查指南指出,产品图模糊大多是因为上传文件太小,或图片设置低于主题实际显示的尺寸。
检查原始文件
在媒体库中打开图片,查看 Attachment Details 里的尺寸。对大多数主题来说,原图应至少 800 x 800 像素;更小的图片请换成更高分辨率的版本。
对齐主题的显示尺寸
用浏览器开发者工具检查产品图,看主题实际显示多大,再把 Main image width 设为不低于这个值。在 Storefront 主题中,最大的单品图是 800 x 800 像素,放大查看功能需要这个尺寸。
考虑高分屏
要在高分屏上保持清晰,WooCommerce 建议把缩略图设为主题显示尺寸的两倍,例如 80 x 80 的位置设为 160 x 160。图片越大加载越慢,先看看买家主要用什么设备。
重新生成后再检查
换图或改设置后,先重新生成商店缩略图,再刷新商店页、商品页和购物车,确认问题已解决。
04 · 使用 MakeAD 图片
上传前,用 WooCommerce 的尺寸核对 MakeAD 输出
MakeAD 可以把一张产品照片生成新的干净商品图或生活方式场景图。下面说明它的输出与上述数值的关系。
01单功能工具按 1K 输出
产品场景、背景移除等单功能工具按 1K 档位输出。请打开下载的文件,把像素尺寸与 WooCommerce 建议的 800 x 800 以及主题的实际显示尺寸对照,不要把小图硬拉伸。产品场景工具输出 4:5 画幅,如果目录用方形裁切,商品上下要留出空间。
02首页生成器提供 1:1 比例与 2K、4K 档位
选择 1:1 比例即可对应 WooCommerce 默认的方形目录裁切,也可以选与你自定义裁切一致的比例。更高的分辨率档位会消耗更多积分。无论选择哪个档位,都请自己核对导出文件的像素尺寸。
03整个目录保持统一风格
所有主图使用相同的背景风格、商品比例和宽高比,商店网格才会整齐;每张生成图都要与原图对比,确保颜色、形状和标签与实际发货的商品一致。
05 · 上传前确认
发布前检查 WooCommerce 产品图片
检查即将上传的最终文件,并在店铺实际使用的主题中预览。
尺寸
每张原图至少 800 x 800 像素,并且不小于主题显示的最大尺寸,没有一张是从小图拉伸来的。
裁切
商品在方形或自定义比例的目录裁切中保持完整,在 100 x 100 的图库缩略图中也能认出。
主图与图库
产品主图与图库分开设置。WooCommerce 总是把主图放在第一位,不需要再把它加进图库。
缩略图已重新生成
如果修改过宽度、裁切或主题,检查店铺前已重新生成商店缩略图。
同时在 Shopify 销售
每个平台都有自己的图片规则。把同一批图片用到 Shopify 前,请按 Shopify 的尺寸要求重新检查。
也在 Shopify 开店?查看 Shopify 产品图片尺寸需要判断的问题
常见问题
这些回答补充正文中仍需结合场景判断的例外和检查方法。
WooCommerce 产品图片最佳尺寸是多少?
WooCommerce 建议上传至少 800 x 800 像素的产品图片。较小的显示尺寸会由它自动生成;细节较多的产品,用更大的图片效果更好。
WooCommerce 默认缩略图尺寸是多少?
默认情况下,目录缩略图宽 300 像素并裁成正方形,图库缩略图为 100 x 100 像素,单品图宽 600 像素且不裁切。主题可以设置不同的宽度。
怎样让 WooCommerce 不裁切产品图片?
进入 Appearance > Customize > WooCommerce > Product Images,选择 Uncropped,再重新生成商店缩略图。图片会保持各自的比例,除非所有图片比例一致,否则商品行可能高低不齐。
为什么我的 WooCommerce 产品图片很模糊?
通常是上传的文件小于 800 x 800 像素,或图片宽度设置低于主题实际显示的尺寸。上传更大的原图,把宽度调到与主题一致,再重新生成商店缩略图。
一张照片,统一 WooCommerce 商品目录
用一张产品图,生成 WooCommerce 产品图片
上传一张清晰的产品照片到 MakeAD,生成干净的方形主图、生活方式场景或辅助视图,发布前再在店铺里核对像素尺寸和裁切。
生成我的 WooCommerce 产品图