为您的在线商店设计一个干净的布局可以创造更愉快的购物体验。但是，您还需要确保购物者可以根据自己的喜好轻松浏览您的产品。幸运的是，WooCommerce 的 Filter Products by Attributes WooCommerce 块使用户能够按颜色、尺寸和其他特征进行排序。
在这篇文章中，我们将仔细研究按属性块过滤产品并向您展示如何将其添加到您的 WooCommerce 商店。我们还将分享一些使用此基本元素的技巧和最佳实践。
让我们开始吧！
如何按属性 WooCommerce 块将过滤产品添加到您的帖子或页面
按属性过滤产品块使用户能够按尺寸、颜色、样式和其他特征浏览您的产品在商店。这个元素使消费者更容易找到适合他们需求的产品。
要使用此块，请打开要显示最新产品的页面或帖子。我们建议您将此元素添加到您的主要商店页面。
接下来，单击加号 (+) 添加新块，并使用搜索栏查找“按属性过滤产品”：
插入区块后，会要求你选择显示哪些属性：
进行选择并点击完成。在本教程中，我们选择“颜色”作为我们的产品属性：
如您所见，该块显示了所选属性的变体列表。例如，如果您选择“颜色”，您将看到不同类型的可用颜色以及每个选项的产品数量。
请注意，只有在您的网站上使用 WooCommerce 时，才能按属性块过滤产品。使用此电子商务插件，您还可以在块编辑器中访问其他 WooCommerce 块。
按属性 WooCommerce 块设置和选项过滤产品
现在我们知道如何按属性 WooCommerce 块添加过滤产品，是时候探索其主要设置了。如果你点击区块，你会在顶部看到一个工具栏：
让我们看看每个选项：
- 更改块类型或样式：您可以将元素转换为组块或列块。
- 编辑：您可以单击此选项以选择不同的产品属性。
- 选项：您可以复制块、将其分组、将其添加到可重复使用的块或将其删除。
您可能已经注意到，只有几项设置。但是，您在右侧面板中也有一些配置选项。
例如，您可以隐藏产品数量或为标题选择不同的标题级别（在我们的示例中，它是“按颜色过滤”）：
如果你向下滚动面板，你会看到更多的选项。查询类型选项使您能够显示具有任何选定属性的产品或具有所有选定特征的项目：
你还可以改变滤镜的显示风格。默认情况下，选项显示为列表。如果您选择 Dropdown，则块如下所示：
您还可以添加过滤器按钮。默认情况下，当用户选择一个选项（例如，“蓝色”）时，产品会自动更新。如果启用过滤按钮，则该区块只会在用户点击前往后显示相关产品：
在按属性筛选产品部分，您可以选择不同的属性。比如我们切换到尺寸：
< p>最后，您会找到高级设置选项。它使您能够将 CSS 类添加到块中。
按属性 WooCommerce 块有效使用过滤产品的提示和最佳实践
正如我们之前提到的，理想情况下，您应该使用主商店页面（这也可以是按属性过滤产品在您的主页上屏蔽）。这样，用户可以在浏览您的产品目录时轻松搜索他们喜欢的属性。
我们建议将此过滤器添加到页面的侧面或顶部，以便购物者可以立即发现它：
您可能还想按所有可用属性的属性块过滤产品。例如，您可以将一个元素用于颜色，将另一个元素用于尺寸：
如果您在区块编辑器中设计您的商店，并希望在页面侧边按属性区块显示筛选产品，则需要使用 WordPress 栏目。或者，您可以选择将块插入网站的小部件区域，例如侧边栏。
关于按属性 WooCommerce 块过滤产品的常见问题解答
正如我们所见，按属性 WooCommerce 块过滤产品使用起来非常简单。但是，您可能对此元素仍有一些疑问。让我们来看看其中的一些吧！
我可以向块添加新属性吗？
遗憾的是，您无法使用按属性块过滤产品来添加新属性。如果您想创建另一个产品功能，您需要导航到 WordPress 仪表板中的“产品”>“属性”。
我可以通过属性块同时使用不同的过滤器产品吗？
您可以同时使用多个属性块过滤器。假设您添加了一个颜色块和一个大小块。用户可能想要查看白色和蓝色以及小号和中号。在这种情况下，他们可以从每个块中选择自己的偏好。然后 WooCommerce 将显示符合这些条件的所有产品。
按属性块筛选产品与按属性块筛选产品的工作方式相同吗？
不对，这两个街区有点不同。 Products by Attribute 块使店主能够根据他们选择的属性显示产品网格。同时，按属性过滤产品块使购物者能够根据他们选择的特征浏览产品。
结论
筛选产品可以帮助用户更快地找到他们想要的东西。反过来，过滤创造了更方便的购物体验，可能会带来更高的转化率。
正如我们所见，WooCommerce 按属性分块筛选产品使购物者能够根据他们喜欢的颜色、尺寸和其他选项浏览产品。理想情况下，您应该将元素放置在功能位置，例如商店的侧边栏。为每个产品属性创建一个过滤器块也是明智的。
您对在 WooCommerce 中使用属性块过滤产品有任何疑问吗？在下面的评论部分让我们知道！
精选图片来自 Chaosamran_Studio/shutterstock.com
来源
