如何将WooCommerce页面内容宽度设置为1200px？

1. 用CSS覆盖默认内边距与宽度限制 #

WooCommerce默认会给店铺页面的主容器添加左右内边距，导致实际可用宽度小于设置的1200px。将以下代码添加到子主题的额外CSS（外观→自定义→额外CSS）或子主题的style.css文件末尾：

/* 统一调整WooCommerce所有页面的主容器宽度 */
.woocommerce-page .site-main,
.woocommerce-single-product .site-main {
    max-width: 1200px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto;
}

添加后刷新店铺页面，检查宽度是否生效。

2. 检查子主题的WooCommerce模板文件 #

如果使用子主题覆盖了WooCommerce的模板（子主题目录下存在woocommerce文件夹），打开archive-product.php（商品列表/分类页）、single-product.php（单个产品页）等文件，查找容器的宽度设置代码，将max-width值修改为1200px，并移除多余的内边距设置。

3. 排查插件冲突 #

部分WooCommerce扩展插件（如布局优化、页面 builder 类插件）会强制修改店铺宽度。暂时禁用所有非必要插件，仅保留WooCommerce核心插件，验证宽度是否恢复正常。若恢复，再逐个启用插件，定位导致宽度异常的插件并调整其设置。

4. 用浏览器开发者工具定位问题来源 #

按下F12打开浏览器开发者工具，选中店铺页面的内容容器，查看Elements面板中的CSS样式，找到限制宽度的具体规则（比如某个类的max-width或padding），针对性编写CSS覆盖该规则。

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