在 WooCommerce 中使用區塊

WooCommerce 包含許多區塊,您可以將其插入文章、頁面和網站編輯器模式和範本中,以客製化您的目錄、推廣您的商品,並為購物者提供出色的結帳體驗。

在本指南中,我們涵蓋區塊如何運作的基礎知識、在哪裡找到它們的設定,以及如果遇到任何問題如何恢復到傳統範本。

需求

要充分利用 WooCommerce 內建的網站編輯功能,您需要使用區塊主題。在沒有區塊主題的情況下仍然可以使用區塊 — 但是,您只能在文章和頁面上使用區塊,並且無法存取網站編輯器來客製化您的商店範本。

一如既往,為了充分利用最新的 WooCommerce 功能(包括區塊),我們強烈建議將 WordPress 和 WooCommerce 更新到最新的穩定版本。

區塊主題

區塊主題是由可在網站編輯器中客製化的範本組成的主題。這意味著不僅文章或頁面內容是由區塊組成的,網站的所有區域都是由區塊組成的,包括頁首、頁尾、側邊欄和其他元素。要利用 WooCommerce 中的所有商店編輯功能,您的網站需要使用區塊主題。

在哪裡可以找到區塊主題?

要探索可用的區塊主題:

1. 從您的 WP 管理儀表板導覽至外觀 > 主題。
2. 點擊「新增主題」。
3. 點擊「區塊主題」選項。

所有顯示的主題都可以透過網站編輯器編輯,因此您可以利用 WooCommerce 中的商店編輯功能。

要客製化區塊主題,您需要先啟用它。如果您擔心這樣做,我們建議您先設定一個測試網站來探索主題。

區塊

區塊是組成您的網站和商店的內容元素。您新增到文章或頁面的每個項目都是一個區塊。您可以為每個段落、圖片、影片、圖庫、音訊、清單等新增區塊。

您可以透過編輯器將區塊新增到您的頁面和範本。

區塊的結構

每個區塊在區塊工具列和區塊設定側邊欄中都有選項。區塊的內容顯示在編輯器的中心。根據區塊的目的,區塊工具列和區塊設定側邊欄上的選項會有所變化。許多 WooCommerce 區塊使用動態內容來符合目前內容(例如顯示每個客戶目前購物車中的內容);在編輯器中,這些動態區塊將顯示範例內容。

在編輯器中新增區塊

有多種方法可以在整個頁面中插入區塊。

• 在頁面左上角,您會注意到一個工具列,帶有一個方形 + 圖示。點擊此圖示會開啟區塊插入器。它將允許您搜尋區塊並插入它們。它還會顯示每個區塊的其他資訊和小型預覽。
• 在編輯器欄位中,當您點擊已有區塊的上方、之間或下方時,您會看到一個區塊插入器選項,也帶有 + 圖示。

新增區塊

專業提示: 新增區塊的快捷技巧是輸入「/」和您要插入的區塊名稱。這稱為斜線命令。

搜尋區塊

您可以使用以下方式搜尋區塊:

• 區塊插入器 – 在插入器的搜尋欄位中輸入區塊名稱或關鍵字的開頭,例如「image」或「heading」。
• 斜線命令 – 開始輸入區塊名稱或關鍵字的開頭,自動建議的搜尋結果將會出現。

搜尋區塊

區塊內容

搜尋時找不到區塊? 區塊可以限制為僅在某些內容(範本、區域、內部區塊)中可用或插入,開發人員可以限制某些區域中可用的區塊。以下是一些範例:

• 某些區塊只能在某些內容中新增(例如「購物車交叉銷售」區塊只能在購物車區塊的「購物車項目」部分內新增)
• 某些內容將限制可在其中新增的區塊(例如在購物車區塊的「購物車總計」部分內,只有_段落_、圖片、分隔線_和「_接受的付款方式」區塊可以新增)
• 某些區塊在每個範本或區域中只能新增一次(例如「接受的付款方式」區塊只能在購物車區塊的「購物車總計」部分中新增一次)

這些限制允許為特定實作建立區塊的開發人員確保他們的區塊不會插入到會破壞區塊和您商店功能的內容中。

刪除區塊

如果您想從頁面或範本中移除區塊,您有幾個選項。要移除區塊:

1. 選擇區塊。
2. 點擊區塊工具列或清單檢視中的三點圖示。
3. 點擊「刪除」選項。

