使用 WordPress 开设 WooCommerce 商店
WooCommerce 负责店铺运营：商品、订单、税费和支付。它无法让这些内容体现您的品牌风格。本指南将使用 WordPress 自带编辑器中的区块，搭建购物者实际看到的四个页面。
第 1 步：安装 WooCommerce
WooCommerce 是 WordPress 插件目录中的免费插件，负责所有商业相关功能：商品数据、库存、订单、税务规则、配送区域和支付网关。Canvas 从不替代这一层，因此您现有的其他 WooCommerce 扩展仍可正常使用。
两种安装方式
- 交给设置向导完成。 在设置过程中选择一个商店演示站点，插件步骤会在导入前安装并启用 WooCommerce，因为商店需要商店类插件。
- 自行安装：在“插件”中点击“安装插件”，然后运行 WooCommerce 设置向导。如果您要为正在运营的网站添加商店，请这样操作。
无论哪种方式，请先完整走一遍 WooCommerce 设置流程，并回答其中关于您所在国家、货币以及销售商品的问题。这些答案会影响之后的税费和运费设置，而且这些设置修改起来很繁琐。
在接受真实订单之前，请先设置电子邮件发送服务。默认情况下，订单确认邮件由 WordPress 通过您的服务器发出，若店铺的收据邮件被归入垃圾邮件，就会产生您无法回复的支持工单。
第 2 步：从商店演示站点开始，或从空白商品目录开始
这里有一个选择，值得花十分钟仔细考虑。
导入商店演示站点
在 88 个演示站点中，有 21 个是可正常运行的 WooCommerce 商店。导入其中一个即可获得商品、分类、属性、色板、设计好的店铺页、设计好的商品页、购物车和结账页，所有内容均已就位且可编辑。这是了解各部分如何搭配的最快方式，如果您决定不用，也可以完整撤销此次导入。
基于自有商品目录搭建
如果您已经在销售商品，并且数据库中已有商品，请选择仅导入页面的范围，导入到现有网站中。您将获得演示页面及其所用的数据记录，但不包括其设置、菜单或首页，您的商品目录将保持不变。
无论哪种方式，您站点上的 WooCommerce 页面都会被接管，因此店铺、购物车、结账页和账户页始终只有一个。
第 3 步：添加您的第一批商品
产品是 WooCommerce 记录，在 WordPress 后台的产品菜单下添加，这部分刻意保持简单。请把时间花在这里，而不是版式上，因为好的产品页面主要依赖于良好的产品数据。
- 每件商品配一张清晰的照片，所有商品采用相同的拍摄方式。当形状一致时，商品目录网格看起来经过精心设计；形状不统一时，则显得杂乱无章。
- 用简短的描述回答购物者真正关心的问题。包括尺码、材质、到货时间，以及尺码不合适时如何处理。
- 分类贴合顾客的购物习惯，而不是按您的库存仓储方式组织。
- 适用于所有可变商品的属性。颜色、尺寸、表面处理。请在后台为颜色术语设置实际的颜色值，因为这是之后将下拉菜单转换为色块的关键。
- 库存、重量和尺寸，若您发运实体商品则需填写。运费规则会读取这些数据。
在开始设计前，先添加三件商品。若仅以一件占位商品评估布局，这样的布局日后势必要重建。
第 4 步： 设计商店页面
商店本质上是一个目录，其作用是让访客尽快到达商品页面。Canvas 为此提供了相应区块，通常只需一项主题设置，并可在三种布局中选择。
区块
商品网格可从分类、标签、搜索结果或手动挑选的列表中调取商品。商品轮播以横向滚动的形式实现同样的功能，适合用于首页。商品分类卡片可将访客引导至对应板块。价格筛选器可帮助买家缩小较长商品目录的范围。每一项都是带有设置面板的区块，因此列数、数据来源和排序均可通过控件调整，无需编写代码。
底层模板
商店页本身是一个区块模板，可在站点编辑器中打开。您可以将其设为全宽布局，也可以添加左侧边栏、右侧边栏或两者都加，具体取决于筛选器和分类是否值得保留在您的商品目录中。商店模板共 18 个，涵盖商店页、商品页、归档页、购物车和结账页。
全店默认设置
主题选项中提供 39 项商店设置，分布在 5 个标签页中：商品目录、商品页面、购物车与结账、页眉迷你购物车，以及目录模式。每页商品数、分页、商品图片形状、额外图库图片是否在悬停时显示，以及悬停遮罩提供的内容，都在这里设置。若某个区块单独设置了其中一项，则在该区块所在的页面上仍以该区块的设置为准。
第 5 步：设计产品页面
这是负责成交的页面，不应只停留在网上每家店铺都在用的默认布局上。
用区块搭建
产品页面的每个部分都是一个区块：图片库、价格、星级评分、元数据、简短描述、变体色板、加入购物车按钮、标签页、分享栏和相关产品。这些区块可以移动、重新设计，也可以完全移除其中任意一个，页面仍能正常运行，因为每个区块都会向 WooCommerce 请求自己的数据。
或从现成的布局开始
如果您不想从零开始组装，可以选择一种内置的单品页布局，再调整各个部分：默认布局、滚动时吸顶跟随图库的摘要布局、列表布局、以颜色为主导的设计、商店风格设计、两种支持自定义链接的图库布局，以及左侧栏、右侧栏或双侧栏的变体。您可以在编辑器中为每个商品指定布局，也可以在主题选项中设置商店默认布局。
首屏应放什么内容
照片、名称、价格、规格选择和加入购物车按钮。其余内容，包括大多数人从不阅读的商品描述，都可以放在下方。在决定是否不同意之前，请先在手机上查看一下。
第 6 步：购物车与结账
这两个界面是收入流失的关键所在，而在大多数主题中，它们恰恰是不允许修改的两个界面。在这里，它们和其他内容一样，都是区块。
购物车
购物车表格区块用于展示购物车内容，购物车总计区块用于展示金额，交叉销售区块用于展示购物者可能真正想加购的商品。保持简洁，并让按钮醒目。购物车最常见的错误，是在总计和结账按钮之间堆满促销内容。
结账页面
表单使用账单区块，所购商品使用订单核对区块，告知购物者已发生情况的消息使用通知区块。订单、付款和邮件仍由 WooCommerce 处理，页面的呈现方式由您决定。
能带来回报的规则
- 仅询问配送实际所需的最少字段。
- 在付款步骤之前显示包含配送费在内的总费用。
- 以文字形式说明订单预计几天内送达。
- 将退货政策放在一位初次购物、心存顾虑的买家一眼就能看到的地方。
第 7 步：色板、加入购物车与卡片样式
此集成内置了三项商店功能，它们通常each需要单独一个插件才能实现。
- 属性颜色色板。在后台为商品属性项设置颜色后，可变商品会以颜色圆点或按钮样式代替下拉菜单。顾客通过直接查看即可选择变体，这在手机上尤为重要。
- 无需刷新页面即可加入购物车。从网格、轮播或卡片浮层添加商品时，购物车会就地更新，顾客可以留在正在浏览的页面，并且页眉购物车会同步显示数量。
- 商品卡片样式。将所有商品目录图片统一为同一形状，使网格对齐；选择额外的图库图片是在悬停时显示，还是以幻灯片形式轮播；并决定悬停浮层提供的操作：购买、快速查看，或两者兼有。
这三项均为设置选项。无需代码片段、子主题或第二个插件，如果您更喜欢更朴素的效果，每一项都可以关闭。
一些主题也单独提供这一层功能。OceanWP 附带免费的 WooCommerce 集成，并将 Ocean eCommerce Pro 作为单独产品提供，Canvas 与 OceanWP 的对比列出了各套餐为店铺提供的内容。
第 8 步：支付、速度优化，然后进行测试订单
设计最后做，收款最先配。在对外宣布店铺开业之前，请逐项完成以下内容。
在 WooCommerce 中完成商业设置
- 连接你计划使用的支付网关并完成其验证，这通常比你预期的耗时更长。
- 为您实际发货的地区设置税务规则和配送区域。
- 撰写退款、退货和配送页面，并在页脚和结账页面中添加链接。
Canvas 中的速度优化
WooCommerce 会在网站的每个页面上加载脚本和样式表，包括那些不销售任何商品的页面。以下五项开关可以撤回这部分加载：在不输出商店内容的页面上移除 WooCommerce JavaScript；关闭订单归因跟踪；阻止在显示购物车的每个页面上由服务器轮询购物车片段脚本；并在账户和结账页面之外移除密码强度库和下拉选择库。这些优化属于 35 项性能优化，并且每一项都可以撤销。
然后完成一笔真实订单
用自己的店铺买一件商品，用手机，使用移动数据。如果您的支付网关支持测试退款，请用真实卡付款。确认收到订单确认邮件，检查订单是否出现在后台，然后为自己退款。这五分钟里发现的所有问题，客户本来也会遇到。
来源
凡本指南涉及 Canvas 本身之外的内容，以下为相关的官方文档页面。
- 安装与卸载 WooCommercewoocommerce.com · WooCommerce 免费，可从插件屏幕安装，并会打开其自带的设置向导
- WooCommerce 页面woocommerce.com · WooCommerce 为商店、购物车、结账和账户各指定一个页面
- 在 WooCommerce 中设置税费woocommerce.com · 税率在 WooCommerce 设置中配置
- 设置配送区域woocommerce.com · 配送区域是您发货所及的地理范围
- 订单归因追踪woocommerce.com · 订单归因记录的内容，以及用于关闭该功能的 WooCommerce 设置
接下来可以做什么
另有两份指南介绍商店周边的其余站点内容，并完整列出商店功能。
我还需要安装 WooCommerce 插件吗？
可以，Canvas 商店仍由 WooCommerce 插件运行。Canvas 在其基础上添加区块、模板和选项，并让该插件继续负责运行，因此订单、商品、税费、运费和支付仍保留在其他扩展程序预期的位置。如果您从商店演示站点开始，设置向导会在导入前安装并启用 WooCommerce。
商店区块需要额外购买吗？
不，Canvas 商店区块包含在每个套餐中，无需额外费用。所有 24 个商店区块都是高级区块，每个套餐都包含全部高级区块，同时还包含全部 18 个商店模板和全部 21 个演示商店。没有单独的电商套餐，也没有商店附加组件。
我可以把这些与 WooCommerce 区块混合使用吗？
可以，您可以自由混用：Canvas 商店区块是普通的已注册区块，因此它们可以与 WooCommerce 区块和核心区块并存于同一模板和同一页面中。您可以每次替换一个部分，其余布局保持不变。
导入商店演示会让我有两个结账流程吗？
不会。导入 Canvas 商店演示站点后，只会保留一个结账页面。导入程序会查找您网站上已有的商店、购物车、结账和账户页面，并将演示的菜单和链接指向这些页面，因此每类页面各保留一个。您现有的商品和订单不会受影响，整个导入过程也可以回滚。
使用 Canvas 构建您的下一个网站
无论是新手、自由职业者还是代理机构，获得的区块与演示站点都完全相同。可以从一个网站开始，并在同一许可证下按需搭建任意数量的网站。