新推出的WooCommerce區塊編輯器
當您安裝或更新WooCommerce時,它將包含一個名為WooCommerce Blocks的新插件。這會將新的塊添加到WordPress塊編輯器,使您可以將WooCommerce產品添加到頁面和帖子。在本文中,我們將看一下WooCommerce塊,看看它們可以做什麼。 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行和“服裝”類別。 頂級產品 當您選擇塊時,“最受好評的產品”還會添加產品。這些設置包括1-6列和行的標準佈局,按類別過濾和CSS。這是顯示默認設置。 最新產品 當您選擇塊時,最新產品也會自動添加產品。這些設置包括標準佈局,類別過濾器和CSS。在此示例中,我選擇了5列和3行。默認情況下,我保留了類別過濾器,其中包括每個類別。 特價產品 待售產品會自動加載所有待售產品。它還包括列和行,產品過濾器和CSS的佈局選項。此選項添加了“訂購依據”選項,因此您可以按新穎性,價格,等級,銷售,標題或菜單訂購。在此示例中,我將列設置為2,將行設置為4。我將產品類別保留為默認值。 產品分類...
