客戶經常會到達 您的 WooCommerce 商店 牢記固定預算。 他們會想，「我只能花 X 美元，所以我需要找到最合適的。」 強迫用戶瀏覽一頁又一頁的產品，直到找到符合他們預算的產品可能會讓人筋疲力盡。 這就是按價格過濾產品 WooCommerce 塊派上用場的地方。
此塊使客戶能夠選擇特定的價格範圍。 WooCommerce 然後將更新產品列表以僅顯示適合該預算的項目。 本文將向您展示如何放置按價格篩選產品塊以及如何配置它。 我們還將討論使用此元素的最佳實踐。
讓我們開始吧！
如何按價格 WooCommerce 塊將過濾產品添加到您的帖子或頁面
在我們解釋如何使用 Filter Products by Price 塊之前，重要的是要注意它只能與 所有產品 WooCommerce 塊. 如果您將按價格過濾產品塊放置在不包含所有產品塊的任何頁面上，過濾功能將不起作用。
這兩個塊一起為您商店的主商店頁面完美組合。 考慮到這一點， 打開塊編輯器 並首先放置所有產品塊：
此塊將生成一個產品網格，其中包含目錄中的每個項目。 您可以配置產品網格包含的行數和列數，並更改項目出現的順序：
目前，我們不打算修改這些設置。 相反，選擇在所有產品元素上方添加新塊的選項。 按價格塊查找過濾產品：
放置此元素後，塊編輯器將顯示一個價格滑塊，起始價格為 0 美元，最高為您商店中最貴商品的價格。 在我們的例子中，這是一個 90 美元的產品，所以滑塊從 0 美元到 90 美元：
您會注意到滑塊在編輯器屏幕中不起作用。 要查看正在運行的塊，您需要預覽頁面（或發布它並從前端訪問它）。 如果它看起來還不太正確，請不要擔心——讓我們來談談如何配置它。
按價格過濾產品 WooCommerce 塊設置和選項
按價格篩選產品塊不提供廣泛的設置。 但是，您可以配置塊外觀和工作方式的幾個方面。
要訪問這些設置，請在塊編輯器中選擇元素，然後單擊屏幕右上角的齒輪圖標。 這將在右側打開塊的設置菜單。 在此菜單中，您可以啟用或禁用可編輯價格文本欄位的選項：
如果您選擇文本選項，用戶將只能使用滑塊過濾價格。 默認的可編輯選項還使他們能夠手動更改價格欄位。
繼續，塊的設置菜單包括添加確認或「過濾器」按鈕的選項。 如果您啟用此設置，用戶將必須單擊一個按鈕來確認他們設置的價格範圍。 最後，您可以更改 標題級別 對於按價格標籤文本過濾產品：
配置按價格過濾產品塊應該不會花很長時間，因為該元素只包含少數設置。 如果您不確定要選擇哪些選項，我們將在下一節中討論我們推薦的設置。
WooCommerce Block 有效使用過濾器產品的提示和最佳實踐
使用按價格過濾產品塊時需要考慮的第一件事是它僅與所有產品 WooCommerce 塊一起使用。 所有產品塊不允許您按類別或任何其他屬性過濾產品。 這意味著如果您正在構建，將兩個塊配對在一起是有意義的 WooCommerce 商店頁面.
正如我們之前提到的，將按價格篩選產品塊放置在所有產品元素上方是有意義的。 這樣，用戶在瀏覽商店頁面時就不會錯過過濾功能。
按價格過濾產品塊已經包含一個識別標題，其內容為「按價格過濾」。 該標題非常適合大多數商店，因為它的默認設置 H3級. 如果頁面上有其他 H3 元素優先，我們只建議使用較低的標題級別。
出於可用性考慮，我們建議您還保留「按價格過濾產品」塊附帶的默認可編輯文本欄位。 為用戶提供手動編輯價格或使用滑塊的選項，使塊更具適應性。
至於添加確認按鈕，我們將選擇權留給您。 啟用該按鈕意味著您的產品網格不會在您使用按價格篩選產品滑塊時自動更新。 但是，如果您的網站已經 遭受性能問題.
關於按價格篩選產品的常見問題 WooCommerce Block
如果您對按價格篩選產品塊有任何疑問，本節旨在回答這些問題。 讓我們從討論這個塊工作的要求開始。
為什麼按價格塊篩選產品不起作用？
「按價格過濾產品」塊僅在您將其與「所有產品」WooCommerce 塊配對時才有效。 如果您將按價格篩選產品塊與任何其他類型的產品網格放在一起，則它根本不起作用。 您將能夠移動滑塊，但產品不會相應更新。
我可以在按價格塊篩選產品中編輯最低和最高價格嗎？
按價格過濾產品塊會自動將其價格滑塊設置為從 0 美元開始，並以您商店最昂貴產品的價格為上限。 您只能通過更改商店中的產品價格來編輯滑塊的值。
結論
Filter Products by Price 元素是一個 WooCommerce 塊，僅在您將其與另一個元素配對時才起作用。 其他只能成對工作的塊包括按屬性過濾產品和 有源產品過濾器.
使用按價格篩選產品 WooCommerce 塊使客戶能夠瀏覽您商店的整個庫存，並且僅查看符合其預算的商品。 該塊僅與 所有產品元素，因此在將其放置在您的網站上時請記住這一點。
您對如何使用按價格篩選產品塊有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！
Bakhtiar Zein 的特色圖片/shutterstock.com