WooCommerce區塊：為您的WordPress網站新增電商功能

WooCommerce Blocks 可幫助您建立自定義商店頁面、展示產品並新增過濾和搜尋等高階電子商務功能，而這一切都無需編寫任何程式碼。

預設情況下，WooCommerce 會隨附許多區塊，但有幾種新的區塊並不隨附。您可以通過安裝 WordPress 外掛 WooCommerce Blocks 在您的 WooCommerce 商店中使用這些新區塊。該外掛是 WooCommerce Blocks 核心模組的實驗性產品和潛在未來新增功能的試驗場。

本實踐指南將指導您使用 WooCommerce 區塊為 WordPress 網站新增電子商務功能。

前提條件

要學習本指南，請確保您已：

• 在 WordPress 儀表板中安裝並啟用了 WooCommerce
• 熟悉 WordPress

建立網站後，為您的 WooCommerce 商店匯入這些示例產品。

探索 WooCommerce 區塊

WordPress 5.0 版引入的預設區塊編輯器是 Gutenberg 編輯器。它以基於區塊的系統取代了傳統的編輯器，讓使用者無需大量前端編碼知識即可構建和定製具有視覺吸引力的內容。

WooCommerce Blocks 與 Gutenberg 編輯器的直觀拖放介面無縫整合，提供了一套專門用於產品展示、購物車管理、結賬流程等的區塊。

這種整合使您能夠充分利用區塊編輯器的靈活性和簡便性，同時為您的 WordPress 網站量身定製最佳的電子商務效能。

要使用 WooCommerce Block，首先要開啟或建立一個頁面或帖子。點選頂部欄上的 + 按鈕檢視所有區塊，然後導航到 WOOCOMMERCE 部分。以下是不同區塊的簡要概述：

• Product Search — 新增一個搜尋欄，方便客戶快速搜尋產品。
• All Products — 在網格中顯示所有商店產品。
• All Reviews — 列出所有產品評論。
• Classic Checkout — 顯示經典結賬簡碼。
• Classic Cart — 顯示經典購物車簡碼。
• Customer Account — 啟用客戶登入和登出功能。
• Featured Category — 突出顯示產品類別和行動號召 (CTA)，以鼓勵快速響應。
• Featured Product — 突出顯示產品或變體以及 CTA。
• Active Filters — 顯示當前活動的篩選器。
• Filter by Price — 顯示價格範圍，客戶可使用該範圍篩選產品。
• Filter by Stock — 按庫存狀態過濾產品。
• Filter by Attribute — 根據尺寸或顏色等屬性篩選產品。
• Filter by Rating — 使客戶可以按評級篩選產品。
• Hand-Picked Products — 在網格中顯示精選產品。
• Mini Cart — 提供快速購物車檢視按鈕。
• Store Notices — 顯示由 WooCommerce 或其他擴充套件生成的面向客戶的通知。
• Best Selling Products — 以網格形式顯示商店歷年最暢銷的產品。
• Products Categories List — 以列表或下拉方式顯示所有產品類別。
• Products by Category — 以網格形式顯示所選類別中的產品。
• Product Collection (Beta) — 顯示指定系列中的產品。
• Newest Products — 在網格中顯示最新產品。
• On Sale Products — 在網格中顯示當前特價產品。
• Products by Tag — 在網格中顯示帶有所選標籤的產品。
• Top Rated Products — 在網格中顯示評分最高的產品。
• Products by Attribute — 在網格中顯示具有所選屬性的產品。
• Reviews by Category — 顯示指定類別的產品評論。
• Reviews by Product — 按產品顯示評論。
• Single Product — 顯示單個產品。
• Cart — 顯示購物車。
• Checkout — 顯示讓客戶提交訂單的表單。

現在你知道每個區塊代表什麼了吧。讓我們使用其中一些區塊來建立一個電子商務體驗。

在 WooCommerce 中使用產品網格區塊

產品網格區塊是一種多功能工具，可在 WordPress 網站上以有條理的網格格式展示您商店的產品。以下是新增和自定義產品網格區塊的方法：

1. 導航到您希望展示產品的頁面或帖子。指定一個標題，如 “Products”。

2. 單擊頂部導航欄上的 + 按鈕，顯示所有區塊。向下滾動到 WOOCOMMERCE 部分，然後選擇 “All Products“。此操作將在頁面上以網格佈局顯示您的產品。

3. 使用 All Products WooCommerce Block 在網格中顯示產品。

4. 要配置此區塊，請使用右側的區塊設定面板。點選 “Settings” 圖示（頂部導航欄最右邊第二個圖示）即可進入設定。

設定面板來調整所有產品區塊。

在這裡，您可以調整網格的佈局、內容和樣式：

• 佈局設定：調整行數和列數。例如，將行列數都設定為 2，以獲得平衡的外觀。
• 內容設定：決定是否要為客戶提供排序下拉選單。該功能可讓客戶按照選定的順序對產品進行排序。如果願意，您可以禁用它。
• 高階樣式：如有需要，您可以新增 CSS 類以獲得更復雜的樣式。

4. 完成配置後預覽頁面，確保一切如預期所示。然後，單擊 “Publish” 按鈕。這一步允許你根據自己的偏好公開、私下或使用密碼保護訪問頁面。

更新後的 “Products” 頁面以 2×2 的網格顯示產品，並顯示導航欄。

在頁面或文章中新增精選產品區塊

