如何使用Bebuilder页面编辑器制作产品分类页模板

本篇文章将学习如何使用bebuilder页面编辑器从零开始设计一个外贸独立站产品分类页。

Woocommerce 介绍

正式开始前，先来介绍一个 WordPress 插件：Woocommerce，一个可以为 WordPress 博客网站添加电子商务功能的网站插件。可以免费为网站提供商品管理、订单管理、会员管理、优惠券管理等功能，一般B2C或者B2B网站都会用到这个插件。

Woocommerce 安装

Woocommerce 插件安装步骤如下：

1. 打开 WordPress 后台

2. 选择安装新插件

3. 输入 Woocommerce 关键词

4. 点击安装并启用

如果使用 Bebuilder Pre-built Websites 导入电商主题模板时会自动安装Woocommerce 插件，无需再次安装。

因为本篇教程主要是设计产品列表页面，所以插件安装成功后，无须使用安装向导，可跳过引导设置，后续自行配置。我之后会看情况出一个 Woocommerce 插件教程的专题，敬请期待。

注意：正式开始设计页面前，需要添加一些产品，至少10个，以保证设计页面的显示效果。

也可以直接导入 Pre-built Websites 的电商模板，里面会自带一些产品，省去了手动添加产品的麻烦。

推荐阅读：《Betheme如何导入预设模板和数据》

Bebuilder创建自定义产品列表模板

创建模板

步骤如下：

1. 打开 WordPress 后台 -> 点击左侧 Templates 。

2. 点击上方 Add New 添加新模板。

3. 选择模板类型为 shop archive。

4. 输入模板名称，英文！这里的名称会转变为URL，编辑模版时可以把标题改回中文。

隐藏子标题

新建元素框架前，由于标题太碍事，因此需要隐藏，也更方便我们设计，步骤如下：

进入bebuilder后，点击右侧 Template options ，Subheader 处更改为 Hide，保存并刷新页面即可。

设计基本的产品列表框架

根据竞争对手的某些设计，我们可以在产品列表页放入以下元素：

• 产品列表

• 产品过滤器

• 产品类目介绍

• 询盘表单

• 产品类目标题

• FAQ

当然，以上可以根据实际设计情况随时修改，确定好要添加的元素后，下面开始进行设计，步骤如下：

1. 新建 Section 并添加 3 个 Wrap ，其中第一个Wrap占一行，后两个 Wrap 各占 1/5 和 4/5 。

2. 第 1 个 Wrap 中添加 Shop title 元素或者 Heading 元素以及 Category description 元素，第 2 个 Wrap 中添加 Slider bar Widget （小工具），第 3 个 Wrap 中添加 Shop products 元素。

3. 新建 Section ，里面添加 2 个 Wrap , 其中第 1 个 Wrap 中添加 FAQ 元素，第 2 个 Wrap中添加 询盘表单功能，如果懒得设计的话可以导入pre-built section。

自定义 item 元素的内容和样式

这里主要讲 Shop products 元素的样式设置，以下为调整示例：

• Products per page：显示产品数量，只少12个，多的产品会放置到第二页。

• Columns：设置产品列数，可更改为 list 模式，建议为 3 列。

• Order：设置产品排序方式，可按照上传时间，热销产品，产品评价以及相关度对产品排序，根据个人喜好选择。

• Description：设置产品描述，一般不建议打开。

• Add to cart button：增加“添加到购物车”功能，由于这个网站是B2B类型的网站，所以不建议打开此功能，B2C类型的则可以打开。

• Title tag：设置产品标题的 H-tag 标签，建议设置为H3。

• Products List Standardization：产品显示格式，建议保持默认。

• Infinite Load More：产品无限自动加载，当客户拖动至产品列表底部时，产品自动加载，建议不打开，因为在下方我们添加了询盘和FAQ功能，打开会影响询盘数量，也不利于用户体验。

• Active filters：是否开启产品过滤器，这个过滤器是产品列表上方的内容，建议打开，若影响整体的格式可选择关闭。

• Products per page：过滤器设置，更改产品显示数量。

• Layout switch：过滤器设置，更改产品显示方式。

• List sorting：过滤器设置，更改产品排序方式。

• Results count：过滤器设置，显示产品数量。

• Order：可拖动来改变列出内容的显示位置。

Slider bar Widget 小工具设置

Slider bar Widget 点击 Penceil icon 时是无法进行自定义设置的，不过点击右侧的“ ？”，可以看到详细的设置步骤，这里我就以自己的方式再重新讲下，步骤如下：

1. 打开 WordPress 后台 -> 左侧betheme -> theme options -> Sliders -> general -> add slider，注意右侧的提示信息，命名时不要使用其列出的关键词，且为英文，完成并点击右上角保存

2. wordpress后台 -> 外观 -> 小工具 -> 选择刚刚新建的 Slider -> 选择“+”，浏览全部，这里可以选择添加各种 WordPress 小工具，根据自己的需求添加即可，完成后点击右上角的更新保存。

3. 打开bebuilder编辑器，点击 Slider bar Widget 的 Penceil icon，选择刚刚新设计的小工具，保存并发布即可。

设置显示条件，保存更新或发布

完成所有设计后，点击左下角 Publish 按钮，此时会出现 Display Conditions （显示条件），可以自定义设计的模板都应用至哪些页面，其中有两个选项，Include 和 exclude ：

Include（包含）：表示规则为包含，右侧显示了页面包含的条件。
exclude（不包含）：表示规则为不包含，右侧显示了不包含的条件。

由于此模板设计的为 Shop archive ，因此将规则应用为 Shop，点击 Save 保存即可。

设计页面时的注意事项

注意1： Heading 与 Shop title 元素时有一定区别的，添加 Heading 元素后，里面的文字不会根据产品类目改变而有变化，需要手动编辑此模版进行更改；而 Shop title 是一个动态数据，会根据选择的产品分类页不同而改变。

注意2：强烈建议在产品类目中添加一定的文字，但不宜太多，这是放置页面内链绝佳的地方，有助于提升页面的权重，提高类目页关键词排名。

以上就是使用 Bebuilder 页面编辑器设计一个B2B外贸独立站的全部内容，里面涉及到了一些 Woocommerce 插件的相关内容，由于关于此插件的内容太多，所以这里只是简单讲了一点，够用即可，后续我会出相关的专题专门讲解Woocommerce插件的使用。