使用區塊工具列的三點選單中的選項移除區塊

另一種刪除區塊的方法是選擇區塊並按鍵盤快捷鍵。(在 Mac 上為 Control + Option + Z,在 Windows 上為 Shift + Alt + Z。)選擇某些區塊後,可以透過按鍵盤上的「delete」或「backspace」按鈕刪除它們。

某些範本包含佔位符區塊,指示發布變更後商店的實際內容將在哪裡出現。我們建議您在未測試以確保您了解影響的情況下不要從範本中刪除佔位符區塊,以避免意外錯誤或商店上缺少資訊。

如何客製化區塊

要客製化區塊,首先選擇要客製化的區塊。透過點擊內容區域中的區塊,或使用清單檢視找到特定區塊並在清單中選擇它來選擇區塊。

然後,您可以在兩個地方存取區塊的客製化選項:區塊_工具列_和區塊設定

區塊工具列

點擊區塊時,區塊的工具列將出現在其上方或下方。工具列包含處理該區塊的基本選項。

選擇的購物車區塊,其區塊工具列在上方。

將滑鼠懸停在區塊工具列中的圖示上,以顯示說明每個圖示作用的工具提示:

全域區塊工具列選項

某些選項將在大多數區塊的工具列中顯示。這些說明如下:

• 轉換:將區塊變更為類似的區塊類型。例如,如果您想將購物車區塊變更為傳統版本的購物車,點擊此圖示將為您提供選項。
• 拖曳:點擊並按住看起來像六個點的圖示,將區塊拖曳到頁面的另一個部分。
• 向上/向下移動:點擊向上或向下箭頭,在頁面上向上/向下移動區塊一個位置。
• 對齊:變更區塊的位置。如果可用,您通常會找到左對齊、右對齊和置中對齊,以及如果您的主題支援的話,還有寬對齊和全寬對齊。
• 更多選項: 工具列末端的三個垂直點會開啟一個包含其他動作的選單:
  • 複製:將區塊的副本複製到剪貼簿,然後您可以在其他地方貼上。
  • 重複:直接在原始區塊下方建立區塊的副本。
  • 在之前新增:在目前區塊上方建立一個空間以新增新區塊。
  • 在之後新增:在目前區塊下方建立一個空間以新增新區塊。
  • 複製樣式:複製區塊上使用的樣式。
  • 貼上樣式: 複製區塊的樣式後,將這些樣式貼上到選定的區塊上。
  • 群組/取消群組: 使用此選項,您可以將多個區塊群組在一起 – 對於將顏色和內距套用到一組區塊很有用。
  • 鎖定:停用移動和/或刪除區塊的選項。閱讀更多關於鎖定區塊的資訊
  • 建立模式:儲存帶有您的客製化的區塊,以便您可以將其新增到整個網站的其他區域。閱讀更多關於區塊模式
  • 重新命名: 為區塊指定新名稱,如清單檢視中所示。
  • 移動到: 點擊此選項,然後點擊頁面的另一個部分,將區塊移動到頁面的該部分。
  • 編輯為 HTML:以 HTML 編輯區塊內容。
  • 刪除:從您的頁面移除目前的區塊。

並非所有這些設定都適用於每個區塊。例如,如果區塊被鎖定,您將看不到刪除它的選項,並且可能看不到移動它的選項。

區塊特定工具列選項

每個區塊還將具有特定於該區塊的自己的工具列選項。例如,圖片區塊工具列包含新增連結、裁剪圖片等設定:

區塊特定區塊工具列選項的範例。

選擇父區塊

當您選擇了巢狀在另一個區塊內的區塊時,區塊工具列將有一個額外的、單獨的按鈕浮動在其左側。點擊此按鈕將將您的選擇移動到目前區塊的直接父區塊。

區塊設定

區塊設定側邊欄包含您正在處理的區塊的更多客製化選項。每個區塊都有自己的設定,您可以在設定側邊欄中找到:

編輯器中的區塊設定面板。

如果您看不到側邊欄,請點擊編輯器右上角儲存按鈕旁邊的設定圖示。此圖示看起來像一個有兩個不均勻欄的方形:

請注意,在展開的側邊欄頂部,有兩個分頁。要查看目前選定區塊的設定,請確保您正在查看「區塊」分頁。可用選項會因區塊而異,某些區塊在側邊欄中沒有要變更的設定。

