WooCommerce 的 Shop 页面（产品分类列表）怎么编辑修改？全面指南

在使用 WooCommerce 搭建商城的过程中，很多站长都会遇到一个常见问题：如何编辑 Shop 页面（商店页面）？
WooCommerce 默认会自动生成一个产品归档页面，展示所有商品，但这个页面往往比较简单，无法满足大多数电商网站的个性化需求。本文将为你详细介绍 两种常见方式来编辑 Shop 页面：一种是 可视化编辑器 Elementor，另一种是 通过代码手写定制。

一、WooCommerce Shop 页面概览

WooCommerce 的 Shop 页面本质上是一个 产品归档页面（archive-product.php），展示的是你所有上架的商品。

默认情况下，你只能在 WordPress 设置 → 阅读 中选择一个页面作为“商店页面”；
这个页面不会加载你自己写的内容，而是由 WooCommerce 模板文件自动渲染；
因此，要想自定义它，就需要使用 页面构建器（如 Elementor） 或者 自定义代码。

二、使用 Elementor 编辑 WooCommerce Shop 页面

如果你不想碰代码，Elementor Pro + WooCommerce Builder 是最佳选择。

步骤 1：安装插件

安装并启用 Elementor 和 Elementor Pro；
确保已启用 WooCommerce 插件。

步骤 2：创建 Shop 页面模板

进入 Elementor → 模板 → Theme Builder；
点击 新增模板 → 选择 Archive（归档页面）；
选择 WooCommerce 提供的 Shop 页面模板。

步骤 3：拖拽小工具设计页面

Elementor Pro 提供了专门的 WooCommerce 小工具，比如：
- 产品归档
- 产品分类
- 产品搜索框
- 购物车按钮
你可以像设计普通页面一样，自由拖拽这些组件。

步骤 4：设置显示条件

在 Elementor 中点击 发布 → 显示条件；
选择 Include → Shop Page；
保存后即可替换默认的 Shop 页面。

👉 优点：操作直观，所见即所得，不需要写代码；
👉 缺点：依赖 Elementor Pro，可能增加额外开销。

三、通过代码编辑 WooCommerce Shop 页面

如果你希望更轻量化或者需要高度定制化，直接修改主题模板是一个选择。

方法 1：创建子主题并重写模板

WooCommerce Shop 页面由 archive-product.php 控制。
操作步骤：

创建并启用子主题（避免更新主题时丢失修改）；

在子主题目录下新建：

/your-child-theme/woocommerce/archive-product.php

将 WooCommerce 插件中的同名文件复制过来：

/wp-content/plugins/woocommerce/templates/archive-product.php

根据需求修改 HTML 结构、增加自定义字段或调整布局。

方法 2：使用 WooCommerce Hooks（推荐）

WooCommerce 提供了大量钩子，允许你在不修改模板文件的情况下插入内容。

常见示例：

在 Shop 页面标题上方添加一段自定义文案

add_action('woocommerce_before_main_content', function() {
    if (is_shop()) {
        echo '<div class="custom-shop-banner">欢迎来到我们的商店！精选商品等你发现</div>';
    }
});

修改产品循环中每行显示的数量

add_filter('loop_shop_columns', function() {
    return 4; // 每行显示 4 个商品
});

修改每页显示的商品数量

add_filter('loop_shop_per_page', function() {
    return 12; // 每页显示 12 个商品
}, 20);

👉 优点：不依赖第三方插件，性能更好；
👉 缺点：需要一定的 PHP 与 WordPress 开发经验。

四、Elementor vs 代码定制：如何选择？

方式	适合人群	优点	缺点
Elementor	零代码用户、注重设计	拖拽可视化、快速搭建、灵活设计	依赖付费插件，性能略有开销
代码定制	开发者、追求极致性能	更轻量化、完全掌控	学习成本高、开发周期长