WooCommerce 塊提供了許多選項來展示您的產品。當您安裝WooCommerce時，當前有 20 個塊添加到塊編輯器中。WooCommerce 塊插件中提供了更多塊和新功能，該插件測試添加到 WooCommerce 核心的新塊和功能。在本文中，我們將簡要概述每個塊及其功能。
WooCommerce 核心中的 WooCommerce 塊
在塊編輯器中搜索 Woo 會顯示 20 個 WooCommerce 塊。當您安裝 WooCommerce 時，這些塊已經內置。您還可以通過滾動到編輯器中塊列表的底部來找到它們。
將滑鼠懸停在大多數塊上會顯示它在您網站上的外觀預覽。這些塊中的每一個都提供了您的 WooCommerce 產品的獨特視圖。讓我們仔細看看每個塊。我會在頁面上展示它的樣子，並在預覽可用時突出顯示。我還會提到任何獨特的設置。
有源產品過濾器
這顯示了當前活動產品的過濾器。將它們顯示為列表或籌碼（類似於按鈕）。選擇標題級別。它適用於所有產品和過濾器 WooCommerce 塊。
所有產品
這顯示了您商店中的所有產品。它包括排序和分頁。將其與最後一個塊對齊並顯示排序下拉列表。將其添加到頁面後，此不提供預覽。
所有評論
此塊顯示所有產品評論的完整列表。它顯示評論者、產品、星級和評論的縮略圖。您可以對它們進行排序、選擇將顯示的內容、選擇圖像類型以及調整列表設置。
暢銷產品
此塊顯示了您有史以來最暢銷產品的網格。您可以將其與最後一個塊對齊。添加內容元素，包括標題、價格、評級和添加到購物車按鈕。您還可以設置過濾器選項。
特色類別
這顯示了您想要設置為特色類別的特定類別的所有產品。從列表中選擇類別。您只能選擇一種。
特色產品
這將顯示您從列表中選擇的特定產品，讓您突出顯示該產品。
按屬性過濾產品
這個添加了一個過濾器，以便用戶可以根據產品的屬性過濾產品。您可以從列表中選擇屬性，例如顏色和大小。顯示為列表或下拉列表。在 AND/OR 之間設置查詢類型。包括產品數量、選擇標題級別、添加按鈕並選擇過濾器。
按價格過濾產品
此塊添加了一個過濾器，允許用戶選擇他們正在尋找的價格。價格範圍可以是可編輯的按鈕或文本。如果需要，您可以添加一個按鈕並設置標題級別。一旦將其添加到頁面中，就不會提供預覽。
按庫存過濾產品
這允許用戶根據庫存狀態顯示產品。他們可以在有貨、缺貨和延期交貨之間進行選擇。顯示產品數量，選擇標題級別，然後添加一個按鈕。您可以將它與其他 WooCommerce 塊一起使用，例如所有產品塊。如果將其添加到頁面，則不會顯示預覽。
精選產品
此塊允許您選擇塊顯示的特定產品。根據需要選擇任意數量。您可以選擇將顯示的內容元素，包括標題、價格、評級和添加到購物車按鈕。它還具有按鈕對齊選項並設置順序和過濾器選項。
最新產品
此塊在網格中顯示所有最新產品。將其與最後一個塊對齊並添加內容元素，例如標題、價格、評級和添加到購物車按鈕。您還可以設置過濾器選項。
特價商品
此塊顯示一個包含所有在售產品的網格。選擇顯示標題、價格、評級和加入購物車按鈕。您可以將其與最後一個塊對齊。它還包括順序和過濾器選項。
產品類別列表
這將顯示您的類別列表。將它們顯示為大綱中的列表或下拉列表。顯示產品數量、圖像、層次結構和空類別。
產品搜索
這是更獨特的 WooCommerce 塊之一。它會在您的頁面上添加一個搜索框，客戶可以在其中輸入關鍵字來搜索您的產品。顯示或隱藏欄位標籤。
按屬性分類的產品
這將根據您從列表中選擇的屬性顯示您的產品網格。屬性包括大小、顏色等。將其與最後一個塊對齊，選擇將顯示的內容元素，並設置過濾器和排序選項。
產品分類
這顯示了您選擇的特定類別的產品網格。根據需要選擇任意數量的類別。添加內容元素，包括標題、價格、評級和添加到購物車按鈕。您還可以將其與最後一個塊對齊並設置順序選項。
按標籤分類的產品
這將顯示您從列表中選擇的標籤中的產品網格。根據需要選擇任意數量的標籤。從標題、價格、評級和添加到購物車按鈕中選擇將顯示的內容元素。與最後一個塊對齊並按選項選擇順序。
產品評論
這顯示了您從列表中選擇的特定產品的所有評論。
按類別的評論
此塊顯示基於您從列表中選擇的類別的所有產品評論。選擇將顯示的內容元素。添加標題、價格、評級和加入購物車按鈕。
最受好評的產品
這會顯示一個包含所有評分最高產品的網格。選擇要顯示的內容元素，包括標題、價格、評級和添加到購物車按鈕以及過濾器類別。
WooCommerce 阻止插件
該WooCommerce塊插件更是增加了功能，以在WordPress塊，並增加了兩個新的塊。這兩個新塊會給你一個兼容性通知，表明你可能會遇到與其他擴展和集成的兼容性問題。他們在其設置中包含一個鏈接，您可以在其中提供有關該塊的反饋。
這個插件的目的是測試新的塊和功能。一旦塊和功能變得穩定，它們就會合併到 WooCommerce 核心中。在您的實時站點中使用此插件時，您需要小心。
大車
此塊將您的購物車添加到頁面。您可以包含運費計算器，選擇結帳按鈕的鏈接，並將其設置為暗模式。它包括您可以在 WooCommerce 設置中將該頁面設置為默認購物車的通知。它還包括反饋鏈接。
查看
此塊為您的購物車提供結賬。它提供了一個通知，您可以在 WooCommerce 設置中將此頁面設置為默認結帳。它包括一個暗模式選項。它由幾個可以獨立自定義的元素組成。如果您已將塊添加到您的頁面，則此不提供預覽。
當前 WooCommerce 塊的新功能
當前的三個 WooCommerce 塊具有新的或不同的功能：
所有評論 – 添加排版和顏色設置。從 7 種預設字體大小中進行選擇或自定義大小。顏色包括 10 個預設和一個自定義選項。
產品評論 – 添加與所有評論相同的排版和顏色設置。這個以全形顯示並刪除塊選項和內容元素。
按類別分類的評論——這個還增加了排版和顏色設置。它還以全形顯示塊並刪除塊選項和內容元素。
結束對 WooCommerce 塊的思考
這就是我們對 WooCommerce 塊的看法。這包括 WooCommerce 核心產品中可用的 20 個塊以及來自 WooCommerce 塊附加插件的 2 個新塊和設置。WooCommerce 塊提供了一種很好的方式來展示您的產品。它們易於使用，是將產品添加到任何頁面或帖子的好方法。在以後的文章中，我們將更詳細地介紹每個塊並了解如何使用它們。
我們希望聽到您的意見。您是否在 WordPress 網站中使用 WooCommerce 塊？請在評論中告訴我們。
特色圖片來自 aliaksei kruhlenia/shutterstock.com