为您的 WooCommerce 商店使用 Gutenberg 块的指南

已发表: 2019-09-17

在 WordPress 中引入 Gutenberg 编辑器在很大程度上有助于重塑 WordPress 的身份。 从具有添加媒体功能和可选插件以满足各种需求的核心内容管理系统，它现在又是一个丰富的、以媒体为中心的所见即所得编辑器和网页构建器，并且不影响它始终提供的灵活性。 事实上，Gutenberg 提供的块增加了以您想要的方式构建页面的灵活性。

与以前的编辑器（也称为 TinyMCE 编辑器）相比，Gutenberg 提供的最大优势是它无需了解如何编码，也无需了解 WordPress 结构以了解如何为您的 WordPress 网站或 WooCommerce 添加更多功能店铺。 但是，如果您对旧版 WordPress 编辑器更满意，您可以随时安装这个免费插件，称为 WordPress 贡献者的经典编辑器，它为您提供完全禁用 Gutenberg 的选项，或在旧版编辑器和 Gutenberg 之间来回切换. Gutenberg 还提供了一个 Classic Editor 块，供用户使用 Gutenberg 中的经典编辑器功能！ 听起来好得令人难以置信？ 让我们深入了解这篇文章，或者更确切地说是为您的 WooCommerce 商店使用 Gutenberg 块的指南！

可以通过任何 WordPress 页面访问古腾堡块。 当您在 WordPress 中添加新页面或编辑现有页面时，当您将鼠标悬停在屏幕左上角的内容区域时，您会看到一个“+”符号。

using Gutenberg blocks for your WooCommerce store - Add Block

Gutenberg 为不同的用途提供了不同类型的块：

using Gutenberg blocks for your WooCommerce store - Gutenberg Blocks

虽然这些块可用于构建各种页面，但作为 WooCommerce 管理员或商店经理，您可能希望最关注主页或商店页面。 因此，出于本教程的目的，让我们为您的商店创建一个旨在提高销售额的主页！ 为此，我们将最多使用WooCommerce 块。 这些块是 Automattic 功能插件的早期部分，并被合并到 WooCommerce 3.5 版中。

WooCommerce 块包含主要与在您的页面上显示产品相关的不同功能或“块”，您可以使用它们来建立您的商店。 以下是 WooCommerce 块下可用的块列表：

  • 产品分类
  • 最新产品
  • 特色产品
  • 畅销产品
  • 特价商品
  • 精选产品
  • 最受好评的产品
  • 按属性分类的产品

让我们从在主页顶部添加特色产品开始。 这可以是您想向用户/观众强调的任何产品。

using Gutenberg blocks for your WooCommerce store - Featured Product

我们添加了一个名为“商店会员”的产品。 一旦添加了产品，它的图像、描述和价格就会显示出来。 您可以使用右侧边栏上的选项选择隐藏这些。 还添加了“立即购买”按钮； 颜色、文本和它指向的 URL 都是可编辑的属性。

using Gutenberg blocks for your WooCommerce store - Featured Product Added

叠加颜色是一个有趣的功能，可让您设置在这种情况下您选择作为特色产品的产品图像的颜色和不透明度：

using Gutenberg blocks for your WooCommerce store - Add Overlay to Featured Product

您还可以向此图像添加 CSS 类。 同样，也可以编辑立即购买按钮：

using Gutenberg blocks for your WooCommerce store - Editing the Shop Now button

接下来，让我们添加一些商店的新到货和畅销书，以便新访客和回访者都可以从该页面中获得一些东西。

为此，我们将首先在 Common Blocks 下添加一个名为 Heading 的块：

using Gutenberg blocks for your WooCommerce store - Add Heading Block

一旦添加了适当的标题，例如“新品”，我们就可以继续添加相应的块。 出于我们的目的，我们将使用 WooCommerce 块，称为Best Selling Products和Newest Products 。 这些块可以再次在 WooCommerce 块下找到。 让我们添加最新产品块。

using Gutenberg blocks for your WooCommerce store - Best Selling and Newest Products blocks
最畅销和最新产品块都可以在 WooCommerce 块下找到。

using Gutenberg blocks for your WooCommerce store - Adding Newest Products

您可以看到最新产品块从您的 WooCommerce 商店中提取最近添加的产品。 您可以通过设置要显示的行数和列数来选择为此块显示任意数量的产品，也可以使用右侧栏上的选项按类别过滤产品：

using Gutenberg blocks for your WooCommerce store - Options for the Newest Products block

通过这种方式，我们在新品的特色产品行之后添加了另一行：

using Gutenberg blocks for your WooCommerce store - New Arrivals added

接下来，让我们以类似的方式添加 Best Selling 产品（在为其添加 Heading 块之后）：

using Gutenberg blocks for your WooCommerce store - Adding Best Selling products

现在我们已经为新访客和重复访客创建了这些行，让我们还添加一行显示正在销售的产品以吸引更多销售。 我们将再次使用 WooCommerce 块下的On Sale块来执行此操作（在使用 Heading 块添加标题之后）：

using Gutenberg blocks for your WooCommerce store - Adding On Sale products

您可以根据您的要求在 WooCommerce 块下添加更多块。 现在让我们将所有产品添加到 Shop 页面。 为此，您可以选择按类别划分的产品块。

using Gutenberg blocks for your WooCommerce store - Adding products by category

很多时候，您还会在最常用的块类别下找到所有这些块，但出于本教程的目的，我们从分配给它们的类别中选择了这些块。 您可以将所有标题链接到各自的页面，例如销售页面、畅销书页面等，以便客户查看该部分的完整产品列表。

在我们的商店/主页上，我们可以添加一个显示“浏览商店”的按钮，该按钮将链接到商店页面。

要添加按钮，我们必须从 Layout Elements 块中进行选择。

using Gutenberg blocks for your WooCommerce store - Choosing a button element

using Gutenberg blocks for your WooCommerce store - Adding and editing a button

我们将把这个按钮链接到 Shop 页面。

同样，您可以在我们创建的所有其他块下方创建按钮，例如“Best Sellers”块、“On Sale”块等，并为所有这些块创建单独的页面，并将按钮链接到各自的页面。

为了为不同类型的产品（畅销产品或销售产品）创建单独的页面，您可以使用将在相应页面上显示这些特定类型产品的短代码。 在这篇文章中，我们讨论了如何使用各种简码在主页（或任何页面）上显示不同类别的产品。

这就是我们页面最终的样子：

using Gutenberg blocks for your WooCommerce store - Final Shop page

现在，只需单击自定义（在前端，在预览您的页面时）将其设置为您的首页，您就可以开始了！ 这就是使用 Gutenberg 为您的 WooCommerce 商店创建有吸引力的首页是多么容易。 探索和试验古腾堡必须提供的各种块，以最大限度地利用其功能！