如何让Flatsome主题下的WooCommerce店铺页面与首页同宽？

1. 检查Flatsome主题全局布局设置 #

• 进入WordPress后台，导航到Flatsome > Advanced > Layout
• 找到「Shop Layout」和「Single Product Layout」板块，确认Content Width选项：首页可能设置为「Full Width」，而店铺/产品页误选了「Boxed」或固定像素宽度，改成和首页一致的「Full Width」即可
• 同时检查「Sidebar Position」，如果侧边栏设置导致内容区被压缩，可根据需求调整为「No Sidebar」或调整侧边栏宽度比例

2. 检查WooCommerce页面独立布局 #

• 打开店铺页（或产品页）的编辑界面，点击顶部的UX Builder按钮进入可视化编辑
• 在页面设置面板中找到「Container Width」选项，确保设置为「100%」或与首页相同的宽度参数
• 若用了自定义模板，检查模板是否强制设置了窄容器，切换回默认的店铺模板测试

3. 修复无效的自定义CSS #

• 之前添加的CSS无效通常是选择器权重不足或代码错误，替换为以下代码（添加到Flatsome > Advanced > Custom CSS）：

  /* 重置WooCommerce页面容器宽度 */
  .woocommerce-page .container, .woocommerce-single .container {
      max-width: 100% !important;
      width: 100% !important;
      padding-left: var(--grid-gutter);
      padding-right: var(--grid-gutter);
  }
  /* 调整产品详情区宽度 */
  .woocommerce div.product .summary {
      max-width: none;
  }
  

• 避免直接修改主题核心CSS文件，防止主题更新后代码丢失

4. 排查插件冲突 #

• 临时禁用所有非必要插件（保留WooCommerce和Flatsome官方插件），刷新页面查看宽度是否恢复正常
• 若恢复，逐个重新启用插件，找到导致布局冲突的插件后，尝试更新插件或更换替代插件

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