鎖定區塊

鎖定區塊是區塊編輯器的一項功能,允許開發人員或網站管理員限制特定區塊上的某些動作。鎖定區塊在完整網站編輯(FSE)以及建立自訂區塊模式或範本時特別有用。

建立自己的佈局時,您可以在編輯器中鎖定區塊,以防止它們被移動或刪除。鎖定區塊時,您還可以透過區塊工具列中「更多選項」三點選單解鎖它。

開發人員也可以鎖定區塊以保護範本的佈局、內容和功能。幾個 WooCommerce 範本使用鎖定區塊來防止內容因移出必要內容而被破壞,以及確保某些元素保持按預期順序或位置。通常,當區塊預設被這樣鎖定時,無法解鎖。

例如,結帳區塊中的大多數結帳欄位都被鎖定,以維持高轉換率的佈局,這是我們研究和測試的結果。這些鎖定的區塊在清單檢視中顯示鎖定圖示,以及在選擇時在區塊工具列中顯示鎖定圖示。

什麼是「內部區塊」?

當您查看清單檢視時,您可能會注意到某些區塊巢狀在其他區塊內。我們將這些巢狀區塊稱為內部區塊。移動或移除具有內部區塊的區塊也會移動或移除其所有內部區塊。

WooCommerce 區塊

WooCommerce 引入了許多區塊,您可以使用它們來展示您的目錄、以不同方式推廣您的商品,並為購物者提供出色的結帳體驗。

使用以下指南了解如何使用 WooCommerce 區塊客製化您的商店:

• 目錄頁面,包括您的商店頁面
• 商品頁面
• 購物車和結帳頁面
• 訂單確認頁面

使用傳統範本:佔位符區塊和短代碼

WooCommerce 區塊功能齊全,大多數擴充功能目前完全支援基於區塊的體驗。但是,在使用 WooCommerce 區塊時,您商店上執行的擴充功能可能無法按預期運作。為了向後相容,傳統的 WooCommerce 範本以及購物車 + 結帳短代碼繼續在 WooCommerce 中可用,適用於已客製化結帳流程需要它們的現有商店,以及任何具有尚未透過區塊範本實現的特定需求的新商店。

如果您使用區塊主題,但您的商店在傳統範本上有客製化,或使用尚未與商店編輯和新區塊範本相容的擴充功能,在這些情況下,您可以透過將現代區塊交換為傳統區塊來恢復到區塊編輯器中的傳統範本。

這些傳統區塊充當佔位符以顯示舊版範本,因此無法在區塊編輯器中客製化,但使舊版範本能夠在區塊主題上顯示。

我們在網站編輯器中為這些範本包含了快速交換選項,以便您可以在需要時快速恢復。

恢復到傳統購物車和結帳

購物車和結帳都可以使用區塊工具列中的轉換按鈕將其區塊轉換回傳統版本。以下是如何執行此操作:

1. 使用區塊主題:前往外觀 -> 編輯器 -> 頁面 -> 選擇購物車或結帳 -> 點擊_編輯圖示_
   使用非區塊主題:前往頁面 -> 所有頁面,然後找到並編輯購物車/結帳頁面。
2. 開啟清單檢視並選擇購物車或結帳區塊。
   如果您安裝了不相容的擴充功能,將顯示通知,您可以一鍵恢復。
3. 點擊轉換按鈕,這是區塊工具列中最左邊的按鈕
4. 選擇「傳統短代碼」。
5. 區塊將轉換為傳統短代碼佔位符區塊。
6. 透過點擊頂部列中的更新按鈕儲存您的變更。

您可以使用購物車和結帳區塊的區塊工具列中的轉換選項切換到它們的傳統對應項。

恢復到其他傳統範本:

要將新區塊範本交換為其傳統版本,您有兩個選項:

• 建議: 查看您想恢復的範本時,在設定側邊欄的「範本」分頁中,點擊「恢復到傳統範本」按鈕。此選項在以下範本上可用:
  • 商品目錄範本
  • 單一商品範本
  • 訂單確認範本
  • 商品搜尋結果範本

在某些 WooCommerce 範本上,設定側邊欄的「範本」分頁中會出現通知 – 帶有恢復到傳統範本的選項。

• 或者,您可以手動從範本中刪除新區塊,並新增下表中列出的傳統對應項到範本。