選單
WooCommerce結帳頁面設定是電商平台中很重要的功能，它前面承接購物車資料，後面承續客戶訂單付款，本文介紹如何改用1個自訂網頁，方便進行更靈活的設置。
WooCommerce購物車和結帳同樣都是電商網站的特殊功能頁面，因此可以跟購物車頁面一樣，在WordPress控制台前往結帳頁面，點選左上角三個橫線的功能圖標，索引標籤切換到「大綱檢視」，從列出來的清單可以瞭解到所謂的結帳功能是由許多網頁區塊所組成。
另外在最右側可以看到目前是「範本」類型的頁面，網址是「zanzan2.tw/checkout」。
想要自訂一個自己的結帳頁面，有個方法是另外新增一個空白的WordPress頁面，設定它的名稱是「自定結帳頁面」，然後在內容編輯區域輸入一個斜線「/」，表示要插入一個區塊，編輯器會立即跳出一個下拉清單，列出目前常用的區塊類型，在此選擇其中的「短代碼」。
另外同時注意到右側的「連結」中，已經將網址設定為「/custom-checkout」。
在短代碼中輸入「WooCommerce_checkout」，接著這裡為了方便辨別起見，特地加了一行段落文字：「這是自訂結帳頁面」，最後點選右上角的「發佈」按鈕，如此即完成了WordPress新增頁面的操作。
發佈完了之後瀏覽器前往實際網頁，它的網址就是上個步驟所新增的頁面，其內容除了有一行自行輸入的：「這是自訂結帳頁面。」之外，其餘就跟一般WooCommerce外掛的結帳頁面完全相同。
由此瞭解到所謂的短代碼「WooCommerce_checkout」其實就是去引用WooCommerce外觀功能已經設計好的一整個區塊元素組合。
自訂的結帳頁面建立好了之後，還必須要到 WordPress控制台中「WooCommerce」功能中的「設定」頁面，將上方索引標籤切換到「進階」，在這裡可以看到主要幾個功能頁面的設定。
其中的「結帳頁面」預設是先前第一步驟看到的網頁網址，將清單下拉後輸入關鍵字「Check」，找到上個步驟所建立的結帳頁面。
和大部分 WordPress較為複雜的設定一樣，頁面最下方有個「儲存設定」的按鈕。在上個步驟有變更結帳頁面的情況下，記得在這裡將所做的變更儲存起來。
最後測試看看是否更改成功。先到網站購物車頁面挑選好了商品，點選前往「Proceed to Checkout（前往結帳）」，注意到這裡也是自訂的購物車頁面，按鈕文字並沒有特別進行中文化的翻譯。
延續上個步驟操作，進入WooCommerce系統的結帳頁面，上方有一行段落文字：「這是自訂結帳頁面」，表示在目前電商平台正是使用了這篇文章所新增自訂的網頁。
這篇WordPress教學文章做了許多操作，不過從最終結果而言，其實並沒有實質更改網站的結帳頁面，因為這個頁面所實現的功能在WooCommerce外掛中已經設定完善，而且會跟其他的系統功能互相串連，通常不會去做更改，比較有可能的是樣式設定，也就是這篇文章主要介紹的Elementor編輯器。
樣式設計涉及到對於WordPress工具的瞭解程度，如果這部分已經熟悉了，依照本文說明也知道了哪裡可以去進行設定調整，很容易能夠依照自己網站的整體佈局更改，也就是這篇文章範例最終想要提供給讀者參考。
歡迎加入Line社群，口袋裡的Excel小教室！
歡迎參考贊贊小屋架設網站服務：
最新文章：