精選產品（Featured Product）區塊可讓您在頁面或文章中突出顯示產品。您可以選擇一個產品，自定義其顯示設定，然後將其新增到您的內容中，以吸引人們對您想展示的特定產品的關注。

請按照以下步驟新增特色產品區塊：

1. 首先，導航到要展示產品的頁面或文章。想象一下，你正在設計一個產品網格，並希望將特色產品放在頂部。在該位置建立一個空間，你會發現左側有一個 + 按鈕。或者，如果你在想要的位置附近有一個現有的區塊，點選三個豎點，就會彈出一個選單。您可以選擇 “Add before” 或 “Add after“。

在 “所有產品（All Products）” 區塊之前新增 “特色產品（Featured Product）” 區塊。

2. 選擇頂部導航欄上的 + 按鈕，顯示所有區塊並搜尋 “Featured Product“。

使用 Featured Product 區塊選擇產品作為特色產品。

3. 選擇要顯示的產品。然後點選 Done。

4. 要使 Featured Product 區塊具有獨特的外觀和感覺，請單擊 Settings。在區塊設定面板中，您可以

• 決定是否顯示產品描述和價格。
• 配置媒體（圖片和視訊）的顯示方式。
• 指定產品圖片的 alt 文字。
• 選擇區塊覆蓋顏色。
• 調整區塊的不透明度。

調整精選產品區塊設定

5. 完成所有必要的調整後，您就可以釋出頁面了，如果頁面已經上線，也可以進行更新。這樣，您就可以看到區塊的執行情況，確保它看起來就是您想要的樣子。

更新後的產品頁面預覽，在產品網格上方顯示特色小帽產品。

在 WooCommerce 中使用篩選區塊

篩選（Filter）區塊可讓您的客戶根據特定條件完善產品搜尋，幫助他們快速找到符合其偏好或要求的產品。

1. 導航至要新增區塊的頁面或帖子。本指南使用與前面步驟相同的 “Products” 頁面。
2. 選擇要新增篩選器的位置。
3. 點選頂部導航欄的 + 按鈕，顯示所有區塊。向下滾動到 WOOCOMMERCE 部分，檢視價格、庫存、屬性和評級的篩選器選項。例如，選擇 “Filter by Price“。

新增 “Filter by Price” 區塊

選擇該區塊，就可以顯示一個價格範圍欄，讓使用者根據自己想要的價格範圍來篩選頁面上出現的產品。您可以根據自己的需要在右側面板上自定義區塊設定。

新增 “Filter by Price” 區塊

新增 “Filter by Attribute” 區塊

您還可以使用 “Filter by Attribute（按屬性篩選）” 區塊。

選擇產品屬性

您可以選擇 Color 等特定屬性，然後配置相應的設定。例如，可以啟用 “Display product count“，以顯示每種顏色的產品數量。

然後，您就可以檢視實時頁面並測試過濾按鈕的功能。

預覽篩選功能

按照這些步驟，您就可以為客戶提供無縫的購物體驗，讓他們可以根據各種條件輕鬆完善產品搜尋，最終提高他們的滿意度，幫助他們找到想要的產品。

購物車和結賬頁面

您網店的購物車和結賬功能必須直觀且功能齊全，以便使用者能夠順利購物。要確保卓越的客戶體驗，就必須有效地管理購物車中的物品，並促進輕鬆的結賬流程。

WooCommerce 預設使用適當的區塊建立購物車和結賬頁面。客戶可以將產品新增到購物車，並通過導航欄訪問購物車。

購物車頁面

確認購物車內容後，客戶可以選擇 “Proceed to Checkout” 按鈕，填寫必要的詳細資訊，然後下訂單。

結賬頁面

如何建立自定義商店頁面

現在，您已經學會了如何使用某些 WooCommerce 區塊，下一步就是將它們組合起來，用以下去塊建立一個使用者友好的自定義商店頁面：

• Product Search
• Filter by Price
• Product Categories
• Featured Product
• All Products

要建立此自定義商店佈局，請建立新頁面並按照以下步驟操作。

1. 輸入 “Shop” 作為頁面標題。

編輯模式下的商店頁面

2. 使用與之前新增區塊相同的步驟，新增 Product Search 區塊。不要應用任何配置。

新增產品搜尋區塊

3. 新增 Product Categories List 區塊。

新增產品類別列表區塊

在區塊設定頁面，將 “DISPLAY STYLE” 設為 “Dropdown“。

調整產品類別列表區塊設定

4. 接下來，新增 “Filter by Price” 區塊。不要對該區塊進行任何配置。

5. 新增 “Featured Product” 區塊並選擇要顯示的產品。應用與之前的 “Featured Product” 區塊相同的配置。

商店頁面顯示特色產品和特色產品的一些設定。

6. 新增 All Products 區塊。

新增所有產品區塊

在該區塊的設定中，將 COLUMNS 和 ROWS 值設定為 2，並取消選擇 Show Sorting Dropdown。

調整 “All Products” 區塊設定

7. 釋出頁面並檢視結果。

預覽商店頁面

預覽商店產品列表

小結

本指南探討了 WooCommerce 區塊的功能，從新增產品網格和特色產品到實施功能強大的過濾塊。它還概述了購物車和結賬框的重要性，這些都是引導客戶獲得無縫購物體驗的關鍵要素。

將各種 WooCommerce 區塊進行策略性組合，可以實現直觀且具有視覺吸引力的佈局。在這個過程中，需要對區塊進行精心選擇、配置和排列，以滿足特定功能和客戶偏好。