在WooCommerce中,你可以通过定制器配置产品目录的显示方式。本文将详细解释配置产品页面的展示内容、排序方式、每行显示产品数量以及每页显示产品的行数。
![图片[1]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514112500263-image.png)
1. 进入产品目录设置
要编辑产品目录的设置,请导航至:
外观 > 自定义 > WooCommerce > 产品目录。
在“产品目录”菜单中,你可以配置以下设置:
![图片[2]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514112637818-image.png)
2. 配置商店页面显示内容
商店页面可以显示产品、类别,或两者都显示。我们建议选择产品或类别,以帮助客户快速找到他们想要的商品。
配置商店页面:
- 在 商店页面显示 下拉菜单中,选择产品或类别。
![图片[3]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514112709122-image.png)
- 选择后,你可以在右侧预览你的选择效果。
![图片[4]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514112721139-image.png)
- 点击 发布 保存设置并使其生效。
![图片[5]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514112739860-image.png)
3. 配置分类页面显示内容
与商店页面类似,分类页面可以显示产品、子类别,或两者都显示。建议仅选择其中一个选项。
配置分类页面:
- 在 分类显示 下拉菜单中,选择产品或子类别。
![图片[6]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113434455-image.png)
- 选择后,你可以在右侧预览你的选择效果。
![图片[7]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113450189-image.png)
- 点击 发布 保存设置并使其生效。
![图片[8]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113457977-image.png)
4. 设置默认产品排序
默认产品排序允许你控制产品显示的顺序,影响商店和分类页面上产品的默认排列顺序。客户仍然可以选择其他排序方式。
默认排序选项:
- 默认排序(自定义排序 + 名称):按名称字母顺序显示产品。
- 按销量排序:按销售数量从高到低排序。
- 按平均评分排序:根据平均评分从高到低排序。
- 按最近添加排序:按添加到商店的时间从新到旧排序。
- 按价格排序(升序/降序):按价格从低到高或从高到低排序。
![图片[9]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113513966-image.png)
选择默认排序:
- 从下拉菜单中选择一个选项。
![图片[10]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113536366-image.png)
- 预览你的选择并点击 发布 保存设置。
![图片[11]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113543687-image.png)
5. 每行显示的产品数量
在商店和分类页面上,你可以选择每行显示多少个产品。考虑以下因素来设置适当的数量:
- 产品图片的大小
- 计算机/笔记本、平板电脑或移动设备上的显示空间
- 提供给客户的最佳浏览和购买体验
设置每行显示产品数量:
- 使用箭头增加或减少每行显示的产品数量。
![图片[12]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113559648-image.png)
- 预览你的选择并点击 发布 保存设置。
![图片[13]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113613811-image.png)
- 以下是使用相同设置的不同视图的示例。
![图片[14]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113740145-image.png)
![图片[15]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113754849-image.png)
![图片[16]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113806160-image.png)
图片尺寸和外观的缩放比例会根据你使用的主题而有所不同。
6. 每页显示的行数
“每页显示行数”允许你选择在商店和分类页面上显示多少行产品。考虑以下因素来设置合适的行数:
- 产品图片的大小
- 你销售的产品数量
- 计算机/笔记本、平板电脑或移动设备上的显示空间
- 提供给客户的最佳浏览和购买体验
设置每页显示的行数:
- 使用箭头增加或减少每页显示的行数。
![图片[17]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113901819-image.png)
- 预览你的选择并点击 发布 保存设置。
![图片[18]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113910520-image.png)
保证你的设置在不同设备上的展示效果良好。使用不同的屏幕尺寸测试商店页面的外观,例如在计算机、平板和手机上查看效果。
![图片[19]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514113941380-image.png)
![图片[20]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514114000842-image.png)
![图片[21]-如何在WooCommerce中配置和优化产品目录展示](https://www.361sale.com/wp-content/uploads/2025/05/20250514114024230-image.png)
总结
使用WooCommerce定制器,你可以灵活配置商店页面和分类页面的显示内容、排序方式以及每行和每页的产品数量。这些设置有助于提供一个良好的页面展示效果,并保证产品展示方式与商店需求相匹配。
最近更新
| 联系我们 | |
|---|---|
| 教程看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
客服微信
|
| ① 电话:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| ③ 邮件:info@361sale.com | |
| ④ 工作时间:周一至周五,9:30-18:30,节假日休息 | |




















![表情[aixin]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/aixin.gif)
![表情[dabing]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/dabing.gif)

暂无评论内容