WooCommerce:如何開始使用 WooCommerce 塊 - 第 2 部分

已發表: 2022-02-02

WooCommerce 是領先的電子商務平台之一,一次一個網站標誌著其在電子商務行業的領地 - 下載量超過 500 萬。 它為中小型企業和網絡專業人士提供完整的在線商店解決方案。

現在,開發團隊正在努力使 WooCommerce 與 Gutenberg 完全兼容。 第一階段是關於構建可在新的 WordPress 編輯器中使用的自定義WooCommerce 塊

這些塊是免費的,讓您可以自定義和更改 WooCommerce 商店的完整外觀和感覺 - 無需輸入任何代碼。 使用簡單的拖放工具 - 您可以將商店產品以任何所需格式放置在網站上的任何位置。

在本文的第 1 部分中,我們看到了十個 WooCommerce 塊及其意義。 在本文中,我們將討論可用於交互式在線商店的另外十個塊。 但首先,讓我們了解如何在您的商店中添加和編輯這些塊。

如何添加和編輯 WooCommerce 塊?

要添加 WooCommerce 塊,首先,確保下載 WooCommerce 塊插件的副本。

安裝後,在任何頁面/帖子中使用自定義 WooCommerce 塊變得很容易。 單擊“添加塊”[+] 圖標,選擇要添加的 WooCommerce 塊,然後簡單地將其拖放到頁面上的合適位置。

專業提示:要快速將塊添加到您的商店,請使用“/”鍵盤快捷鍵 - 這將顯示可用 WooCommerce 塊的列表。

資源

同時,編輯塊也很容易。 單擊您要編輯的塊,然後從右側的塊定制器面板中選擇合適的自定義選項,例如調整行數或列數。 您所做的更改將更新該塊。

資源

既然您知道如何添加和編輯塊,讓我們跳到下一組十個 WooCommerce 塊,您可以將它們添加到您的電子商務商店並簡化產品搜索。

基本 WooCommerce 塊列表 [第 2 部分]

11. 在售產品

資源

使用 On Sale Products Block – 您可以在一個漂亮的標準網格中抓取並顯示您商店中正在銷售的所有產品。

您可以修改網格的行數和列數,並選擇隱藏或顯示產品標題、評級、價格和添加到購物車按鈕。 您還可以添加過濾器,讓您的客戶按不同類別過濾在售的產品。

12. 產品搜索

資源

WooCommerce 產品搜索塊是最有用和最獨特的塊之一,它在您的商店中添加了一個搜索框,以允許您的客戶輸入特定的關鍵字並蒐索產品。

此塊帶有一個自定義選項來顯示或隱藏搜索字段標籤。

專業提示:建議將產品搜索塊放在電子商務商店的側邊欄或標題中,而不是直接放在頁面上。 這是因為如果您的客戶搜索產品,如果您將其放在頁面中,產品結果頁面將不會顯示搜索框,從而導致客戶體驗不佳。

13.產品類別列表

資源

此塊顯示所有產品類別的列表。 您可以選擇通過下拉列表或列表顯示類別。 類別的示例可以是連帽衫、T 卹、鞋子或配飾。

您可以選擇隱藏或顯示類別圖像、類別層次結構(或子類別)、產品數量和空類別(未分配產品的類別——這幾乎是不可能的)。

顯示所有產品類別的列表可以讓您的客戶輕鬆導航和查看您在 WooCommerce 商店銷售的不同產品和產品類別。

14. 按屬性分類的產品

資源

Products By Attribute 塊允許您按屬性(例如顏色或大小)過濾產品,並將它們顯示在網格中。 此塊使客戶可以輕鬆選擇他們選擇的特定產品屬性。

它的自定義選項類似於其他 WooCommerce 塊,您可以在其中隱藏或顯示產品評級、標題、價格、添加到購物車按鈕以及調整網格的行數和列數。

15. 產品標籤

資源

此塊為您的客戶提供了更精細和更精細的過濾選項。

使用產品標籤塊,您可以根據某些標籤列出您的產品。 例如,如果產品是一頂帽子——標籤可以是漁夫帽、馬球帽、牛仔帽或船夫帽。 其自定義選項類似於按屬性塊劃分的產品。

16. 產品評論

資源

產品評論是一個簡單的塊,沒有很多自定義選項。

此塊可讓您顯示您從列表中選擇的特定產品的所有評論。 例如,如果您選擇產品帽子 - 此塊顯示在您的商店中收到的關於產品帽子的所有評論。

產品評論塊在建立客戶對您的特定產品和品牌的信任方面發揮著重要作用。

17. 按類別評論

資源

按類別劃分的評論幾乎與我們在文章第 1 部分中介紹的“所有評論”區塊相似。 唯一的區別是您可以在此塊中根據特定產品類別過濾和顯示評論。

您可以選擇隱藏或顯示商品名稱、商品圖片、商品評分、評論名稱、評論數據、評論內容和評論者照片。 您還可以選擇添加添加到購物車按鈕。

同樣,“按類別評論”塊允許您的客戶通過查看其他買家的客戶評論來做出更明智的購買決策。

18. 最受好評的產品

資源

評分最高的產品塊顯示所有產品的網格及其星級。 如果您的某些產品有星級評分,而其他產品則沒有,那麼它將按最高或最高評分的產品對網格進行排序,其餘產品按默認排序順序排序。

它的自定義選項類似於在網格中顯示產品的其他塊,例如 On Sale Products Block。 但是,它還附帶一個按類別選項的附加過濾器 - 允許客戶使用他們選擇的類別過濾評價最高的產品。

19. 精選產品

資源

Hand-picked Products 塊允許您手工挑選您選擇的特定產品,並將它們顯示在標準的 WooCommerce 產品網格中。

您可以選擇盡可能多的產品來為他們帶來最大的流量並增加銷售額。

此外,您可以自定義您精選產品的佈局,隱藏/顯示產品標題、產品名稱、產品評級、添加到購物車按鈕、設置過濾器和訂單選項,甚至設置產品列的總數。

20. 按庫存過濾產品

資源

使用按庫存塊篩選產品 - 您可以根據庫存狀態顯示您的商店產品。 例如,您可以在缺貨、有貨或延期交貨之間選擇狀態。

您可以選擇標題級別(H2、H3 或 H4),顯示或隱藏產品計數,並添加可選的過濾器按鈕,例如“開始”。 除此之外,此塊上沒有其他自定義選項可用。

此塊是一種簡單的方法,可讓您的客戶查看哪些產品有庫存、缺貨和缺貨 - 這樣他們就可以了解他們正在尋找的產品的可用性。

結論

WooCommerce Blocks 是創建一流電子商務商店並在任何商店頁面或博客文章上推廣產品的絕佳方式。

在展示特色類別和產品以及展示最暢銷和最新產品的同時,您可以最大限度地提高特定產品的轉化率和銷售額。 同時,顯示客戶評論、提供產品過濾選項和產品搜索框——顯著提升客戶購物體驗。

將這些塊添加到您的電子商務商店可以讓您的客戶找到他們正在尋找的確切產品和產品類別,從而幫助他們更快地購買。

更重要的是 - 添加和編輯這些塊是輕而易舉的,您可以通過簡單的自定義選項和設置輕鬆完成。

因此,請確保充分利用本文中提到的 WooCommerce 塊來自定義您的 WooCommerce 頁面,為您的客戶創造豐富的體驗,以您喜歡的最佳方式推廣您的產品,並促進您的業務銷售。

如果您錯過了本文的第 1 部分,請在此處閱讀以了解您可以在在線商店中使用的所有 WooCommerce 塊。