WooCommerce区块：为您的WordPress网站添加电商功能

WooCommerce区块：为您的WordPress网站添加电商功能插图

WooCommerce Blocks 可帮助您创建自定义商店页面、展示产品并添加过滤和搜索等高级电子商务功能，而这一切都无需编写任何代码。

默认情况下，WooCommerce 会随附许多区块，但有几种新的区块并不随附。您可以通过安装 WordPress 插件 WooCommerce Blocks 在您的 WooCommerce 商店中使用这些新区块。该插件是 WooCommerce Blocks 核心模块的实验性产品和潜在未来新增功能的试验场。

本实践指南将指导您使用 WooCommerce 区块为 WordPress 网站添加电子商务功能。

目录隐藏

前提条件

探索 WooCommerce 区块

在 WooCommerce 中使用产品网格区块

在页面或文章中添加精选产品区块

在 WooCommerce 中使用筛选区块

添加 “Filter by Price” 区块

添加 “Filter by Attribute” 区块

购物车和结账页面

如何创建自定义商店页面

小结

前提条件

要学习本指南，请确保您已：

在 WordPress 仪表板中安装并激活了 WooCommerce
熟悉 WordPress

建立网站后，为您的 WooCommerce 商店导入这些示例产品。

探索 WooCommerce 区块

WordPress 5.0 版引入的默认区块编辑器是 Gutenberg 编辑器。它以基于区块的系统取代了传统的编辑器，让用户无需大量前端编码知识即可构建和定制具有视觉吸引力的内容。

WooCommerce Blocks 与 Gutenberg 编辑器的直观拖放界面无缝集成，提供了一套专门用于产品展示、购物车管理、结账流程等的区块。

这种集成使您能够充分利用区块编辑器的灵活性和简便性，同时为您的 WordPress 网站量身定制最佳的电子商务性能。

要使用 WooCommerce Block，首先要打开或创建一个页面或帖子。点击顶部栏上的 + 按钮查看所有区块，然后导航到 WOOCOMMERCE 部分。以下是不同区块的简要概述：

Product Search — 添加一个搜索栏，方便客户快速搜索产品。
All Products — 在网格中显示所有商店产品。
All Reviews — 列出所有产品评论。
Classic Checkout — 显示经典结账简码。
Classic Cart — 显示经典购物车简码。
Customer Account — 启用客户登录和注销功能。
Featured Category — 突出显示产品类别和行动号召 (CTA)，以鼓励快速响应。
Featured Product — 突出显示产品或变体以及 CTA。
Active Filters — 显示当前活动的筛选器。
Filter by Price — 显示价格范围，客户可使用该范围筛选产品。
Filter by Stock — 按库存状态过滤产品。
Filter by Attribute — 根据尺寸或颜色等属性筛选产品。
Filter by Rating — 使客户可以按评级筛选产品。
Hand-Picked Products — 在网格中显示精选产品。
Mini Cart — 提供快速购物车查看按钮。
Store Notices — 显示由 WooCommerce 或其他扩展生成的面向客户的通知。
Best Selling Products — 以网格形式显示商店历年最畅销的产品。
Products Categories List — 以列表或下拉方式显示所有产品类别。
Products by Category — 以网格形式显示所选类别中的产品。
Product Collection (Beta) — 显示指定系列中的产品。
Newest Products — 在网格中显示最新产品。
On Sale Products — 在网格中显示当前特价产品。
Products by Tag — 在网格中显示带有所选标签的产品。
Top Rated Products — 在网格中显示评分最高的产品。
Products by Attribute — 在网格中显示具有所选属性的产品。
Reviews by Category — 显示指定类别的产品评论。
Reviews by Product — 按产品显示评论。
Single Product — 显示单个产品。
Cart — 显示购物车。
Checkout — 显示让客户提交订单的表单。

现在你知道每个区块代表什么了吧。让我们使用其中一些区块来创建一个电子商务体验。

在 WooCommerce 中使用产品网格区块

