WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

探索 WooCommerce Blocks(块)

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

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

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

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

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

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

在 WooCommerce 中使用产品网格块

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

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

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

    WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

    WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

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

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

    WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

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

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

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

    WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

      WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

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

      • 决定是否显示产品描述和价格。
      • 配置您的媒体(图像和视频)的显示方式。
      • 指定产品图片的替代文本。
      • 选择块叠加颜色。
      • 调整块的不透明度。
        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

        在 WooCommerce 中使用过滤器块

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

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

        添加按价格过滤块

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

        添加按属性过滤块

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

        购物车和结账页面

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

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

        如何创建自定义商店页面

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

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

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

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

        6、添加所有产品 块。

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

        对于此块的设置,将COLUMNSROWS 值设置为 2 并取消选择Show Sorting Dropdown

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

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

        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站
        WooCommerce Blocks(块): 将 WooCommerce 功能添加到WordPress 网站

        预览商店页面。

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

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


        联系我们
        文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
        电话:020-2206-9892
        QQ咨询:1025174874
        邮件:info@361sale.com
        工作时间:周一至周五,9:30-18:30,节假日休息
        发布者:光子波动,转转请注明出处:https://www.361sale.com/8439/

        (1)
        上一篇 2024年 4月 20日 上午10:48
        下一篇 2024年 4月 20日 下午3:32

        相关推荐

        发表回复

        您的电子邮箱地址不会被公开。 必填项已用 * 标注

        联系我们

        020-2206-9892

        QQ咨询:1025174874

        邮件:info@361sale.com

        工作时间:周一至周五,9:30-18:30,节假日休息

        客服微信
        购买我们的托管服务器,享受免费运维!