如何让WooCommerce店铺页面显示全屏宽度（适配Fascinate子主题）

嘿，我来帮你搞定这个店铺页宽度的问题！看你说用Fascinate子主题，想让WooCommerce店铺页和作品集页一样宽，之前试的CSS要么影响其他页面要么没效果，这就给你几个精准的解决方案：

方案一：用页面专属CSS精准调整（推荐新手） #

WordPress会给不同页面自动添加专属的识别类，WooCommerce的店铺页会带有woocommerce-shop这个body类，我们可以用它来只修改店铺页，完全不影响其他页面：

1. 进入你的WordPress后台，依次点击「外观」→「自定义」→「额外CSS」
2. 粘贴下面的代码：

/* 让WooCommerce店铺页匹配作品集页宽度 */
body.woocommerce-shop .site-content {
    max-width: 100% !important;
    padding: 0 20px; /* 可选，避免内容贴到浏览器边缘，可按需调整数值 */
}
/* 如果主题用.container类限制宽度，补充这段 */
body.woocommerce-shop .container {
    max-width: 1920px; /* 对应你作品集页的最大宽度，可根据需求修改 */
    width: 100%;
    margin: 0 auto;
}

3. 点击「发布」，刷新店铺页看看效果。如果内容还是贴边，就调整padding的数值；如果宽度还是不对，你可以把1920px改成你想要的最大宽度，比如100%就是完全全屏。

方案二：用钩子加载专属样式（解决CSS优先级问题） #

要是上面的CSS没生效，可能是主题自带的CSS优先级更高，这时候我们可以用WordPress的钩子，只在店铺页加载我们的样式：

1. 进入后台「外观」→「主题文件编辑器」，选择Fascinate子主题的functions.php文件（注意：修改前一定要备份文件！）
2. 在文件末尾粘贴下面的代码：

// 仅给WooCommerce店铺页添加宽度调整样式
function custom_woocommerce_shop_width() {
    // 只在店铺页执行
    if (is_shop()) {
        ?>
        <style type="text/css">
            body.woocommerce-shop .site-content {
                max-width: 100% !important;
                padding: 0 20px;
            }
            body.woocommerce-shop .container {
                max-width: 1920px;
                width: 100%;
                margin: 0 auto;
            }
        </style>
        <?php
    }
}
add_action('wp_head', 'custom_woocommerce_shop_width');

3. 点击「更新文件」，刷新店铺页就能看到效果了。这个方法的样式优先级更高，不会被主题的CSS覆盖。

方案三：修改主题模板文件（进阶用户） #

如果上面两个方法都没效果，可能是你的Fascinate子主题重载了WooCommerce的店铺页模板，有单独的宽度限制：

1. 先检查你的子主题文件夹里有没有woocommerce/archive-product.php文件，如果没有，就从父主题的woocommerce文件夹里复制这个文件到子主题的对应路径（一定要用子主题修改，避免主题更新后丢失修改）
2. 打开这个模板文件，找到里面限制宽度的容器代码（比如<div class="container">或者类似的带宽度限制的标签）
3. 把这个容器的类改成和你作品集页一样的容器类，或者直接调整它的宽度属性，让它和作品集页的布局逻辑一致。

最后给你个小提醒：修改完任何设置后，记得清空浏览器的缓存，有时候旧的缓存会让你看不到新的样式效果哦！

备注：内容来源于stack exchange，提问作者Blanka Morikawa