客户来到您的 WooCommerce 商店时通常会考虑到固定预算。他们会想，“我只能花 X 美元，所以我需要找到最合适的。”强迫用户一页一页地浏览产品，直到找到符合他们预算的产品，这可能会让人筋疲力尽。这是按价格过滤产品 WooCommerce 块派上用场的地方。
此块使客户能够选择特定的价格范围。然后 WooCommerce 将更新产品列表以仅显示符合该预算的项目。本文将向您展示如何按价格产品块放置过滤器以及如何配置它。我们还将讨论使用此元素的最佳实践。
让我们开始吧！
如何按价格 WooCommerce 块将过滤产品添加到您的帖子或页面
在我们解释如何使用按价格过滤产品块之前，请务必注意它仅适用与所有产品 WooCommerce 块。如果您将 Filter Products by Price 块放置在任何不包含 All Products 块的页面上，过滤功能将不起作用。
这两个块一起构成了您商店主页面的完美组合。考虑到这一点，打开块编辑器并首先放置所有产品块：
此块将生成包含目录中每个项目的产品网格。您可以配置产品网格包含的行数和列数，并更改项目出现的顺序：
目前，我们不打算修改这些设置。相反，选择在所有产品元素上方添加新块的选项。按价格块搜索和过滤产品：
< p> 放置此元素后，块编辑器将显示一个价格滑块，从 0 美元开始，一直上升到您商店中最贵商品的价格。在我们的例子中，这是一个 90 美元的产品，所以滑块从 0 美元到 90 美元：
您会注意到滑块在编辑器屏幕中不起作用。要查看正在运行的块，您需要预览页面（或发布它并从前端访问它）。如果它看起来不太正确，请不要担心 - 让我们来谈谈如何配置它。
按价格过滤产品 WooCommerce 块设置和选项
按价格过滤产品块不提供广泛的设置。但是，您可以配置块的外观和工作方式的几个方面。
要访问这些设置，请在块编辑器中选择元素，然后单击屏幕右上角的齿轮图标。这将在右侧打开块的设置菜单。在此菜单中，您可以启用或禁用编辑价格文本字段的选项：
如果您选择文本选项，用户将只能使用滑块过滤价格。默认的可编辑选项还使他们能够手动更改价格字段。
继续，块的设置菜单包括添加确认或“过滤器”按钮的选项。如果启用此设置，用户将必须单击一个按钮来确认他们设置的价格范围。最后，您可以更改标题级别以按价格标签文本过滤产品：
按价格配置过滤器产品块不会花很长时间，因为该元素仅包含少量设置。如果您不确定选择哪些选项，我们将在下一节讨论我们推荐的设置。
有效使用过滤产品的 WooCommerce 区块提示和最佳实践
使用按价格过滤产品区块时首先要考虑的是，它仅适用于所有产品 WooCommerce 区块使用.所有产品块不允许您按类别或任何其他属性过滤产品。这意味着如果您要构建 WooCommerce 商店页面，将这两个块配对在一起是有意义的。
正如我们之前提到的，将按价格块过滤的产品放置在所有产品元素之上是有意义的。这样，用户在浏览商店页面时就不会错过筛选。
按价格过滤产品块已经包含一个标识标题，上面写着“按价格过滤”。由于其默认的 H3 级别，此标题非常适合大多数商店。如果页面上有其他 H3 元素优先，我们只建议使用较低的标题级别。
出于可用性考虑，我们建议您还保留“按价格过滤产品”块附带的默认可编辑文本字段。为用户提供手动编辑价格或使用滑块使块更具适应性的选项。
至于添加确认按钮，我们将选择权交给您。启用此按钮意味着当您使用按价格滑块过滤产品时，您的产品网格不会自动更新。但是，如果您的网站已经出现性能问题。
有关按价格 WooCommerce 块过滤产品的常见问题
如果您对按价格块过滤产品有任何疑问，本节旨在回答这些问题。让我们首先讨论此块的工作要求。
为什么按价格块过滤产品不起作用？
“按价格过滤产品”块只有在与“所有产品”WooCommerce 块配对时才有效。如果您将按价格筛选的产品块与任何其他类型的产品网格一起放置，则它根本不起作用。您将能够移动滑块，但产品不会相应更新。
我可以在按价格块过滤产品中编辑最低和最高价格吗？
按价格过滤产品块会自动将其价格滑块设置为 0 美元起，并以您商店最贵产品的价格为上限。您只能通过更改商店中产品的价格来编辑滑块的值。
结论
按价格过滤产品元素是一个 WooCommerce 块，仅当您将其与另一个元素配对时才有效。其他只能成对使用的块包括按属性过滤产品和活动产品过滤器。
使用按价格过滤产品 WooCommerce 块使客户能够浏览您商店的整个库存并仅查看符合其预算的商品.此块仅与所有产品元素兼容，因此在将其放置在您的网站上时请记住这一点。
您对如何使用“按价格过滤”块有任何疑问吗？让我们在下面的评论部分讨论它们！
特色图片由 Bakhtiar Zein/shutterstock.com 提供
来源
