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

上一篇介绍了如何设计一个产品列表页，那本篇文章将学习如何使用Bebuilder页面编辑器设计一个外贸独立站的产品详情页。

Woocommerce 介绍

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

Woocommerce 插件安装步骤如下：

wordpress安装woocommerce插件

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

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

跳过woocommerce引导设置

注意：正式开始设计页面前，需要添加一些产品，至少 1 个，其中需要包含产品介绍、产品图片等，以保证设计页面的显示效果。

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

步骤如下：

bebuilder创建产品详情页模板

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

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

bebuilder隐藏页面子标题

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

注意，从我接触到客户和对许多B2B外贸独立站的分析来看，在建站过程中会涉及到两个问题：

产品详情页价格问题：有些外贸B2B独立站的产品详情页会标明产品价格，而有些则不会，对于这种做法，我的建议是尽量不要标明，并直接添加 CTA 按钮或者询盘表单来留下客户的邮箱，在与客户的沟通中透露产品价格，也方便后续的电子邮件营销。
是否使用 Woocommerce 插件的问题：有的B2B类型的外贸独立站不会使用 Woocommerce 插件来设计产品详情页，其实这也是可以的，因为 Woocommerce 插件太过臃肿，服务器配置低的话会拖累网站性能。你可以将一类的产品当成一个普通的页面（Pages）来设计，同样也可以达到效果。还有的读者会问：如果不用 Woocommerce 插件那产品列表页岂不页无法设计了？其实 Betheme 主题自带了一个 Portfolio 文件夹功能，再利用 Loop 功能，也会很容易设计一个产品列表页，这里就先简单提一句，后续我会出这部分教程的。

下面开始进行设计，步骤如下：

新建 Section 并添加 2 个 Wrap ，各占 1/2 ，第一个 Wrap 中添加 Product images 元素，第二个 Wrap 中添加 Product Breadcrumbs 、Product Title 、Product rating 、Product Additional Information 、 Product Meta 、Contact Form 等元素。

bebuilder设计产品详情页

以上，简单的框架就搭建完成了，剩下的就是根据自己的审美和需求做一些元素的内容和样式的修改了，因为前面的许多文章都有讲述，这里我就不再啰嗦了。