跳转到主要内容
13 分钟阅读时间 (2554 字)

WooCommerce 区块完整指南

WooCommerce区块完整指南

WooCommerce 是在 WordPress 上构建电子商务网站的热门插件之一。WooCommerce Blocks 是 WooCommerce 中的插件之一,旨在让用户更轻松地在 WordPress 上创建在线商店。WooCommerce Blocks 可帮助打造个性化商店页面、展示您的产品,并添加产品筛选和搜索等高级电子商务功能——所有这些都无需编写一行代码。. 

文章要点:
  • WooCommerce 区块让店主能够使用 WordPress 区块编辑器中的简单拖放界面,轻松构建和自定义在线商店——无需编写代码。.
  • 借助 WooCommerce Blocks,您可以添加产品网格、筛选器、购物车和自定义结账体验等多种功能,从而改善客户的浏览体验并提升销售额。.
  • WooCommerce Blocks 提供现代化、针对移动端优化且高性能的组件,可提升用户体验,并通过灵活的设计选项让您的电商网站面向未来。.

您必须安装 WordPress WooCommerce Blocks 插件才能使用这些新区块。该插件是实验性功能的测试平台,这些功能可能会被添加到 WooCommerce 核心中。.

在本实用指南中,我们将讨论 WooCommerce 区块的功能以及如何自定义它们。. 

什么是 WooCommerce 区块?

WooCommerce Blocks 是一组与 WordPress 区块编辑器(Gutenberg) 集成的区块集合,让您可以轻松地将各种 WooCommerce 特性和功能添加到页面和文章中。无需编写代码,这些区块就能让您展示产品、产品分类、搜索筛选器、购物车、结账等更多内容。

简单来说,WooCommerce Blocks 是预构建的组件,您可以使用区块编辑器将它们插入到您的 WordPress 网站中,从而轻松集成由 WooCommerce 提供支持的电子商务功能。这些组件是 WooCommerce 核心插件的一部分,因此当您在 WordPress 网站上安装并激活 WooCommerce 时,它们会自动可用。.

此外,它们与 WordPress 区块编辑器无缝集成,让您可以使用熟悉的拖放界面构建自定义产品页面、分类布局和购物体验。ext here ...

WooCommerce 区块功能列表

了解什么是 WooCommerce 区块后,接下来我们将逐一讨论所提供的各项功能:

  • 所有产品: 以网格格式显示商店中的所有产品。
  • 启用中的产品筛选器: 以列表形式或标签(类似按钮)形式显示启用中的产品筛选器。
  • 所有评论: 以列表形式显示所有产品评论。
  • 最畅销产品: 以网格格式显示最畅销的产品。
  • 结账: 显示一个表单,让客户可以完成订单。
  • 购物车: 显示购物车。
  • 特色分类: 突出显示特定产品分类以及行动号召按钮。
  • 特色产品: 显示选定的特色产品。
  • 按价格筛选: 显示一个价格范围,顾客可以据此筛选产品。你还可以点击此处的按钮或文本,启用可编辑的价格范围。
  • 按库存筛选: 允许根据库存状态筛选产品。此功能提供显示有货、缺货或补货中产品的选项。
  • 按评分筛选: 允许客户根据评分筛选产品。
  • 按属性筛选: 根据尺寸或颜色筛选产品。
  • 精选产品: 以网格格式显示精选产品,让您可以专门选择要显示的产品。
  • 迷你购物车: 提供购物车的简要视图。
  • 最新产品: 以网格格式显示最新产品。可以通过添加/移除标题、价格、评分和购买按钮等元素进行自定义。
  • 促销产品: 以网格格式显示当前正在促销的产品,并可通过添加/移除标题、价格、评分和购买按钮等元素进行自定义。
  • 产品搜索: 添加搜索栏,方便客户搜索产品。
  • 按标签显示产品: 以网格格式显示具有特定标签/标记的产品。
  • 按属性显示产品: 以网格格式显示具有特定属性(颜色、尺寸等)的产品。
  • 按分类显示产品: 以网格格式根据分类显示产品。
  • 按产品查看评论: 按产品分组显示评论。
  • 按分类查看评论: 显示特定分类的产品评论。
  • 单个产品: 显示单个产品的详细视图。
  • 评分最高的产品: 以网格格式显示评分最高的产品。

