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

WooCommerce区块完整指南

完整的WooCommerce块指南

WooCommerce是用于在WordPress上构建电子商务网站的流行插件之一。WooCommerce Blocks是WooCommerce中的一个插件,旨在让用户更容易地在WordPress上创建在线商店。WooCommerce Blocks帮助用户创建个性化商店页面,展示产品,并添加高级电子商务功能,如产品筛选和搜索 - 所有这些都无需编写一行代码。. 

文章要点:
  • WooCommerce模块使得店主可以通过WordPress模块编辑器中的简单拖放操作界面轻松地构建和自定义在线店铺,无需编码。.
  • 使用WooCommerce Blocks,您可以添加各种功能,如产品网格、筛选、购物车和自定义结账体验,从而改善客户导航并促进销售。.
  • WooCommerce Blocks 提供现代、移动优化和高性能的组件,增强用户体验,并通过灵活的设计选项使您的电子商务网站面向未来。.

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

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

什么是 WooCommerce Block?

WooCommerce 区块是与 WordPress 区块编辑器(Gutenberg) 集成的一系列区块,允许您轻松地在页面和文章中添加各种 WooCommerce 功能和特性。无需编写代码,这些区块使您能够展示产品、产品分类、搜索过滤器、购物车、结账等。

简单来说,WooCommerce Blocks 是预先构建的组件,您可以使用块编辑器将其插入 WordPress 网站,提供一种简单的方式来整合由 WooCommerce 提供支持的电子商务功能。这是 WooCommerce 插件的核心部分,因此当您在 WordPress 网站上安装和激活 WooCommerce 时,会自动获得这些功能。.

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

WooCommerce 区块功能列表

了解什么是WooCommerce模块后,我们将逐一讨论它提供的每个功能:

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

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

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

1. 打开要显示产品网格的页面或帖子,然后输入标题“产品”。

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

来源图像:Kinsta.com

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

来源图像:Kinsta.com

在此面板中,您可以调整多个设置,包括:

  • 布局设置:
  • 内容设置:您可以显示用于排序产品的下拉菜单。此功能允许客户根据自己的偏好对产品进行排序。如果不需要,您可以禁用它。
  • 高级样式:您可以添加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. 添加 产品搜索

来源图像:Kinsta.com

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

来源图像:Kinsta.com

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

来源图像:Kinsta.com

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

来源图像:Kinsta.com

6. 添加所有产品块。

来源图像:Kinsta.com

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

来源图像:Kinsta.com

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

来源图像:Kinsta.com

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

WP File Download是答案。具有高级功能,如文件类别,访问限制和直观的UI。
用顶级的文件组织给您的客户留下深刻印象!

立即获取插件

使用WooCommerce Block建立您的在线商店并销售您的产品

成功创建带有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美元,已被超过6万名会员使用。那么,您还在等什么?加入我们,实现更好的数字产品销售!

保持信息畅通

当您订阅博客时,我们会在网站有新更新时发送电子邮件给您,这样您就不会错过它们。.

相关文章

 

评论

没有评论,请留下您的第一条评论
已经注册?在此登录
2026年3月4日 星期三

验证码图片