作為 您的 WooCommerce 商店 增長，您提供的產品種類也會增加。 對不同項目進行分類的最佳方法之一是使用顏色或尺寸等特徵。 Products by Attribute WooCommerce 塊使您能夠顯示符合特定特徵的產品。 這樣，客戶可以找到適合他們需求的確切款式和尺寸。
在本文中，我們將向您展示如何將 Products by Attribute 塊添加到您的帖子和頁面。 我們將討論如何配置元素，並討論有效使用它的幾個技巧。
讓我們開始吧！
如何按屬性 WooCommerce 塊將產品添加到您的帖子或頁面
Products by Attribute 塊使您能夠從 WooCommerce 商店中的所有產品特徵中進行選擇。 選擇一個屬性後，該元素將顯示一個產品網格，其中展示了具有該特徵的所有項目。
例如，您可以使用 Products by Attribute 塊來顯示特定尺寸或顏色的服裝項目。 您還可以按品牌或材料來表徵產品。
要使用該塊， 打開塊編輯器 並選擇 + 按鈕。 然後，在搜索欄中輸入「按屬性分類的產品」：
請注意，兩個塊共享非常相似的名稱。 但是，按屬性過濾產品元素的工作方式與我們使用的元素不同。 使用該塊，用戶可以查看可用屬性列表並選擇他們想要瀏覽的屬性。
一旦您按屬性塊插入產品，WooCommerce 將向您顯示可用於您的產品的屬性列表。 請注意，如果您對當前選項不滿意，您可以隨時添加或編輯特徵：
選擇屬性後，該塊將轉換為產品網格。 該網格將顯示具有該特徵的所有項目。
在下面的屏幕截圖中，您可以在我們的測試商店中看到 Blue 屬性的產品網格：
那件紅色連帽衫也有藍色，但這不是我們為其特色圖片選擇的顏色。 在您的商店中添加 Products by Attribute 塊時要記住這一點。
產品按屬性 WooCommerce 塊設置和選項
Products by Attribute 塊包括廣泛的格式和配置選項。 如果您選擇該元素，您將看到其上方出現一個格式菜單。 該菜單包含用於 (1) 更改塊的寬度和 (2) 編輯您選擇的屬性的選項：
選擇塊並單擊屏幕右上角的齒輪圖標將打開其配置菜單。 布局選項 (1) 使您能夠更改塊的產品網格中的列數和行數。 您還可以使用對齊最後一個塊設置 (2) 來對齊網格內的添加到購物籃按鈕：
繼續，內容部分使您可以選擇哪些元素將出現在 Products by Attribute 塊中。 默認情況下，每個產品包括其標題 (1)、價格 (2)、評級 (3) 和添加到購物車按鈕 (4)：
繼續向下滾動塊的設置菜單，您將看到一個名為 Filter by Product Attribute (1) 的選項卡。此部分允許您編輯您選擇的屬性。 最後，Order By (2) 可以更改產品出現的順序：
一旦您對 Products by Attribute 塊的布局及其包含的元素感到滿意，您就可以保存您的帖子或頁面。 如果您從前端查看塊，您將看到一個產品網格，其中包含具有您選擇的屬性的所有項目。 但是，如果您想確保布局儘可能對用戶友好，還有一些工作要做。
按屬性 WooCommerce 塊使用產品的提示和最佳實踐
Products by Attribute 塊使您能夠在 WordPress 網站的任何位置添加自定義產品網格。 但是，該元素不包含描述網格中項目類型的標題。
為避免混淆，我們建議 添加標題塊 這解釋了您選擇的屬性：
此外，Products by Attribute 塊應該包含與其他塊相同的所有元素 產品網格 在你的商店裡。 這意味著每件商品都應該顯示其價格、標題和添加到購物車按鈕。 此外，如果您選擇顯示其他產品的評級，您還可以在產品屬性塊中顯示它們。
按屬性 WooCommerce 塊有關產品的常見問題解答
按屬性塊放置和配置產品很簡單。 但是，如果您對使用該元素仍有任何疑問，本節旨在回答這些問題。
我可以通過屬性塊為產品選擇多少個屬性？
Products by Attribute 塊使您可以根據需要選擇任意數量的屬性。 但是，選擇多個特徵可能會讓用戶感到困惑，除非這些屬性彼此之間有些關聯。
如何添加新的 WooCommerce 屬性？
也許您對使用 Products by Attribute 塊時看到的屬性選擇不滿意。 如果是這樣，您可以隨時添加新選項。 然而，經過 添加新的 WooCommerce 屬性，確保更新屬於這些類別的產品。
我應該將產品按屬性塊放置在哪裡？
Products by Attribute 塊非常適合商店主頁。 通過在主頁上顯示該元素，您可以吸引對熱門產品的關注，並展示可能不會引起太多關注的項目。
結論
WooCommerce 塊 為您提供多種方式在您的商店中顯示自定義產品網格。 例如，「按屬性分類的產品」塊使您能夠顯示符合特定特徵（例如尺寸、顏色和商店中可用的任何其他選項）的商品。
您可以將 Products by Attribute 塊配置為根據需要顯示任意數量的屬性。 該元素還使您可以完全控制其布局和顯示設置，包括產品價格、評級和添加到購物車按鈕。
您對使用 WooCommerce 屬性塊的產品有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！
精選圖片來自 ProStockStudio/shutterstock.com