WooCommerce Blocks 可帮助站长们创建自定义商店页面、展示你的产品并添加过滤和搜索等高级电子商务功能等，所有这些都无需编写一行代码。默认情况下，许多块都随 WooCommerce 一起提供，但有几个新块则没有。可以通过安装WooCommerce Blocks WordPress 插件在 WooCommerce 商店中使用这些新块。

探索 WooCommerce Blocks(块)

从WordPress的5.0版本开始，我们迎来了一个全新的编辑器——古腾堡(Gutenberg)编辑器。这个编辑器采用了全新的基于块的系统，彻底取代了之前的经典编辑器。这意味着，即使你没有太多的前端编码知识，也能轻松构建和定制出极具吸引力的内容。

而WooCommerce Blocks与古腾堡编辑器完美地结合在一起，它们之间的操作就像拖放玩具一样简单。WooCommerce Blocks提供了一系列专门为产品展示、购物车管理、结账流程等设计的独特工具。

这种结合太完美了！它让古腾堡编辑器的灵活性和易用性得到了充分发挥，同时也让你能够轻松定制WordPress网站，使其具备出色的电子商务性能。无论是新手还是老手，都能轻松上手，打造出属于自己的完美电商网站。

要利用 WooCommerce 块，先打开或创建页面或帖子。单击顶部栏上的+ 按钮查看所有的功能区块，然后导航至WOOCOMMERCE 部分。以下是不同块的简要概述：

• 产品搜索 -—添加搜索栏以快速搜索客户产品。
• 所有产品 — 在网格中显示所有商店产品。
• 所有评论 — 列出所有产品评论。
• 经典结帐 — 呈现经典结帐短代码。
• 经典购物车 — 呈现经典购物车简码。
• 客户帐户 — 启用客户登录和注销功能。
• 特色类别 — 突出显示产品类别和号召性用语 (CTA)，以鼓励及时响应。
• 特色产品 — 突出显示产品或变体以及 CTA。
• 活动过滤器 — 显示当前活动的过滤器。
• 按价格过滤 — 呈现客户可用于过滤产品的价格范围。
• 按库存过滤 — 允许按库存状态过滤产品。
• 按属性过滤 — 根据尺寸或颜色等属性过滤产品。
• 按评级过滤 — 使客户能够按评级过滤产品。
• 精选产品 — 在网格中显示一系列精选产品。
• 迷你购物车 — 提供快速购物车查看按钮。
• 商店通知 — 显示 WooCommerce 或其他扩展生成的面向客户的通知。
• 最畅销产品 — 显示您商店历史上最畅销产品的网格。
• 产品类别列表 — 以列表或下拉列表的形式显示所有产品类别。
• 按类别列出的产品 — 显示所选类别的产品网格。
• 产品系列（测试版）  — 显示指定系列中的产品。
• 最新产品 — 在网格中显示最新产品。
• 促销产品 — 在网格中显示当前促销商品。
• 按标签列出的产品 — 在网格中显示带有所选标签的产品。
• 评分最高的产品 — 在网格中展示评分最高的产品。
• 按属性列出的产品 — 在网格中显示具有选定属性的产品。
• 按类别分类的评论 — 显示指定类别的产品评论。
• 按产品分类的评论 — 显示按产品组织的评论。
• 单一产品 ——展示单一产品。
• 购物车 — 显示购物车。
• 结账 — 显示可供客户提交订单的表单。

现在知道每个块大概是实现什么功能了吗。

在 WooCommerce 中使用产品网格块

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

1.导航到你想要显示产品的页面或帖子。指定一个标题，例如“产品”。

2.单击顶部导航栏上的+ 按钮可显示所有块。向下滚动到WOOCOMMERCE 部分并选择所有产品。此操作在页面上以网格布局显示你的产品。

3.要配置此块，使用右侧的块设置面板。可以通过单击“设置” 图标（顶部导航栏上第二个最右边的图标） 来访问设置。

在这里，可以定制网格的布局、内容和样式：

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

4.完成配置后预览页面，以确保一切按预期显示。然后，单击“发布” 按钮。此步骤可以根据你的喜好公开、私密或使用密码保护访问该页面。

将特色产品块添加到你的页面或帖子

