找我們做網站
↑
Woocommerce · WooCommerce 教學

WooCommerce 區塊結帳頁面設定教學:欄位、付款與運送一次搞定

WooCommerce 教學發布 2026.10.08閱讀約 5 分鐘
WooCommerce 區塊結帳頁面設定教學:欄位、付款與運送一次搞定

重點整理
WooCommerce 8.3 之後新安裝的商店,結帳頁預設改用「區塊結帳」(Checkout Block)。欄位要不要顯示、是否必填,直接在結帳頁的編輯畫面點選區塊就能設定;付款方式與運費則在「WooCommerce → 設定」調整。這篇用一間示範商店,從後台設定一路做到前台結帳畫面。

結帳頁是購物網站最關鍵的一頁:欄位太多,顧客會放棄;運費或付款方式沒設好,訂單就收不到錢。新版 WooCommerce 的結帳頁改成區塊,設定位置跟舊版不一樣,很多人找不到「電話怎麼改成必填」「公司欄位怎麼拿掉」。這篇一步一步說明區塊結帳的四個設定重點,最後也整理什麼情況該改回傳統結帳。

區塊結帳是什麼?跟傳統結帳差在哪

傳統結帳頁是用短代碼 [woocommerce_checkout] 產生,欄位要靠外掛或程式碼調整(例如我們介紹過的 Checkout Field Editor 外掛)。區塊結帳則把每個段落做成獨立區塊,在編輯器裡就能直接看到、直接調整:

  • 欄位設定不用寫程式:公司、地址第二行、電話可以設成隱藏、選填或必填。
  • 手機版體驗較好:版面、按鈕與錯誤提示都依行動裝置重新設計。
  • 所見即所得:編輯畫面看到的就是顧客看到的結帳頁。

步驟一:先確認結帳頁用的是哪一種

到後台「頁面」,打開「結帳」(Checkout)頁面。如果編輯畫面直接顯示聯絡資訊、運送地址、訂單摘要等表單,就是區塊結帳;如果只看到一段 [woocommerce_checkout] 文字,就是傳統結帳。

在頁面編輯器打開結帳頁,區塊結帳會直接顯示完整的結帳表單
在頁面編輯器打開結帳頁,區塊結帳會直接顯示完整的結帳表單

步驟二:設定結帳欄位(公司、地址第二行、電話)

在編輯畫面中,點一下「運送地址」這個區塊,右側切到「區塊」分頁,就會出現「地址欄位」設定:

  • 公司:一般消費者不需要,建議關閉;B2B 商店才打開。
  • 地址第 2 行:台灣地址通常一行就能寫完,可以關閉,讓表單更短。
  • 聯絡電話:宅配與超商取貨都需要聯絡電話,建議改成「必填」。
點選「運送地址」區塊,右側可以設定公司、地址第二行與電話為隱藏、選填或必填
點選「運送地址」區塊,右側可以設定公司、地址第二行與電話為隱藏、選填或必填

調整完記得按右上角「儲存」。電子郵件欄位是建立訂單必要的資料,固定為必填,無法隱藏。

步驟三:設定付款方式

到「WooCommerce → 設定 → 付款」。線上刷卡需要另外安裝金流外掛;如果先要能收單,可以開啟「收取離線付款」裡的貨到付款與銀行轉帳,並在說明欄寫清楚付款期限,例如「下單後請於 3 天內匯款,備註訂單編號」。

WooCommerce 付款設定頁,可安裝金流外掛或開啟貨到付款、銀行轉帳等離線付款
WooCommerce 付款設定頁,可安裝金流外掛或開啟貨到付款、銀行轉帳等離線付款

台灣常用的綠界、藍新等金流該怎麼選,可以參考WooCommerce 金流外掛比較。

步驟四:設定運送區域與運費

到「WooCommerce → 設定 → 運送方式」,按「新增區域」,區域名稱填「台灣本島」、地區選「台灣」,再加入運送方式。示範商店設定了兩種:宅配固定運費 100 元,以及滿 1,500 元免運。

運送區域設定:台灣本島區域加入宅配與滿額免運兩種運送方式
運送區域設定:台灣本島區域加入宅配與滿額免運兩種運送方式

超商取貨、黑貓宅配這類需要串接物流商的方式,請參考WooCommerce 物流外掛全攻略;免運門檻的進階條件則可以看免運費設定教學。

步驟五:到前台實際走一次結帳

所有設定完成後,用一般顧客的角度實際下一次單:把商品加入購物車、進到結帳頁,確認欄位、運費和付款方式都正確。下圖是示範商店的結帳頁,右側訂單摘要已經自動算出宅配運費 100 元。

前台結帳頁:左側填寫聯絡資訊與運送地址,右側訂單摘要自動計算運費與總計
前台結帳頁:左側填寫聯絡資訊與運送地址,右側訂單摘要自動計算運費與總計

正式開賣前,建議用「貨到付款」或金流的測試模式完整跑一次,確認顧客與管理員都有收到訂單通知信。

什麼情況要改回傳統結帳?

區塊結帳是 WooCommerce 未來的方向,但有些外掛還沒有支援。安裝金流、物流或發票外掛之前,先看外掛說明有沒有寫支援「Checkout Block」或「區塊結帳」。如果外掛只支援傳統結帳,可以在結帳頁刪除結帳區塊,改放「傳統短代碼」區塊(內容是 [woocommerce_checkout]),結帳頁就會回到舊版,外掛也能正常運作。

常見問題

為什麼找不到「結帳欄位」的設定?

欄位設定不在 WooCommerce 的設定頁,而是在結帳頁的編輯畫面裡。要先點選「運送地址」或「帳單地址」區塊,右側的「區塊」分頁才會出現地址欄位選項。

可以新增自訂欄位嗎?例如統一編號?

區塊結帳目前在介面上只能調整內建欄位。統一編號這類自訂欄位,需要使用支援區塊結帳的外掛,或透過 WooCommerce 提供的程式介面加入。台灣的電子發票外掛多半會自行加入統一編號與載具欄位。

改了設定,前台結帳頁沒有變?

先確認編輯器有按「儲存」,再清除快取外掛或主機的頁面快取。結帳頁本身不應被快取,若持續看到舊版面,請檢查快取外掛是否排除了結帳與購物車頁面。

結語

區塊結帳把過去要靠外掛或程式碼才能做的欄位調整,變成在編輯器裡點選就能完成。設定時依照四個步驟:確認結帳頁類型、精簡欄位、開啟付款方式、設定運送區域,最後到前台實際下單一次。如果要串接的金流或物流外掛還不支援區塊結帳,再改回傳統短代碼即可。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。