如何移除WooCommerce单产品图库缩略图编号并紧凑排列图片

这些恼人的编号大概率是主题通过CSS伪元素生成的，或是某个插件/自定义功能添加上的，试试下面几种解决方案：

方法1：用CSS快速隐藏编号并调整布局 #

这是最省心的解决方式，直接通过自定义CSS覆盖原有样式：

1. 进入WordPress后台 → 外观 → 自定义 → 额外CSS（或主题自带的CSS编辑器）
2. 粘贴以下代码：

/* 彻底移除缩略图左侧的编号 */
.woocommerce-product-gallery__thumbnail:before {
    content: "" !important;
    display: none !important;
}

/* 让缩略图紧凑排列，可根据你的主题微调数值 */
.woocommerce-product-gallery__thumbnail {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.woocommerce-product-gallery__thumbnails {
    gap: 8px !important; /* 调整缩略图之间的间距，按需修改 */
}

3. 保存设置后刷新产品页查看效果。

如果上面的CSS选择器不生效（不同主题的类名可能有差异），你可以自己排查：右键点击带编号的缩略图 → 选择「检查/审查元素」，找到编号对应的元素或伪元素，把代码里的.woocommerce-product-gallery__thumbnail替换成你找到的类名即可。

方法2：检查主题或插件的设置开关 #

不少主流主题（比如Flatsome、Divi）会自带产品图库的自定义选项，可能藏着「显示缩略图编号」的开关：

• 进入主题的自定义面板，找到产品详情页相关的设置项，看看有没有类似选项，直接关闭即可。
• 另外检查是否安装了专门的产品图库插件，插件设置里也可能有这个开关，找到后关闭。

方法3：修改主题函数（新手谨慎操作） #

如果是主题通过PHP代码生成的编号，需要找到对应函数移除，但务必先创建子主题，避免主题更新后代码丢失：

• 打开子主题的functions.php文件
• 搜索类似woocommerce_product_gallery_thumbnail相关的函数，找到添加编号的代码段，注释掉或直接删除。

要是还是没解决，可以告诉我你的主题名称，我再帮你针对性调整~

内容的提问来源于stack exchange，提问作者fernandod