如何使用Elementor制作WooCommerce产品分类页

文章最后更新于 2025-10-24

本文是Elementor高级教程内容之一，我们将需要用到Elementor Pro来解锁WooCommerce Builder功能。虽然WooCommerce插件会给我们提供预设的产品分类页和单个产品的样式，但样式会比较固定。

下图就是我们WooCommerce默认的产品分类页面：

有关键抬头区（H1，产品分类名）、产品卡片、产品排序功能。

但是如果我们想要增加更多的内容，比如：产品分类的描述、产品筛选功能，增加FAQ、增加证书认证，或者想要优化调整页面的UI，那么原生的WooCommerce产品分类页就满足不了我们的需求了。

而使用Elementor Pro + WooCommerce，我们不仅能够像搭积木一样高效搭建产品分类页面，还能精细控制卡片信息位与筛选交互，让页面真正服务于线索获取与转化。

在开始本教程之前，你需要：

安装Woocommerce插件
安装Elementor Pro插件

第一步：创建产品分类列表模板

通过Templates > Add New 进入到下面这个页面：

选择添加Product Archive模板。

然后我们输入模板的名字，点击“Create Template”。

然后Elementor会带我们来到这个模板库：

我们可以从这个模板库中选择合适自己的模板。

插入产品分类页模板后样式如下：

我们这时候就已经初步搭建好产品分类页。我们如果对模板不满意，可以在它的基础上根据自己的喜好来进行设计。

因为我们教程主要是讲解为主，所以就不使用模板搭建，我们这里演示从一个白板页面开始来搭建产品分类页。

一般我们做B2B外贸网站，会在产品分类页中会包含以下三个小部件：

Archive Title – 产品分类标题（必选项）：在产品分类归档页里动态显示“当前产品分类名”。正确用法是用它做全页唯一的 H1标题，标题中
Archive Products – 分类下的产品（必选项）：这个小部件的作用是自动列出该分类下的产品。如果是做询盘站点，可以隐藏价格和购物车，把卡片信息位改成：标题 + 3–5 个关键参数（材质/尺寸/认证/交期）+ CTA。
Archive Description – 产品分类描述（推荐加）：把该分类的说明文字动态取出来显示。用于解释应用场景、参数范围、能力与认证，对B2B网站来说很关键。

下面我们就用这三个小部件来搭建一个基础的自定义产品分类页：

第二步：设置产品分类标题

我们在空白模板中新建一个Flexbox容器。

首先点击“+”号：

然后选择Flexbox容器：

再选择Column排列方式（即从上往下排列）的容器 (第一个就是)：

将Archive Title这个小部件拖至容器中：

拖动进去后会显示成下图这样（因为是两个不同时间段写的教程，所以背景颜色会有区别）：

如果我们想要把“Archive:”文案前缀去掉，则可以点击Archive Title打开Settings，把Include Context设置为No。

第三步：设置产品卡片

我们这里可以使用几个小部件来展示对应分类的产品：

Archive Products
Post

选项一：Archive Products小部件

这个是最常使用在产品分类页面中的小部件，我们只需要将该小部件拖动到Elementor编辑器右侧的容器当中，按照自己需要的布局来展示即可。我们在上面步骤中插入的模板就使用了该小部件：

Archive Products小部件几个常见的设置：

Columns：设置每行显示的产品数量。选择3列意味着每行会排列3个产品。这有助于控制页面的整体布局和视觉密度
Rows：设置在页面上显示的产品行数
Pagination：控制产品列表的分页方式及其显示
Allow Order：启用或禁用用户对产品列表的排序功能。开启后，用户可以根据自己的偏好对产品进行排序，如按价格从低到高、按最新发布、按最受欢迎等
Show Result Count：是否显示符合当前筛选条件的产品总数。例如，显示“显示1-12条，共50条结果”，让用户了解当前浏览的产品数量和总量。这个可以帮助用户了解可供选择的产品范围，提升浏览体验和决策效率
Query：Query选项里面的Source我们保持默认的”Current Query”即可。下方的Include By不用设置，除非你想每个不同的分类都展示特定的分类下的产品。

这个Archive Products小部件还可以让我们设置评分、价格和折扣和购物车按钮（B端网站一般没有）的样式。

如果我们想要去掉Archive Products小部件中的Rating（评分）或者购物车按钮，那么我们需要进入到：

“Appearance” > “Customize” > “WooCommerce” 里面去设置。

Archive Products小部件的功能跟样式设置不在同一个地方，样式设置在Elementor编辑器中，而功能设置则是在Appearance > Customize > WooCommerce里面，这是这个小部件经常让人摸不着头脑的地方。

这个小部件局限的点在于它的产品展示形式有限。只有上面图片，下面文字信息这种产品展示形式。

如果我们想要设置成左边图片，右边文字这样的产品展示格式，那可以使用Post这个小部件来实现。

选项二：Posts小部件

我们在Elementor顶部栏中点击“+”号，然后搜索Posts小部件，将其拖动到我们想要摆放的位置。

我们只需要在Posts小部件的”Content” > “Query” > “Source”中设置为”Current Query”，即可将Post小部件变成功能跟Archive Products类似的小部件。

但是Posts小部件可以让我们实现产品的左边图片，右边文字的布局方式。缺点是没有评分、价格、购物车这些功能。不过B端产品大多也不需要。

在这里我们常用的Posts小部件的设置包括：

Skin（皮肤）：定义产品展示的整体样式或布局。包含Classic、Cards、Full Content三种展示形式。

只有设置为Classic我们才能够将产品设置为左边图片、右边文字这样的展示形式：

设置为Cards的时候的展示形式：

Post小部件中其他常用的功能分别是：

Query（查询）：设置查询的条件，我们如果想使用Posts小部件来展示产品，那么需要设置成Current Query。
Columns（列数）：设置每行显示的产品数量。例如，选择3列意味着每行会排列3个产品。
Avatar（头像）：头像。个人习惯关掉。
Meta Data（元数据）：控制是否显示产品的元数据，如发布日期、作者、评论数等。
Excerpt（摘要）：选择是否显示产品的摘要。
Read More Text（阅读更多文本）：自定义“Read More”按钮的文本内容。可以根据需要调整按钮的文字，例如“View Product”、“Learn More”等，以匹配网站的风格或语言。需要将Read More设置打开才能够进行设置。
Image Ratio（图片比例）：定义图片的宽高比例，右侧的数字是高宽比，设置为0.6就是高宽比为3:5，设置为1就是1:1。
Open in new window（在新窗口中打开）：选择点击按钮时，是否在新标签页或窗口中打开链接。这可以影响用户的导航体验，避免用户离开当前页面。
Pagination（分页）：控制是否启用分页功能，如数字分页、下一页/上一页按钮等。