為您的網上商店設計一個乾淨的布局可以創造更愉快的購物體驗。 但是，您還需要確保購物者可以根據他們的喜好輕鬆瀏覽您的產品。 幸運的是，按屬性過濾產品 WooCommerce 塊使用戶能夠按顏色、大小和 其他特點.
在這篇文章中，我們將仔細研究按屬性塊過濾產品，並向您展示如何將其添加到您的 WooCommerce 商店。 我們還將分享一些使用此基本元素的技巧和最佳實踐。
讓我們開始吧！
如何按屬性 WooCommerce 塊將過濾產品添加到您的帖子或頁面
「按屬性過濾產品」塊使用戶能夠按尺寸、顏色、樣式和其他特徵瀏覽您商店中的產品。 這個元素使消費者更容易找到適合他們需求的產品。
要使用此塊，請打開要顯示最新產品的頁面或帖子。 我們建議您將該元素添加到主商店頁面。
接下來，點擊加號 (+) 添加一個新塊，並使用搜索欄查找「按屬性過濾產品」：
插入塊後，系統會要求您選擇要顯示的屬性：
進行選擇並單擊完成。 在本教程中，我們選擇了「顏色」作為我們的產品屬性：
如您所見，該塊顯示了所選屬性的變體列表。 例如，如果您選擇「顏色」，您將看到不同類型的可用顏色以及每個選項的產品數量。
請注意，按屬性塊過濾產品僅在您 使用 WooCommerce 在您的網站上。 使用此電子商務插件，您還可以訪問其他 WooCommerce 塊 在塊編輯器中。
按屬性 WooCommerce 塊設置和選項過濾產品
現在我們知道如何按屬性 WooCommerce 塊添加過濾產品，現在是探索其主要設置的時候了。 如果單擊該塊，您將在頂部看到一個工具欄：
讓我們看看每個選項：
您可能已經注意到，只有一些設置。 但是，您在右側的面板中也有一些配置選項。
例如，您可以隱藏產品計數或為標題選擇不同的標題級別（在我們的示例中，它是「按顏色過濾」）：
如果向下滾動面板，您將在「阻止設置」下看到更多選項。 查詢類型選項使您能夠顯示具有任何選定屬性的產品或具有所有選定特徵的項目：
您還可以更改過濾器的顯示樣式。 默認情況下，選項顯示為列表。 如果您選擇 Dropdown，則塊的外觀如下所示：
您還可以添加過濾器按鈕。 默認情況下，當用戶選擇一個選項（例如，「藍色」）時，產品會自動更新。 如果您啟用過濾器按鈕，則該塊將僅在用戶單擊 Go 後顯示相關產品：
在按屬性過濾產品部分，您可以選擇不同的屬性。 例如，我們切換到大小：
最後，您會找到高級設置選項。 它使您能夠添加 CSS 類 到塊。
按屬性 WooCommerce 塊有效使用過濾器產品的提示和最佳實踐
正如我們之前提到的，理想情況下，您應該使用主商店頁面（這也可以是您的主頁）上的按屬性過濾產品塊。 這樣，用戶可以在瀏覽您的產品目錄時輕鬆搜索他們喜歡的屬性。
我們建議在頁面的側面或頂部添加此過濾器，以便購物者可以立即發現它：
您可能還想對所有可用屬性使用按屬性塊過濾產品。 例如，您可以使用一種元素表示顏色，另一種表示尺寸：
如果您在塊編輯器中設計您的商店並希望在頁面的一側顯示按屬性塊過濾產品，則需要使用 WordPress 列。 或者，您可以選擇將塊插入到您網站的 小部件區域，例如您的側邊欄。
關於按屬性 WooCommerce 塊過濾產品的常見問題
正如我們所見，按屬性過濾產品 WooCommerce 塊使用起來非常簡單。 但是，您可能仍然對這個元素有一些疑問。 讓我們來看看其中的一些吧！
我可以在塊中添加新屬性嗎？
不幸的是，您無法使用按屬性過濾產品塊添加新屬性。 如果您想創建另一個產品特徵，您需要導航到 WordPress 儀錶板中的產品 > 屬性。
我可以按屬性塊同時使用不同的過濾產品嗎？
您可以同時使用多個按屬性塊過濾的產品。 假設您為顏色添加了一個塊，為大小添加了一個塊。 用戶可能想要查看白色和藍色以及中小尺寸的衣服。 在這種情況下，他們可以從每個塊中選擇他們的偏好。 WooCommerce 然後將顯示符合這些標準的所有產品。
按屬性塊過濾產品的工作方式與按屬性塊過濾產品的方式相同嗎？
不，這兩個塊有點不同。 Products by Attribute 塊使店主能夠根據他們選擇的屬性顯示產品網格。 同時，按屬性過濾產品塊使購物者能夠根據他們選擇的特徵瀏覽產品。
結論
過濾產品可以幫助用戶更快地找到他們想要的東西。 反過來，過濾創造了更方便的購物體驗，可能會帶來更高的轉化率。
正如我們所見，WooCommerce 塊按屬性過濾產品使購物者能夠根據他們喜歡的顏色、尺寸和其他選項瀏覽產品。 理想情況下，您應該將元素放置在一個實用的位置，例如您商店的側邊欄。 為每個產品屬性創建一個過濾塊也是明智的。
您對在 WooCommerce 中使用按屬性塊過濾產品有任何疑問嗎？ 在下面的評論部分讓我們知道！
精選圖片來自 Chaosamran_Studio/shutterstock.com