产品网格区块是一种多功能工具，可在 WordPress 网站上以有条理的网格格式展示您商店的产品。以下是添加和自定义产品网格区块的方法：

1. 导航到您希望展示产品的页面或帖子。指定一个标题，如 “Products”。

2. 单击顶部导航栏上的 + 按钮，显示所有区块。向下滚动到 WOOCOMMERCE 部分，然后选择 “All Products“。此操作将在页面上以网格布局显示您的产品。

WooCommerce区块：为您的WordPress网站添加电商功能插图1

3. 使用 All Products WooCommerce Block 在网格中显示产品。

4. 要配置此区块，请使用右侧的区块设置面板。点击 “Settings” 图标（顶部导航栏最右边第二个图标）即可进入设置。

WooCommerce区块：为您的WordPress网站添加电商功能插图2

设置面板来调整所有产品区块。

在这里，您可以调整网格的布局、内容和样式：

布局设置：调整行数和列数。例如，将行列数都设置为 2，以获得平衡的外观。
内容设置：决定是否要为客户提供排序下拉菜单。该功能可让客户按照选定的顺序对产品进行排序。如果愿意，您可以禁用它。
高级样式：如有需要，您可以添加 CSS 类以获得更复杂的样式。

4. 完成配置后预览页面，确保一切如预期所示。然后，单击 “Publish” 按钮。这一步允许你根据自己的偏好公开、私下或使用密码保护访问页面。

WooCommerce区块：为您的WordPress网站添加电商功能插图3

更新后的 “Products” 页面以 2×2 的网格显示产品，并显示导航栏。

在页面或文章中添加精选产品区块

精选产品（Featured Product）区块可让您在页面或文章中突出显示产品。您可以选择一个产品，自定义其显示设置，然后将其添加到您的内容中，以吸引人们对您想展示的特定产品的关注。

请按照以下步骤添加特色产品区块：

1. 首先，导航到要展示产品的页面或文章。想象一下，你正在设计一个产品网格，并希望将特色产品放在顶部。在该位置创建一个空间，你会发现左侧有一个 + 按钮。或者，如果你在想要的位置附近有一个现有的区块，点击三个竖点，就会弹出一个菜单。您可以选择 “Add before” 或 “Add after“。

WooCommerce区块：为您的WordPress网站添加电商功能插图4

在 “所有产品（All Products）” 区块之前添加 “特色产品（Featured Product）” 区块。

2. 选择顶部导航栏上的 + 按钮，显示所有区块并搜索 “Featured Product“。

WooCommerce区块：为您的WordPress网站添加电商功能插图5

使用 Featured Product 区块选择产品作为特色产品。

3. 选择要显示的产品。然后点击 Done。

4. 要使 Featured Product 区块具有独特的外观和感觉，请单击 Settings。在区块设置面板中，您可以

决定是否显示产品描述和价格。
配置媒体（图片和视频）的显示方式。
指定产品图片的 alt 文本。
选择区块覆盖颜色。
调整区块的不透明度。

WooCommerce区块：为您的WordPress网站添加电商功能插图6

调整精选产品区块设置

5. 完成所有必要的调整后，您就可以发布页面了，如果页面已经上线，也可以进行更新。这样，您就可以看到区块的运行情况，确保它看起来就是您想要的样子。

WooCommerce区块：为您的WordPress网站添加电商功能插图7

更新后的产品页面预览，在产品网格上方显示特色小帽产品。

在 WooCommerce 中使用筛选区块

筛选（Filter）区块可让您的客户根据特定条件完善产品搜索，帮助他们快速找到符合其偏好或要求的产品。

导航至要添加区块的页面或帖子。本指南使用与前面步骤相同的 “Products” 页面。
选择要添加筛选器的位置。
点击顶部导航栏的 + 按钮，显示所有区块。向下滚动到 WOOCOMMERCE 部分，查看价格、库存、属性和评级的筛选器选项。例如，选择 “Filter by Price“。