WooCommerce商品页面全屏宽度实现求助：CSS代码无效问题

你之前的CSS没生效，大概率是样式优先级不够，或者没覆盖到主题/插件的额外容器，试试下面的方案：

• 优先用商品页面专属选择器+强制优先级覆盖，避免影响其他页面：

/* 仅针对WooCommerce商品页面设置全屏宽度 */
body.woocommerce-product-page .main-container,
body.woocommerce-product-page #page,
body.woocommerce-product-page .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
}

注：加!important是为了压过主题原有样式的优先级，去掉左右内边距和外边距是因为很多主题会给容器加留白，导致无法真正全屏。

• 检查主题自带的布局设置：很多WooCommerce兼容主题（比如Storefront）在「外观->自定义->布局」里有商品页面的宽度选项，直接改成「全屏」比写CSS更稳妥。

• 如果还是不行，检查页面元素的嵌套结构（按F12打开开发者工具），看是否有额外的容器（比如.site-content/.content-wrapper），把它们也加入CSS规则：

body.woocommerce-product-page .site-content,
body.woocommerce-product-page .content-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

• 最后记得强制刷新浏览器（Ctrl+F5），清除缓存后再看效果。

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