新的 WooCommerce Blocks 插件概述

已发表: 2019-01-21

当您安装或更新 WooCommerce 时，它包含一个名为 WooCommerce Blocks 的新插件。这会向 WordPress 块编辑器添加新块，允许您将 WooCommerce 产品添加到您的页面和帖子。在本文中，我们将看看 WooCommerce Blocks，看看它们能做什么。

WooCommerce 阻止插件

WooCommerce Blocks 是 WooCommerce 的一个新插件，它为 Gutenberg 添加了 7 个块：

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

每个块都显示在一个可调整的网格中，并且可以排序或过滤。网格可让您指定布局中的列数。您可以通过调整滑块控件从 1 到 6 列中进行选择。几个块还允许您调整行数。 4 是所有具有列或行的块的默认值。它不包括分页，因此您设置的数字就是将显示的全部内容。

过滤器允许您选择类别。有些包括排序功能，允许您按新鲜度、价格、评级、销售额、标题或菜单顺序进行排序。

这些块还包括带有自定义 CSS 字段的标准 Gutenberg Advanced 选项卡。

激活产品块

当您更新或激活 WooCommerce 时，您会在插件列表中看到新插件。如果您在此处没有看到它，您可以在插件下的添加新选项卡中搜索 WooCommerce 块。

您可以在插件列表中或通过单击 WordPress 仪表板顶部的按钮来激活该块。

使用 WooCommerce 块

名为 WooCommerce 的新选项卡已添加到 Gutenberg 编辑器中的可用块列表中。此选项卡内是 7 个 WooCommerce 块的集合。每个块都有一个与其功能相匹配的图标，因此您一眼就能认出它们。

当您将块添加到页面时，符号会出现在页面上，您可以单击以快速添加它们。

让我们看看每个块。

特色产品

特色产品可让您从列表中选择要显示的单个产品。您可以对齐文本、编辑叠加层和编辑图像。它还具有附加 CSS 类字段。

此块具有所有 WooCommerce 块中可用的最多自定义项。使用顶部的文本按钮设置文本方向。单击编辑打开覆盖的自定义。在这里，您可以选择产品、显示描述、显示价格、选择叠加层的颜色以及设置其不透明度。

您可以选择要使用的颜色，也可以通过单击多色圆圈选择自定义颜色。在这里，您可以输入十六进制代码、RGB 代码，或使用滑块和颜色选择器调整颜色。我喜欢叠加调整。要调整文本或按钮，您需要使用 CSS。

精选产品

精选产品可让您选择将显示的产品。您可以从块本身或从右栏中搜索它们。将列数设置为 1-6。按新鲜度、价格、评级、销售额、标题或菜单顺序排序。

选择产品将它们添加到网格内的布局中。

畅销产品

畅销产品不允许您从块中选择任何内容，但您仍然可以在右侧的设置中进行所有自定义。在这里，您可以选择列数和行数（每个从 1-6 中选择）、按类别过滤并调整 CSS。

在此示例中，我选择了 6 列、2 行和 Clothing 类别。

最受好评的产品

评分最高的产品还会在您选择块时添加产品。这些设置包括 1-6 列和行的标准布局、按类别过滤和 CSS。这是显示默认设置。

特价商品

On Sale Products 自动加载所有在售产品。它还包括列和行的布局选项、产品过滤器和 CSS。这个添加了 Order By 选项，因此您可以按新鲜度、价格、评级、销售额、标题或菜单顺序进行订购。在此示例中，我将列设置为 2，将行设置为 4。我将产品类别保留为默认值。

产品分类

Products by Category 允许您选择块内的类别，并包含一个选择器来帮助优化选择。对于我的示例，它只有一个选项（任何选定的类别）。它还包括布局选项、类别选择、排序依据和 CSS 设置。

在这个例子中，我选择了我的类别，将列设置为 4，行设置为 2，并按字母顺序排列产品。

带有 WooCommerce 块的示例页面

下面来看看前端的每个块。我添加了一个标签来识别它们。我已将每个设置为不同的列数，但它们都有 1 行以帮助防止图像失控。您可以使用这些块轻松地为每个类别创建一个商店页面。

例如，我创建了一个页面来展示配件。我添加了一个封面图片和一个标题，并且我已经将 Products by Category 块设置为显示 3 列和 6 行。

它创建了一个设计精美的干净页面，当然，它只显示配件类别的产品。这可用于创建所有类型的产品页面。

这是一个简短的 CTA，它在双列中添加了一个 Hand-picked 块和一个文本块。

该页面很简单，但功能强大。

对于此页面，我在博客文章布局中添加了畅销产品。我将其设置为 4 列和 1 行，并选择 Clothing 作为类别。

帖子看起来很棒。在发布之前，我可能会添加一些空间，为产品添加标签，并可能在文本中添加一些填充，但很容易看到潜力。

对于这个，我添加了一个两列布局，并添加了一个文本块和具有 2 列和 2 行的畅销产品块。

结束的想法

WooCommerce Blocks 是一个有趣的插件。这些块使用简单，并提供了一些有用的类别、布局和过滤工具。我喜欢列和行布局滑块。如果您想对它们的文本、按钮、悬停覆盖等进行调整，您必须使用 CSS，但至少可以选择自定义 CSS。这些块非常适合创建销售页面或在您的内容中添加产品。

我希望看到更多样式功能（尤其是按钮、文本和悬停覆盖）。我一直想像使用 Divi 一样进行自定义（我认为 Divi 宠坏了我）。它确实包括 CSS 类字段，这将有助于那些使用 CSS 的人。即使没有很多自定义，我也喜欢使用块。如果您想在 Gutenberg 页面和帖子中包含 WooCommerce 产品，WooCommerce Blocks 值得一试。

我们希望听到您的意见。 您是否尝试过 WooCommerce 块？ 请在评论中告诉我们您的体验。

精选图片来自 Jomic/shutterstock.com