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