如何在 WooCommerce 中使用产品网格区块

除了了解 WooCommerce 区块中可用的功能外,让我们尝试在 WooCommerce 中使用或添加产品网格。请确保你已在网站上安装了 WooCommerce 区块插件。以下是添加方法:

1. 打开页面或文章 ,在您想要显示产品网格的位置,然后输入标题 “产品”。

2. 在左侧导航栏中,点击 (+) 按钮 > 向下滚动到 WooCommerce 部分 > 选择 “产品网格”。

图片来源:Kinsta.com

3. 接下来,要 配置区块,请转到右侧面板。

图片来源:Kinsta.com

在此面板中,您可以调整多项内容,包括:

  • 布局设置: 您可以自定义产品网格中显示的行数和列数。例如,将两者都设置为 2,以获得均衡的视图。
  • 内容设置: 您可以显示一个用于产品排序的下拉菜单。此功能允许客户根据自己的偏好对产品进行排序。如果不需要,您可以将其禁用。
  • 高级样式: 您可以添加 CSS 类来自定义外观。
4. 然后,你可以在最终发布之前预览页面。.
图片来源:Kinsta.com

精选产品区块让您可以在页面或文章中展示特定产品。通过此区块,您可以选择产品、自定义其外观,并将其放置在您的内容中,以吸引访客关注您想要推广的商品。.

要添加特色产品区块,请按照以下步骤操作:

1. 打开你想要添加它的页面或文章。例如,如果你将它放在产品网格上方,请在该区域创建空间,然后点击出现的“+”按钮。.

图片来源:Kinsta.com

2. 选择区块工具栏上的“+”按钮以打开区块列表,然后搜索并选择 “特色产品”。

图片来源:Kinsta.com

3. 选择您想要突出显示的产品,然后点击 “完成”。
4. 要自定义区块的外观,请点击“设置”。在设置面板中,您可以调整多项内容,包括:

  • 显示或隐藏产品描述和价格。.
  • 配置媒体显示(图片和视频)。.
  • 为产品图片添加替代文本。.
  • 选择区块叠加颜色。.
  • 调整区块不透明度。.
图片来源:Kinsta.com

5. 调整后,您可以发布或更新页面,以查看特色产品区块的显示效果。.

图片来源:Kinsta.com

如何在 WooCommerce 中添加筛选区块

WooCommerce 筛选区块让客户能够轻松找到符合其搜索条件的产品。通过提供筛选选项,客户可以快速将搜索结果缩小到与他们相关的产品。.

要添加筛选区块,请按照以下步骤操作:

  1. 打开您想要放置筛选区块的页面或文章。.
  2. 确定放置筛选区块的所需位置。.
  3. 在区块编辑器工具栏上,点击“+”按钮并搜索 WooCommerce 筛选选项,例如价格筛选、库存筛选、属性筛选和评分筛选。.

现在,让我们来讨论每种可用的筛选类型。. 

添加按价格筛选

价格筛选产品区块允许您添加筛选功能,使用户能够选择所需的价格范围。价格范围可以显示为可编辑按钮或普通文本。您可以根据需要添加按钮并调整其标题级别。.

图片来源:Kinsta.com

按属性添加筛选

产品属性筛选区块让用户能够根据颜色和尺寸等属性筛选产品。您可以从可用列表中选择想要使用的属性。其显示形式可以是列表或下拉菜单。您还可以将查询类型配置为 AND 或 OR。其他功能包括显示产品数量、选择标题级别、添加按钮以及选择筛选器。.

图片来源:Kinsta.com

添加按库存筛选

库存状态产品筛选区块允许用户根据产品的库存状态来显示产品。他们可以显示有货产品(有货)、缺货产品(缺货)或延期交货产品。您还可以将其配置为显示产品数量、选择标题级别以及添加按钮。此区块可与其他 WooCommerce 区块(例如“所有产品”)一起使用。遗憾的是,此区块添加到页面时不会提供预览。.

