結帳區塊
結帳區塊是簡化、轉換最佳化結帳流程的一部分。客戶透過輸入購物和金流資訊在此處完成購買。
本頁提供結帳區塊結構、設定和自訂選項的概述,以控制商店的品牌識別,並為客戶創造具有視覺吸引力的結帳旅程。
- 結帳區塊結構
- 結帳區塊設定
- 結帳欄位
- 結帳總計
- 本地取貨配送選項
注意: 可以將結帳區塊新增至任何頁面,但為確保所有功能正常運作,需要先在商店的進階設定中透過 WooCommerce > 設定 > 進階 指定選擇的結帳頁面。
結帳區塊結構
結帳區塊包含兩個主要內部區塊:結帳欄位和結帳總計,這是結帳體驗的兩個關鍵組成部分。使用列表視圖查看這些區塊如何組合在一起。
構成結帳區塊的許多內部區塊完全動態,並根據 WooCommerce 中其他設定的設定方式運作。例如,金流選項區塊顯示所有符合以下條件的金流方式:
- 在商店中可用,並且
- 根據金流設定中的設定與結帳區塊相容。
這些內部區塊在區塊編輯器中沒有可設定的設定,未列在本文件中。可以使用列表視圖點擊它們,在設定側邊欄中查看每個內部區塊的描述。
在可能的情況下,在設定側邊欄中,這些區塊將指向 WooCommerce 中的相關設定,以便進行設定。
金流選項內部區塊的設定側邊欄中有管理金流方式的連結。
結帳區塊設定
結帳區塊只有一個透過區塊設定側邊欄設定的設定:深色模式輸入。切換此設定以適當設定具有深色背景的頁面和部分的結帳表單欄位和其他輸入的樣式。
結帳欄位區塊
結帳欄位 區塊包含客戶輸入資訊以完成購買的欄位。包含每個欄位的內部區塊,這些內部區塊大多數是動態的。其行為基於:
- 當前客戶的訂單,以及
- WooCommerce 設定的設定方式。
結帳欄位區塊是嵌套在主結帳區塊內的第一個區塊,包含以下設定,這些設定與物流和帳單地址區塊共享。在一個區塊中更改這些設定也會在其他區塊中更改它們。
- 表單步驟選項: 切換此設定以在部分標題中新增數字並創造引導式結帳流程。
- 地址欄位: 使用此設定切換公司、地址行 2 和電話欄位的可見性。還可以設定完成結帳是否需要地址和電話欄位。
其他區塊嵌套在結帳欄位區塊內,所有這些區塊都可以透過列表視圖重新定位或重新命名。有些包含其他設定,概述如下。
快速結帳
快速結帳區塊僅在支援快速結帳的金流(WooPay、ApplePay、Google Pay 等)處於啟用狀態時顯示內容。此區塊沒有其他設定。若要啟用快速結帳方式,建議使用 WooPayments(若在所在地區可用)。
配送區塊
配送區塊是客戶可以選擇將訂單配送或本地取貨的地方。在設定側邊欄中包含自訂其外觀的選項。
此區塊和 取貨方式 區塊只有在以下情況下才會顯示:
- 透過 WooCommerce > 設定 > 物流 > 本地取貨 啟用了區塊版本的本地取貨。
- 正在編輯的結帳頁面透過 WooCommerce > 設定 > 進階 指定為結帳頁面。
外觀
- 顯示圖示: 在配送選項旁顯示圖示以視覺化區分它們。
- 顯示成本: 在每個選項旁包含配送成本,為客戶提供透明的定價資訊。
物流地址
此區塊中的設定與結帳欄位區塊中的設定相同。這些設定是連結的,意味著在一個位置的更改會在另一個位置更改。
條款與條件
條款與條件區塊促進客戶在完成購買前確認商店政策。
- 要求核取方塊: 切換此設定以強制客戶在進行訂單前勾選方塊確認同意條款與條件。
透過指定條款與條件和隱私政策頁面,在區塊內容中自動連結至商店政策。
深入了解頁面設定和隱私政策選項。
動作
動作區塊為客戶在結帳期間提供其他導航選項。
- 導航選項: 切換 顯示返回購物車連結 設定以顯示或隱藏將客戶帶回購物車進行更改的連結。
- 返回購物車按鈕: 當啟用返回購物車連結時,會顯示一個下拉選單,可以選擇連結應將購物者返回哪個頁面。
結帳總計區塊
結帳總計區塊包含顯示訂單摘要、優惠券輸入表單和構成訂單總計的成本清單的內部區塊。除了一個之外,所有這些內部區塊都是鎖定的。這些內部區塊可以從預設位置向上或向下移動,但無法移除。
優惠券表單 是結帳總計部分中唯一未鎖定且可以移除的區塊。
本地取貨配送選項
一旦結帳區塊放置在網站的指定結帳頁面上,本地取貨設定就會變為可用。
WooCommerce 區塊中的本地取貨允許為客戶提供一個或多個取貨地點。啟用此選項(並透過 WooCommerce > 設定 > 物流 > 本地取貨 設定取貨地點)會在網站的結帳區塊中顯示 配送 和 取貨方式 區塊,這是購物者為訂單選擇取貨地點的更簡化方式。
這與先前設定物流區域時可設定的傳統本地取貨選項不同。
查看 WooCommerce 區塊中本地取貨的選項。