Day 18 - WooCommerce 测试环境建立 (下)

昨天我们安装完 WooCommerce 和修改 wp-config.php 关於 debug 的设定，今天来把我们要串接永丰金收款服务的商城网站的外观及样本资料等等，都设定好，再接着谈串接的部分，对 WooCommerce 不熟悉的读者，会比较有看故事的感觉。

在测试环境建立的下集，会提到以下：

• 设定商品
• 设定首页
• 设定运送方式
• 设定 WooCommerce 页面

设定商品

汇入商品样本档案

WooCommerce 本身目录下有提供商品样本可以汇入，这样就不用自己建立测试商品。

商品样本的档案位置在：

wp-content\plugins\woocommerce\sample-data

图 18-1: 汇入商品

在後台选则页签「商品」按下「汇入」连结，则开始上图所示的流程。

图 18-2: 商品列表

OK，已经有一些商品样本的使用了，赞赞。不然自己建商品也是蛮耗费时间的。

设定首页

WordPress 本身是以部落格为主的 CMS 软件，即使已经装了 WooCommerce 外挂，一开始也只是多了一些页面路径是支援商城的，例如 /store/ 这个路径是商城首页。

为了让我们的网站看起来就是一个线上购物网站，访客进来可以直接看到商品进行购买，我们来把网站的首页换成商品的目录吧。

图 18-3: 外观 - 自订

从後台的页签「外观 - 自订」进入布景主题客制化预览页面，如上图所示，选择「首页设定」。

图 18-4: 外观 - 自订 - 设定首页

「首页显示内容」选择「静态页面」，再选择「商店」。这样看起来就比较有线上购物网站的 Fu 罗。

设定运送方式

在购物的流程中，需要运送方式及付款方式。付款方式是本次铁人赛下半场要写的永丰金收款专用 WooCommerce 外挂，要後面的章节写完外挂才进行设定。

设定运送方式的步骤如下：

图 18-5: 设定运送方式

运送方式则至少设定一种，让购物车自动套用。如果设定两种(含)以上的话，在购物时则不会自动套用，而是成为多个选项让顾客自由选择。

图 18-6: 购物车 - 运送方式

结果如上图，购物时，自动套用刚刚设定好的运送方式。

设定 WooCommerce 页面

图 18-7: WooCommerce 设定 - 进阶

在旧版的 WooCommerce 的页面设定需要商店管理员自行设定购物车页面、结帐页见及我的帐号页面，不过新版的 WooCommerce 在安装後启用则自动建立好了。页面的内容是一行产生页面的短代码。

虽然不大可能发生，不过还是有发生过他牌的页面编辑器与官方冲突而页面内容的短代码消失，购物车页面突然不见。如果有这样的情况发生，请检查这里的设定以及页面内容。

基本上保持预设即可。

流程总结

Day 17 及 Day 18 我们建立好测试完环境後，就要开始 Coding 罗。这次的 WooCommerce 付款外挂要取什麽名称呢？

永丰金流收款外挂，永丰 QPay 付款外挂、永丰 xxxx ？？在本次完成作品提交 WordPress 外挂目录提供免费下载时，需要个好名字喔。有什麽好的点子吗？可以留言告诉我唷!