图片来源:Elegantthemes.com

购物车和结账区块

购物车区块会在您的页面上添加购物车显示。您可以包含运费计算器、为结账按钮选择链接,并设置深色模式显示。此区块还提供了一条通知,您可以在 WooCommerce 设置中将该页面设为默认购物车页面。此外还包含一个提供反馈的链接。.

图片来源:Elegantthemes.com

同时,结账区块为您的购物车提供了一个结账表单。您会被告知,此页面可以在 WooCommerce 设置中设为默认结账页面。此外还有一个深色模式显示选项。该区块由多个元素组成,您可以单独自定义每个元素。遗憾的是,该区块添加到页面后不提供预览。.

图片来源:Elegantthemes.com

如何在 WooCommerce 上自定义商店页面

在了解如何使用各种 WooCommerce 区块后,你可以组合多个区块来创建一个用户友好的自定义商店页面。要构建这个特定的商店页面布局,请按照以下步骤操作。.

1. 创建一个新页面并将其命名为 “商店”。

图片来源:Kinsta.com

2. 添加 产品搜索 b区块。

图片来源:Kinsta.com

3. 添加 产品分类列表 区块

图片来源:Kinsta.com

然后,将显示样式设置为下拉菜单。.

图片来源:Kinsta.com

4. 添加 价格筛选 区块。
5. 添加 特色产品 区块并选择您想要突出显示的产品。根据需要配置。

图片来源:Kinsta.com

6. 添加 所有产品 区块。

图片来源:Kinsta.com

将列数和行数设置为 2,并关闭排序下拉选项。.

图片来源:Kinsta.com

7. 最后,发布该页面以查看您所创建商店页面的最终布局。.

图片来源:Kinsta.com

正在为客户网站寻找强大的文件管理解决方案?

WP File Download 就是答案。凭借文件分类、访问限制和直观界面等高级功能。
用顶级的文件组织方式让您的客户印象深刻!

立即获取插件

使用 WooCommerce 区块构建你的在线商店并销售你的产品

使用 WooCommerce Blocks 成功创建自定义商店页面后,您现在就可以开始销售实体和数字产品了。尤其是对于数字产品,添加一个文件下载插件至关重要,例如 WP File Download 插件。

此插件允许您在 WooCommerce 中销售数字下载产品。 WP File Download 附加组件使管理 WooCommerce 数字产品的文件和文件分类变得简单。您可以快速创建许多与一个或多个文件关联的数字下载产品。.

此外,该插件还与 Dropbox、Google Drive、Microsoft OneDrive以及 Social Locker 功能集成。您可以通过云 API 连接器将这些云服务中的文件作为 WooCommerce 数字下载提供,并实现高度受限的访问权限。.

借助 WP File Download 插件,在您的 WooCommerce 在线商店中销售数字产品变得更加便捷高效。使用 WooCommerce Blocks 构建商店后,此插件能完美补充您的数字内容销售。.

呼叫所有网站管理员!

使用 WP File Download 增强您的客户网站。创建安全且可自定义的文件存储库,让客户能够轻松访问和管理他们的文件。
立即升级您的网页设计服务!

立即获取插件

结论

WooCommerce Blocks 是一款插件,让您无需编写代码即可在 WordPress 中构建完整的在线商店。借助各种区块,例如产品网格、筛选器和特色产品展示,您可以轻松创建引人入胜且用户友好的购物体验。熟悉的拖放界面让开发在线商店变得更快、更高效。.

搭建好在线商店后,下一步就是销售实体和数字产品。您可以利用 WP File Download 插件来 通过 WooCommerce 销售数字产品,例如电子书、软件或多媒体内容。

WP File Download 插件起价为每年 49 美元,已有超过 60,000 名会员使用。那么,你还在等什么?加入我们,实现更好的数字产品销售!

保持关注

当您订阅博客后,如果网站有新更新,我们会发送电子邮件通知您,以免您错过。.

Related Posts