特色产品块可让你在页面或帖子上突出显示产品。可以选择产品，自定义其显示设置，并将其添加到内容中以引起人们对你想要展示的特定项目的注意。

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

1.首先导航到想要展示产品的页面或帖子。假如你正在设计一个产品网格，并希望将特色产品放在顶部。在该位置创建一个空间，你会注意到 左侧有一个+按钮。 或者，如果你在所需位置附近有一个现有块，请单击三个垂直点，以便弹出一个菜单。你可以选择“添加之前” 或“添加之后”。

2.选择顶部导航栏上的+ 按钮以显示所有块并搜索特色产品。

3.选择你要展示的产品。然后，单击“完成”。

4.要为特色产品块提供独特的外观和感觉，单击“设置”。从块设置面板中，可以：

• 决定是否显示产品描述和价格。
• 配置您的媒体（图像和视频）的显示方式。
• 指定产品图片的替代文本。
• 选择块叠加颜色。
• 调整块的不透明度。

5.完成所有必要的调整后，可以发布页面或更新页面（如果页面已上线）。你可以查看正在运行的块并确保它看起来是你想要的样子。

在 WooCommerce 中使用过滤器块

过滤器块允许你的客户根据特定条件优化产品搜索，帮助他们快速找到符合其偏好或要求的产品。

1. 导航到要添加块的页面或帖子。本指南使用 与前面步骤相同的产品页面。
2. 选择您想要添加过滤器的位置。
3. 单击顶部导航栏中的+ 按钮可显示所有块。向下滚动到WOOCOMMERCE部分，然后查看价格、库存、属性和评级的筛选选项。例如，如果您选择按价格过滤。

添加按价格过滤块

通过选择此块，可以显示一个价格范围栏，允许用户根据所需的价格范围过滤页面上显示的产品。可以自定义右侧面板上的块设置以满足你的需求。

添加按属性过滤块

还可以使用“按属性过滤”块 。

可以选择特定属性，例如Color，然后相应地配置设置。例如，可以启用显示产品数量 以显示每种颜色的可用产品数量。

然后，可以查看实时页面并测试过滤器按钮的功能。

按照以上步骤操作，就能让客户轻松根据各种条件来优化产品搜索。这样，客户就能享受更流畅的购物体验，更容易找到他们想要的产品，从而提升他们的满意度。简单几步，就能让你的客户更满意，购物更轻松！

购物车和结账页面

为了确保顾客在网店购物时顺畅，购物车和结账功能一定要简单易懂、功能完备。想要让顾客有个超棒的购物体验，就得让他们能轻松管理购物车里的商品，结账过程也得简简单单、不费劲。这样，顾客才会更满意，更愿意再次复购！

WooCommerce 默认使用适当的块创建购物车 和结账页面。客户可以将产品添加到购物车并通过导航栏访问它。

确认购物车内容后，客户可以选择“继续结账” 按钮，填写必要的详细信息，然后下订单。

如何创建自定义商店页面

了解了如何使用某些 WooCommerce 块，下一步涉及将它们组合起来，以使用以下块创建自定义的用户友好商店页面：

• 产品搜索
• 按价格过滤
• 产品类别
• 特色产品
• 所有产品

要创建此自定义商店布局，请创建一个新页面并按照以下步骤操作。

1、输入“商店”作为页面标题。

2、使用与之前添加块相同的步骤，添加“产品搜索” 块。不要应用任何配置。

3、添加产品类别列表 块。

在区块设置页面中，将DISPLAY STYLE设置为Dropdown。

4、接下来，添加“按价格过滤”块 。不要为此块配置任何内容。

5、添加特色产品 块并选择要显示的产品。应用与你之前制作的特色产品块相同的配置。

6、添加所有产品 块。

对于此块的设置，将COLUMNS和ROWS 值设置为 2 并取消选择Show Sorting Dropdown。

7、发布页面并查看结果。

预览商店页面。

本文详细介绍了WooCommerce块的各种功能，比如怎么添加产品网格和特色产品，怎么使用强大的过滤器块等。还重点讲解了购物车和收银台的重要性，因为它们是让顾客享受流畅购物体验的关键。

想要网站看起来既直观又吸引人，就需要巧妙地组合各种WooCommerce块。这个过程需要认真挑选、配置和安排各种块，确保它们既能满足店铺的功能需求，又能符合顾客的喜好。