本文是Elementor高级教程内容之一，我们将需要用到Elementor Pro来解锁WooCommerce Builder功能。虽然WooCommerce插件会给我们提供预设的产品分类页和单个产品的样式，但样式会比较固定。WooCommerce结合Elementor Pro，我们可以根据自己的喜好来高效搭建产品分类页和产品页面。
在开始本教程之前，你需要：
- 安装Woocommerce插件
- 安装Elementor Pro插件
这是我们WooCommerce默认的产品分类页面：
使用Elementor Pro创建产品分类列表模板
通过Templates > Add New添加Product Archive模板，然后我们输入模板的名字，点击“Create Template”。
我们可以从Elementor给我们提供的模板库中选择合适自己的模板。
插入产品分类页模板后样式如下：
我们这时候就已经初步搭建好产品分类页，如果我们对模板不满意，可以根据自己的喜好来进行设计。
我们只需要点击对应的小部件，然后从左边的“Content”选项卡更改小部件展示的内容，以及“Style”选项卡中更改样式即可。
一般的B端网站产品分类页中会包含以下三个小部件，对应不同的：
- Archive Title – 分类标题
- Archive Products – 分类下的产品
- Archive Description – 产品分类描述
产品分类页标题
我们现在做的这个产品分类页是一个Elementor模板，都是需要设置展示条件（Display Conditions）的。
如果我们想要一个产品分类的模板应用在多个产品分类中，则需要用Archive Title来展示对应产品分类的标题。
如果我们只要一个产品分类模板展示在一个产品分类页中，那么这里我们用Heading小部件的固定文本是没有关系的。
如果是第一种情况，那么我们需要：
1） 将Heading小部件更改为Archive Title
2）或者删掉Heading小部件，将Archive Title加入到产品分类页中
将Heading小部件更改为Archive Title
选中刚刚插入的模板中的Heading小部件，打开小部件的选项卡，点击这里的Dynamic Tags。
选择Archive Title。
设置为Archive Title的话，会出现Archive: 的文字前缀。
如果我们想要把“Archive:”文案前缀去掉，则可以点击Archive Title打开Settings，把Include Context设置为No。
或者直接把这个小部件删掉，重新添加Archive Title小部件：
点击顶部栏的“+”号，添加Archive Title小部件。
设置分类产品小部件
我们这里可以使用几个小部件来展示对应分类的产品：
- 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（分页）：控制是否启用分页功能，如数字分页、下一页/上一页按钮等。
我们利用上面的这些设置做一下细微的调整，可以实现这样的效果：
产品分类描述
产品分类描述我们使用的是Archive Description这个小部件。
这个小部件会显示产品分类的描述，对应”Products” > “Categories” > “具体分类” > “Description”里面的内容。
设置展示条件并发布
我们点击顶部栏右上角“Publish”按钮右侧的下箭头，选择“Display Conditions”
我们在这里设置展示条件，选择在哪些产品分类下展示我们刚刚创建的模板。
点击Save & Close，然后点击“Publish”按钮。
我们打开对应的产品分类页即可看到我们在上面设置的效果。
