為您的 WooCommerce 商店使用 Gutenberg 塊的指南

已發表: 2019-09-17

在 WordPress 中引入 Gutenberg 編輯器在很大程度上有助於重塑 WordPress 的身份。 從具有添加媒體功能和可選插件以滿足各種需求的核心內容管理系統，它現在又是一個豐富的、以媒體為中心的所見即所得編輯器和網頁構建器，並且不影響它始終提供的靈活性。 事實上，Gutenberg 提供的塊增加了以您想要的方式構建頁面的靈活性。

與以前的編輯器（也稱為 TinyMCE 編輯器）相比，Gutenberg 提供的最大優勢是它無需了解如何編碼，也無需了解 WordPress 結構以了解如何為您的 WordPress 網站或 WooCommerce 添加更多功能店鋪。 但是，如果您對舊版 WordPress 編輯器更滿意，您可以隨時安裝這個免費插件，稱為 WordPress 貢獻者的經典編輯器，它為您提供完全禁用 Gutenberg 的選項，或在舊版編輯器和 Gutenberg 之間來回切換. Gutenberg 還提供了一個 Classic Editor 塊，供用戶使用 Gutenberg 中的經典編輯器功能！ 聽起來好得令人難以置信？ 讓我們深入了解這篇文章，或者更確切地說是為您的 WooCommerce 商店使用 Gutenberg 塊的指南！

可以通過任何 WordPress 頁面訪問古騰堡塊。 當您在 WordPress 中添加新頁面或編輯現有頁面時，當您將鼠標懸停在屏幕左上角的內容區域時，您會看到一個“+”符號。

using Gutenberg blocks for your WooCommerce store - Add Block

Gutenberg 為不同的用途提供了不同類型的塊：

using Gutenberg blocks for your WooCommerce store - Gutenberg Blocks

雖然這些塊可用於構建各種頁面，但作為 WooCommerce 管理員或商店經理，您可能希望最關注主頁或商店頁面。 因此，出於本教程的目的，讓我們為您的商店創建一個旨在提高銷售額的主頁！ 為此，我們將最多使用WooCommerce 塊。 這些塊是 Automattic 功能插件的早期部分，並被合併到 WooCommerce 3.5 版中。

WooCommerce 塊包含主要與在您的頁面上顯示產品相關的不同功能或“塊”，您可以使用它們來建立您的商店。 以下是 WooCommerce 塊下可用的塊列表：

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

讓我們從在主頁頂部添加特色產品開始。 這可以是您想向用戶/觀眾強調的任何產品。

using Gutenberg blocks for your WooCommerce store - Featured Product

我們添加了一個名為“商店會員”的產品。 一旦添加了產品，它的圖像、描述和價格就會顯示出來。 您可以使用右側邊欄上的選項選擇隱藏這些。 還添加了“立即購買”按鈕； 顏色、文本和它指向的 URL 都是可編輯的屬性。

using Gutenberg blocks for your WooCommerce store - Featured Product Added

疊加顏色是一個有趣的功能，可讓您設置在這種情況下您選擇作為特色產品的產品圖像的顏色和不透明度：

using Gutenberg blocks for your WooCommerce store - Add Overlay to Featured Product

您還可以向此圖像添加 CSS 類。 同樣，也可以編輯立即購買按鈕：

using Gutenberg blocks for your WooCommerce store - Editing the Shop Now button

接下來，讓我們添加一些商店的新到貨和暢銷書，以便新訪客和回訪者都可以從該頁面中獲得一些東西。

為此，我們將首先在 Common Blocks 下添加一個名為 Heading 的塊：

using Gutenberg blocks for your WooCommerce store - Add Heading Block

一旦添加了適當的標題，例如“新品”，我們就可以繼續添加相應的塊。 出於我們的目的，我們將使用 WooCommerce 塊，稱為Best Selling Products和Newest Products 。 這些塊可以再次在 WooCommerce 塊下找到。 讓我們添加最新產品塊。

using Gutenberg blocks for your WooCommerce store - Best Selling and Newest Products blocks
最暢銷和最新產品塊都可以在 WooCommerce 塊下找到。

using Gutenberg blocks for your WooCommerce store - Adding Newest Products

您可以看到最新產品塊從您的 WooCommerce 商店中提取最近添加的產品。 您可以通過設置要顯示的行數和列數來選擇為此塊顯示任意數量的產品，也可以使用右側欄上的選項按類別過濾產品：

using Gutenberg blocks for your WooCommerce store - Options for the Newest Products block

通過這種方式，我們在新品的特色產品行之後添加了另一行：

using Gutenberg blocks for your WooCommerce store - New Arrivals added

接下來，讓我們以類似的方式添加 Best Selling 產品（在為其添加 Heading 塊之後）：

using Gutenberg blocks for your WooCommerce store - Adding Best Selling products

現在我們已經為新訪客和重複訪客創建了這些行，讓我們還添加一行顯示正在銷售的產品以吸引更多銷售。 我們將再次使用 WooCommerce 塊下的On Sale塊來執行此操作（在使用 Heading 塊添加標題之後）：

using Gutenberg blocks for your WooCommerce store - Adding On Sale products

您可以根據您的要求在 WooCommerce 塊下添加更多塊。 現在讓我們將所有產品添加到 Shop 頁面。 為此，您可以選擇按類別劃分的產品塊。

using Gutenberg blocks for your WooCommerce store - Adding products by category

很多時候，您還會在最常用的塊類別下找到所有這些塊，但出於本教程的目的，我們從分配給它們的類別中選擇了這些塊。 您可以將所有標題鏈接到各自的頁面，例如銷售頁面、暢銷書頁面等，以便客戶查看該部分的完整產品列表。

在我們的商店/主頁上，我們可以添加一個顯示“瀏覽商店”的按鈕，該按鈕將鏈接到商店頁面。

要添加按鈕，我們必須從 Layout Elements 塊中進行選擇。

using Gutenberg blocks for your WooCommerce store - Choosing a button element

using Gutenberg blocks for your WooCommerce store - Adding and editing a button

我們將把這個按鈕鏈接到 Shop 頁面。

同樣，您可以在我們創建的所有其他塊下方創建按鈕，例如“Best Sellers”塊、“On Sale”塊等，並為所有這些塊創建單獨的頁面，並將按鈕鏈接到各自的頁面。

為了為不同類型的產品（暢銷產品或銷售產品）創建單獨的頁面，您可以使用將在相應頁面上顯示這些特定類型產品的短代碼。 在這篇文章中，我們討論瞭如何使用各種簡碼在主頁（或任何頁面）上顯示不同類別的產品。

這就是我們頁面最終的樣子：

using Gutenberg blocks for your WooCommerce store - Final Shop page

現在，只需單擊自定義（在前端，在預覽您的頁面時）將其設置為您的首頁，您就可以開始了！ 這就是使用 Gutenberg 為您的 WooCommerce 商店創建有吸引力的首頁是多麼容易。 探索和試驗古騰堡必須提供的各種塊，以最大限度地利用其功能！