新的 WooCommerce Blocks 插件概述

已發表: 2019-01-21

當您安裝或更新 WooCommerce 時，它包含一個名為 WooCommerce Blocks 的新插件。這會向 WordPress 塊編輯器添加新塊，允許您將 WooCommerce 產品添加到您的頁面和帖子。在本文中，我們將看看 WooCommerce Blocks，看看它們能做什麼。

WooCommerce 阻止插件

WooCommerce Blocks 是 WooCommerce 的一個新插件，它為 Gutenberg 添加了 7 個塊：

特色產品
精選產品
暢銷產品
最受好評的產品
最新產品
特價商品
產品分類

每個塊都顯示在一個可調整的網格中，並且可以排序或過濾。網格可讓您指定佈局中的列數。您可以通過調整滑塊控件從 1 到 6 列中進行選擇。幾個塊還允許您調整行數。 4 是所有具有列或行的塊的默認值。它不包括分頁，因此您設置的數字就是將顯示的全部內容。

過濾器允許您選擇類別。有些包括排序功能，允許您按新鮮度、價格、評級、銷售額、標題或菜單順序進行排序。

這些塊還包括帶有自定義 CSS 字段的標準 Gutenberg Advanced 選項卡。

激活產品塊

當您更新或激活 WooCommerce 時，您會在插件列表中看到新插件。如果您在此處沒有看到它，您可以在插件下的添加新選項卡中搜索 WooCommerce 塊。

您可以在插件列表中或通過單擊 WordPress 儀表板頂部的按鈕來激活該塊。

使用 WooCommerce 塊

名為 WooCommerce 的新選項卡已添加到 Gutenberg 編輯器中的可用塊列表中。此選項卡內是 7 個 WooCommerce 塊的集合。每個塊都有一個與其功能相匹配的圖標，以便您一眼就能認出它們。

當您將塊添加到頁面時，符號會出現在頁面上，您可以單擊以快速添加它們。

讓我們看看每個塊。

特色產品

特色產品可讓您從列表中選擇要顯示的單個產品。您可以對齊文本、編輯疊加層和編輯圖像。它還具有附加 CSS 類字段。

此塊具有所有 WooCommerce 塊中可用的最多自定義項。使用頂部的文本按鈕設置文本方向。單擊編輯打開覆蓋的自定義。在這裡，您可以選擇產品、顯示描述、顯示價格、選擇疊加層的顏色以及設置其不透明度。

您可以選擇要使用的顏色，也可以通過單擊多色圓圈選擇自定義顏色。在這裡，您可以輸入十六進制代碼、RGB 代碼，或使用滑塊和顏色選擇器調整顏色。我喜歡疊加調整。要調整文本或按鈕，您需要使用 CSS。

精選產品

精選產品可讓您選擇將顯示的產品。您可以從塊本身或從右欄中搜索它們。將列數設置為 1-6。按新鮮度、價格、評級、銷售額、標題或菜單順序排序。

選擇產品將它們添加到網格內的佈局中。

暢銷產品

暢銷產品不允許您從塊中選擇任何內容，但您仍然可以在右側的設置中進行所有自定義。在這裡，您可以選擇列數和行數（每個從 1-6 中選擇）、按類別過濾並調整 CSS。

在此示例中，我選擇了 6 列、2 行和 Clothing 類別。

最受好評的產品

評分最高的產品還會在您選擇塊時添加產品。這些設置包括 1-6 列和行的標準佈局、按類別過濾和 CSS。這是顯示默認設置。

特價商品

On Sale Products 自動加載所有在售產品。它還包括列和行的佈局選項、產品過濾器和 CSS。這個添加了 Order By 選項，因此您可以按新鮮度、價格、評級、銷售額、標題或菜單順序進行訂購。在此示例中，我將列設置為 2，將行設置為 4。我將產品類別保留為默認值。

產品分類

Products by Category 允許您選擇塊內的類別，並包含一個選擇器來幫助優化選擇。對於我的示例，它只有一個選項（任何選定的類別）。它還包括佈局選項、類別選擇、排序依據和 CSS 設置。

在這個例子中，我選擇了我的類別，將列設置為 4，行設置為 2，並按字母順序排列產品。

帶有 WooCommerce 塊的示例頁面

下面來看看前端的每個塊。我添加了一個標籤來識別它們。我已將每個設置為不同的列數，但它們都有 1 行以幫助防止圖像失控。您可以使用這些塊輕鬆地為每個類別創建一個商店頁面。

例如，我創建了一個頁面來展示配件。我添加了一個封面圖片和一個標題，並且我已經將 Products by Category 塊設置為顯示 3 列和 6 行。

它創建了一個設計精美的干淨頁面，當然，它只顯示配件類別的產品。這可用於創建所有類型的產品頁面。

這是一個簡短的 CTA，它在雙列中添加了一個 Hand-picked 塊和一個文本塊。

該頁面很簡單，但功能強大。

對於此頁面，我在博客文章佈局中添加了暢銷產品。我將其設置為 4 列和 1 行，並選擇 Clothing 作為類別。

帖子看起來很棒。在發布之前，我可能會添加一些空間，為產品添加標籤，並可能在文本中添加一些填充，但很容易看到潛力。

對於這個，我添加了一個兩列佈局，並添加了一個文本塊和具有 2 列和 2 行的暢銷產品塊。

結束的想法

WooCommerce Blocks 是一個有趣的插件。這些塊使用簡單，並提供了一些有用的類別、佈局和過濾工具。我喜歡列和行佈局滑塊。如果您想對它們的文本、按鈕、懸停覆蓋等進行調整，您必須使用 CSS，但至少可以選擇自定義 CSS。這些塊非常適合創建銷售頁面或在您的內容中添加產品。

我希望看到更多樣式功能（尤其是按鈕、文本和懸停覆蓋）。我一直想像使用 Divi 一樣進行自定義（我認為 Divi 寵壞了我）。它確實包括 CSS 類字段，這將有助於那些使用 CSS 的人。即使沒有很多自定義，我也喜歡使用塊。如果您想在 Gutenberg 頁面和帖子中包含 WooCommerce 產品，WooCommerce Blocks 值得一試。

我們希望聽到您的意見。 您是否嘗試過 WooCommerce 塊？ 請在評論中告訴我們您的體驗。

精選圖片來自 Jomic/shutterstock.com