自訂購物車與結帳頁面
購物車與結帳頁面是購物體驗的關鍵部分。WooCommerce 購物車與結帳區塊提供客戶無縫的流程,用於審閱和完成購買,以低摩擦方式最大化轉換率。本文涵蓋與這些頁面相關的模板和區塊,包括升級到新體驗、自訂和設定的詳細資訊,以便其外觀和功能符合商店的設計和需求。
- 模板
- 購物車區塊
- 結帳區塊
- 迷你購物車區塊
使用購物車與結帳區塊
對於 2023 年 11 月發布 8.3 版本後開始的 WooCommerce 商店,購物車與結帳區塊是預設體驗,無需設定即可使用購物車與結帳區塊。如果網站使用區塊主題,可以直接自訂模板以符合需求。區塊購物車和結帳無需自訂即可運作。
替換現有的購物車與結帳短代碼
若要升級已建立的商店以使用區塊體驗,或已移除區塊並想切換回來,請展開下方說明以了解如何升級到區塊購物車和結帳。
替換現有的購物車與結帳短代碼
若要將現有的購物車或結帳短代碼替換為購物車或結帳區塊:
- 點擊 頁面 選單項目,然後找到並編輯 購物車 頁面。
- 刪除產生 購物車 頁面內容的
[woocommerce_cart]或[woocommerce_checkout]短代碼區塊。 - 在區塊插入器中,搜尋 購物車區塊。
- 選擇區塊以將其新增至 購物車 頁面。
- 在 結帳 頁面上使用 結帳 區塊重複這些步驟。
在編輯器中,現在可以在各自的頁面上看到基於區塊的購物車和結帳預覽。可以使用側邊欄中的設定來自訂購物車和結帳區塊及其各自的內部區塊。記得點擊 更新 按鈕以儲存和發布變更。
注意: 將購物車或結帳區塊新增至頁面不會自動將該頁面設定為官方購物車或結帳頁面。將購物車和結帳區塊新增至頁面後,還需要確保在 WooCommerce > 設定 > 進階 下將這些頁面設定為購物車和結帳頁面。
還原為傳統購物車與結帳
購物車和結帳區塊都可以使用區塊工具列中的轉換按鈕轉換回傳統版本。
還原為傳統購物車與結帳
- 若使用區塊主題: 前往 外觀 -> 編輯器 -> 頁面 -> 選擇購物車或結帳 -> 點擊編輯圖示。若使用非區塊主題: 前往 頁面 -> 所有頁面,然後找到並編輯購物車/結帳頁面。
- 開啟列表視圖並選擇購物車或結帳區塊。
- 點擊「轉換」按鈕,位於區塊工具列最左側。
- 選擇「傳統短代碼」。
- 區塊將被轉換為傳統短代碼佔位區塊。
- 點擊頂部欄中的儲存按鈕以儲存變更。
可以使用購物車和結帳區塊的區塊工具列中的轉換選項切換到其傳統對應版本。
注意: 由於購物車和結帳區塊協同運作,若要還原為傳統版本的購物車和結帳體驗,需要將購物車和結帳都還原為傳統短代碼版本。
模板
有兩個模板控制購物車和結帳頁面的顯示:
- 購物車頁面由「頁面: 購物車」模板控制。
- 購物車模板顯示使用者選擇購買的項目,包括數量、價格和折扣。允許使用者在進入結帳前審閱選擇。
- 結帳頁面由「頁面: 結帳」模板控制。
- 結帳模板引導使用者完成購買流程的最後步驟。讓使用者輸入物流和帳單資訊、選擇金流方式並審閱訂單詳細資訊。
透過以下方式存取任一模板:
- 從網站管理區域前往 外觀 > 編輯器,
- 點擊 模板,
- 選擇要編輯的模板,
- 點擊鉛筆圖示以編輯模板。
商店通知區塊
購物車和結帳頁面模板都使用商店通知區塊。商店通知區塊是商店顯示由 WooCommerce 或外掛產生的顧客通知的位置。例如,當項目成功新增至購物車時,通知將顯示在此處。商店通知區塊可以新增至網站的任何頁面或模板。
區塊樣式
由於不同類型的通知各有自己的樣式,此區塊沒有樣式設定。
購物車區塊
在購物車頁面上會看到購物車區塊,允許客戶查看和管理打算購買的項目,提供更新數量和移除商品的選項。連結的指南詳細說明了購物車區塊的組成部分,並提供自訂其版面配置和設定以改善使用者體驗的步驟。
探索自訂購物車區塊的設定和選項。
結帳區塊
在結帳頁面模板上會看到結帳區塊,這是客戶輸入物流和金流資訊以完成購買的地方。以下文件概述了結帳區塊的元素,並提供如何自訂其設定以簡化結帳流程並滿足特定需求的指導。
探索自訂結帳區塊的設定和選項。
迷你購物車區塊
迷你購物車區塊讓客戶從商店的任何頁面快速查看購物車內容。以下指南說明了迷你購物車區塊的功能,並提供自訂其外觀和行為的說明,以確保流暢便捷的購物體驗。
探索自訂迷你購物車區塊的設定和選項。
購物車與結帳模板部件
購物車和結帳流程使用 WooCommerce 隨附的幾個模板部件。深入了解模板部件。
結帳頁首
在結帳頁面模板上,會注意到預設情況下不使用網站其餘部分顯示的相同頁首,而是顯示僅顯示網站標題的簡化頁首。這樣做的目的是減少結帳頁面和金流流程的干擾,是一項可增加購物車轉換率並減少放棄購物車的最佳化。
當然,可以根據喜好自訂此頁首,甚至將其替換為網站其餘部分使用的相同頁首。但建議使用不包含連結離開結帳流程的簡單頁首。
迷你購物車抽屜模板部件
迷你購物車區塊使用模板部件來顯示迷你購物車的內容。查看迷你購物車頁面以獲取有關存取和編輯該模板部件的更多詳細資訊。
相容外掛
WooCommerce.com 上外掛與購物車和結帳區塊的相容性在商品頁面上標示。查看任何商品上的 相容性 部分,以查看它是否與購物車和結帳區塊相容。
不相容外掛
若使用已聲明不相容的外掛,當選擇結帳區塊或其任何內部區塊時,設定側邊欄中將顯示警告和一鍵切換到傳統結帳的按鈕。
不相容的外掛可能導致結帳的元素無法如預期使用。例如,若金流不相容區塊版本的結帳,可能不會在結帳頁面上顯示為金流選項。
當啟用不相容外掛時,會顯示還原為傳統結帳的選項。
若使用的外掛無法如預期與購物車和結帳區塊一起使用,請聯繫其開發人員,讓他們知道希望使用新的基於區塊的結帳。為協助開發人員進行此工作,我們發布了有關將現有外掛與購物車/結帳區塊和 Store API 整合的文件和資源。
若有認為不相容的第三方外掛,可以聯繫外掛開發人員,並向他們推薦我們關於聲明與此新預設值相容性的指南。外掛開發人員應將其外掛標記為(不)相容,以便使用者不必自行疑難排解。
查看我們的使用區塊入門以獲取有關在遇到任何不相容問題時切換回傳統模板的更多資訊。
為什麼客戶在結帳時看到「沒有可用的金流方式」?
若使用結帳區塊,且只安裝並啟用了不相容的金流,結帳時將沒有可用的金流方式,因此結帳頁面上會顯示警告。
在結帳區塊的 金流選項 內部區塊的區塊設定側邊欄中,會看到一鍵切換回傳統結帳的選項。
當沒有可用的金流方式時,可能是因為啟用的金流與區塊結帳不相容。
擴充性 – 開發人員
購物車和結帳區塊的擴充性介面仍在積極開發中。若正在開發與 WooCommerce 購物車和結帳整合的外掛或自訂,強烈建議關注我們的進度並在 GitHub 上提供回饋。
使用掛鉤在購物車或結帳頁面中呈現額外標記的外掛,例如自訂結帳欄位,通常需要整合工作才能支援購物車和結帳區塊。
在 WooCommerce.com 上發現似乎不相容的外掛?請開啟問題以協助我們衡量需求並優先處理擴充性工作。