WooCommerce是一個靈活而強大的外掛，您可以使用它來將您的WordPress網站變成一個動態的電子商務商店。但是，如果您希望減少購物車放棄、推動轉化和增加收入，請務必注意您的WooCommerce結算頁面。
在WooCommerce中有很多不同的方式來設定和編輯結帳頁面。無論您是開始您的第一家線上商店並試圖瞭解此頁面的工作原理，還是您想增強現有WooCommerce網站上的結算體驗，我們都能滿足您的需求。
在這篇文章中，我們將解釋WooCommerce結算頁面是什麼以及它的功能。然後，我們將引導您瞭解使用外掛、程式碼、主題等來優化轉化所需的樣式、更改和利用它的許多選項。
- WooCommerce結算頁面概述
- 為什麼您可能想要更改您的WooCommerce結算頁面
- 可用於更改WooCommerce結算頁面的方法
- 如何自定義WooCommerce結算欄位
- 如何更改WooCommerce結算頁面模板
- 如何建立單頁WooCommerce結算
- 如何在WooCommerce結算過程中觸發免費送貨
- 如何將產品直接連結到WooCommerce結算頁面
- 如何測試您的WooCommerce結算頁面
- 最好的WooCommerce Checkout外掛和擴充套件
WooCommerce結算頁面概述
當您第一次設定WooCommerce商店時，該外掛會自動建立並分配一個結帳頁面。如果您在網站的前端預覽它，您會發現它相當簡單：
預設的WooCommerce結算頁面
預設情況下，WooCommerce會要求客戶提供一些基本資訊。這包括：
- 結算明細
- 名字和姓氏
- 公司名
- 地址（城鎮/城市、國家、地區和郵政編碼/郵政編碼）
- 電話號碼
- 電子郵件地址
- 訂單備註
- 隱私政策宣告
這是包含在WooCommerce結算頁面上的重要資訊。它提供了客戶完成購買以及網站處理其付款資訊所需的詳細資訊。
但是，這裡沒有任何東西必然有助於提高轉化率或減少結算放棄。此外，預設頁面可能無法為您的特定業務提供最相關或最有用的資訊。因此，像許多WooCommerce網站所有者一樣，您可能希望更改結帳頁面的設計和內容。
在我們進入您可以在WooCommerce中自定義結算頁面的不同方式之前，首先要了解一些事情。
讓我們談談在哪裡可以找到此頁面，以及WooCommerce外掛中可用的各種預設設定和功能。
在哪裡可以找到預設的WooCommerce結算頁面和設定
啟用外掛後，WooCommerce會自動為您的商店建立結算頁面。您可以通過在管理儀表盤中導航到Pages > Checkout來找到它：
WooCommerce中的結算頁面
您可以像編輯任何WordPress內容一樣編輯此頁面。例如，您可以更改頁面的標題和固定連結、新增特色圖片、修改頁面屬性等。它還使用[woocommerce_checkout] 短程式碼：
WordPress中的WooCommerce結算頁面短程式碼
有一些標準選項可用於配置此頁面，其中一些您可以在WooCommerce > Settings > Advanced下找到：
WooCommerce設定中的“Advanced”選項卡
在此螢幕上的Page Setup部分下，您可以選擇不同的頁面用作商店的結帳螢幕。您還可以選擇強制使用安全的HTTPS連線。
在General設定頁面上，您可以啟用在結帳時使用優惠券，並配置如何計算稅款：
WooCommerce中的常規設定頁面
在Accounts & Privacy選項卡下，您還可以找到一些用於建立帳戶和訪客結算的選項：
WooCommerce設定的“帳戶和隱私”選項卡
在其下方，有一個Privacy policy部分，您可以在其中修改結帳頁面上顯示的隱私政策文字：
WooCommerce中的隱私政策設定
除了這些內建設定之外，您僅使用WooCommerce外掛自定義結帳頁面的選項有限。幸運的是，您可以使用其他方法來增強其外觀並擴充套件其功能。
為什麼您可能想要更改您的WooCommerce結算頁面
結帳頁面是客戶在完成購買之前看到的最後一件事。它可以決定他們最終是轉換還是完全放棄您的網站。
因此，確保您的WooCommerce結算頁面設計良好並以鼓勵轉化的方式執行至關重要。您可以通過多種方式提供更好的體驗，例如：
- 更改設計和頁面模板
- 建立單頁結算
- 新增、刪除或重新排列欄位
- 更改輸入欄位標籤和按鈕文字
- 要求填寫某些欄位
- 自動觸發免運費
- 將產品直接連結到結帳頁面
無論您是想徹底檢查預設頁面還是進行細微修改，重要的是您能夠輕鬆地做到這一點。幸運的是，您有多種選擇。
可用於更改WooCommerce結算頁面的方法
有很多方法可以更改您的WooCommerce結算頁面。最好的使用取決於幾個因素，例如您嘗試進行的特定編輯以及您對編碼的舒適程度。
您可以用來增強WooCommerce結算頁面的一些方法包括：
- WooCommerce功能、塊和簡碼。WooCommerce確實帶有一些可用於改善商店的內建功能和設定。例如，您可以自動觸發免費送貨，以及將產品直接連結到結帳頁面。還有用於修改頁面的塊和簡碼。
- 外掛和擴充套件。如果您不精通技術，或者只是想要一種快速輕鬆的方式來增強您的WooCommerce結算頁面，那麼您可以使用很多外掛。大多數都很容易上手，幾乎不需要支援。一些附加元件由WooCommerce提供，可從擴充套件庫中獲得，而其他附加元件由第三方平臺開發和提供。
- 頁面模板和主題。 如果要更改結算頁面的樣式，可以使用預構建的模板或主題。與外掛一樣，如果您的編碼經驗有限並且想要更改頁面的整體外觀以更好地匹配您的品牌，這是一個不錯的選擇。缺點是它沒有提供像自定義編碼那樣的靈活性。
- 自定義程式碼。您可以用來更改WooCommerce結算頁面的另一種方法是自定義編碼。如果您喜歡編輯站點檔案並希望新增大量個性化設定，這是一條強大的途徑。
在以下部分中，我們將看看您可以對WooCommerce頁面進行的一些最有效的更改。對於每個，我們將解釋您可能想要進行編輯的原因，並引導您瞭解可用於進行編輯的不同方法。
如何自定義WooCommerce結算欄位
您可能對WooCommerce頁面進行的最常見更改之一是修改其表單欄位。這些通常佔用頁面上的大部分空間，因此它們需要相關。無論您是要刪除欄位、重新排列它們的順序，還是新增新的自定義欄位，您都有幾個選項可以進行。您可以使用外掛或直接編輯程式碼。
使用外掛更改WooCommerce結算欄位
如果您想要一種快速簡單的方法來自定義WooCommerce中的結算欄位，我們建議您使用外掛。有幾個選項可供選擇。
最受歡迎的外掛之一是Checkout Field Editor外掛：
WooCommerce外掛-Checkout Field Editor
這是一個免費增值工具，可讓您在WooCommerce結算頁面上新增或編輯表單欄位。您可以啟用或禁用某些欄位，以及重新排列它們的順序。
雖然免費版本可以讓您處理這些基本任務，但WooCommerce Checkout Field Editor Pro帶有附加功能。這包括17種欄位型別和自定義掛鉤。
要使用此外掛，您可以通過導航到 外掛> 安裝外掛 然後搜尋它來將其安裝在您的WooCommerce網站上。找到它後，單擊立即安裝按鈕，然後單擊啟用。
啟用後，您可以通過轉到WooCommerce > Checkout Form來配置設定：
WooCommerce中的結算表單編輯器外掛
您可以編輯三種不同型別的欄位：
- Billing
- Shipping
- Additional
您可以選擇要更改的任何欄位，然後單擊Remove、 Enable或Disable按鈕。要新增新欄位，請選擇Add field。
如果要更改現有表單域，請選擇左側的框，然後單擊“Edit”按鈕。將開啟一個面板，您可以在其中更改欄位型別（僅限高階版）、編輯欄位標籤、選擇是否需要，等等：
WooCommerce Checkout Field Editor外掛中的編輯結帳欄位面板
完成後，單擊“SAVE”按鈕。完成對結帳頁面欄位的所有更改後，請務必點選螢幕底部的儲存更改。
有關更詳細的指導，您可以參考WooCommerce關於使用Checkout Field Editor外掛的文件。
當然，這只是您可以用來更改WooCommerce結算欄位的眾多外掛之一。值得考慮的其他選項包括Flexible Checkout Fields和 WooCommerce Checkout Manager，我們將在本文後面進行更多討論。
使用程式碼編輯結算欄位
在WooCommerce結算頁面上編輯欄位的另一個選項是使用自定義編碼。當然，這需要一定程度的技術知識和使用站點檔案的舒適度。優點是您在自定義方面比使用第三方外掛具有更大的靈活性。
您可以使用站點的functions.php檔案和過濾器來編輯結算欄位 ，例如：
- woocommerce_checkout_fields
- woocommerce_billing_fields
- Woocommerce_shipping_fields
WooCommerce actions 和 filters可讓您以幾乎任何您希望的方式操作結算欄位。例如，您可以完全刪除它們、新增新的或更改顯示的文字。使用woocommerce_checkout_fields 過濾器將使您能夠覆蓋任何欄位。
假設您要更改order_comments欄位的佔位符文字。預設情況下，它設定如下：
_x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')
要更改它，您可以將此程式碼片段新增到您的functions.php 檔案中：
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['order']['order_comments']['placeholder'] = 'My new placeholder';
return $fields;
}
要刪除欄位，您可以使用以下命令：
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments']);
return $fields;
您可以對結算頁面上的欄位進行許多更改，因此我們不會在此處一一探討。您可以在GitHub上找到有用的覆蓋結算欄位程式碼列表。
如何更改WooCommerce結算頁面模板
預設情況下，您的WooCommerce結算頁面模板將基於您網站的主題。但也許您想更改設計以更好地適應您的品牌，或者您可能只想對模板頁面的內容進行輕微更改。
您可以用來更改此設定的兩種主要方法是使用預構建的模板或新增程式碼。讓我們從前者開始。
從預建模板開始自定義結算頁面
更改WooCommerce結算頁面設計的最簡單方法是安裝預構建的主題，例如WooCommerce主題商店中的主題。有多種免費選項以及高階主題可供選擇。
例如，您可以搜尋單頁結算主題或您有興趣使用的任何其他型別的特定模板。您還可以在Envato Market上找到大量WooCommerce主題。
使用程式碼自定義WooCommerce結算頁面模板
如果您喜歡編輯程式碼，您還可以手動更改結帳頁面模板。根據您的託管服務提供商，您可以通過cPanel中的檔案管理器或安全檔案傳輸協議 (SFTP) 客戶端來執行此操作。
您可以使用動作掛鉤從結帳頁面新增、編輯或刪除元素。WooCommerce用於結算頁面的主要動作鉤子有九個：
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_after_order_review
- Woocommerce_after_checkout_form
這些操作掛鉤向頁面新增標記，您可以使用這些標記來自定義其樣式和功能。如果您想使用這些操作掛鉤來修改您的結帳頁面模板，您可以通過編輯結算表單PHP檔案來實現。
您可以在/woocommerce/templates下找到WooCommerce模板檔案。從您網站的根目錄，您需要導航到wp-content/plugins/woocommerce：
WooCommerce模板資料夾
在這些檔案中，您可以使用掛鉤在模板頁面上新增和重新排列內容，而無需實際編輯模板檔案。要為結帳頁面建立自定義主題模板，您首先需要在主題資料夾中建立一個“woocommerce/checkout”資料夾。
接下來，複製WooCommerce結算頁面模板，您可以在woocommerce/templates/checkout/form-checkout.php找到該模板：
WooCommerce結算頁面模板檔案
然後，將其新增到您剛剛建立的新資料夾中。之後，您可以編輯檔案以進行所需的更改。當您儲存檔案時，WooCommerce外掛將載入此模板並覆蓋預設頁面模板。
如何建立單頁WooCommerce結算
增強客戶結算體驗並在此過程中降低放棄率的方法之一是使其儘可能快速和簡單。如果您想縮短結算流程，可以通過在WooCommerce中建立單頁結帳來實現。
有多種方法可以做到這一點。正如我們之前提到的，您可以尋找將提供單個結算頁面的單頁主題或模板。但是，如果您喜歡當前的主題，您可能不想更改它。
如果是這種情況，請不要擔心。還有其他選項，例如高階WooCommerce One Page Checkout擴充套件：
WooCommerce單頁結算擴充套件
由於此解決方案是由WooCommerce開發的，因此您知道它安全、可靠並提供大量支援。除了讓您將任何頁面轉換為結帳頁面之外，它還具有許多用於優化單頁結帳流程的功能。
你可以：
- 在一頁上顯示產品選擇和結算表格。
- 使客戶能夠在他們的購物車中新增或刪除商品。
- 讓客戶在不離開頁面的情況下完成付款。
- 向頁面新增自定義欄位。
通過您的WooCommerce帳戶購買擴充套件程式後，您可以下載該外掛，然後在您的 WooCommerce 網站上安裝並啟用它。
要使用它，請導航到Pages > Add New並在編輯器工具欄中選擇One Page Checkout圖示：
WordPress編輯器中的One Page Checkout擴充套件圖示
在開啟的面板中，您可以單擊“Products” 欄位，然後開始輸入要新增的產品的名稱。
接下來，選擇您要使用的模板（產品列表、產品表、定價表或單個產品），然後單擊Create Shortcode。
您還可以手動將單頁短程式碼插入任何文章或頁面。要了解有關此外掛的更多資訊以及如何使用它，您可以參考WooCommerce One Page Checkout文件。
如何在WooCommerce結算過程中觸發免費送貨
作為電子商務企業主，您可以利用許多不同的策略來鼓勵客戶增加消費。其中之一是提供免費送貨。
當然，您可能不想為每個訂單提供免費送貨服務。但是，將其作為對達到一定數量的訂單總額的激勵措施可以幫助您鼓勵購物者花費更多。
因此，您可能希望將您的WooCommerce結算頁面配置為自動觸發超過一定數量（例如100美元）的訂單的免費送貨。
您需要做的第一件事是向相關Shipping Zone(s)提供免費送貨方式。
為此，請導航至WooCommerce > Settings > Shipping：
WooCommerce送貨設定
將滑鼠懸停在您要修改的運輸區域上，然後單擊Edit連結。如果您尚未新增任何區域，請先選擇 新增 Add shipping zone button，然後按照提示繼續操作。
接下來，單擊Add Shipping Method。在開啟的模式中，從下拉選單中選擇Free Shipping，然後再次Add shipping method ：
在WooCommerce中新增免費送貨方式
接下來，從設定頁面的Shipping methods列表中，將滑鼠懸停在Free Shipping上 ，然後單擊Edit連結。
Free shipping settings面板將開啟。從Free shipping requires…下拉選單，選擇A minimum order amount :
WooCommerce中的免費送貨設定
然後，您可以定義最小訂單金額。完成後，單擊“儲存更改”按鈕。
如何將產品直接連結到WooCommerce結算頁面
增強客戶結算體驗的另一種方法是建立直接結算鏈接。這有助於讓客戶直接從產品和銷售頁面結算。
手動建立直接結帳連結
要在WooCommerce中建立和新增直接結帳連結，您可以使用以下 URL：exampledomain.com//checkout/ ?add-to-cart=ID 。
注意：您需要將“exampledomain”和“ID”替換為您的域名和您連結到結帳頁面的特定產品 ID。
要查詢產品ID，請導航到管理儀表板中的Products > All Products。瀏覽到您要為其建立直接連結的產品，然後將滑鼠懸停在其名稱上以顯示產品ID號：
WooCommerce產品ID
將產品ID貼上到上述URL後，您可以將連結放在WooCommerce網站的任何位置。您可以為每個產品重複此過程，甚至是可變和分組的專案。
使用外掛建立直接結帳連結
我們意識到上述策略可能不是對所有使用者最有效的方法。根據您在WooCommerce商店中擁有的產品數量，這可能非常耗時。
幸運的是，如果您正在尋找一種更快的方法，您還可以使用Direct Checkout for WooCommerce外掛：
WooCommerce外掛Direct Checkout
這款免費增值工具可讓您以多種方式簡化結算流程，包括新增從產品頁面到結算螢幕的直接連結。在您的WooCommerce網站上安裝並啟用外掛後，導航至WooCommerce > Direct Checkout：
WooCommerce外掛設定的直接結帳
在General選項卡下， 為已Added to cart redirect選項選擇Yes，然後從Added to cart redirect to下拉選單中選擇Checkout。完成後單擊儲存更改 。
接下來，導航到Products選項卡：
在WooCommerce的Direct Checkout中重定向到購物車的選項
啟用新增成功後重定向到購物車頁面選項。再次單擊儲存更改按鈕。而已！
如何測試您的WooCommerce結帳頁面
在這一點上，您希望實現了多種方法來增強您的WooCommerce結帳頁面。現在，必須確保您的結帳流程正常執行，以減少放棄並確認沒有錯誤會中斷客戶旅程。
幸運的是，有一種簡單的方法可以讓您通過WooCommerce商店傳送測試訂單和付款，以確保一切正常。為此，您首先需要在您的網站上安裝WooCommerce Payments外掛 （如果您尚未安裝）：
WooCommerce支付外掛
安裝並啟用外掛後，您可以啟用“Test Mode”。為此，請導航到WooCommerce > Payments > Settings：
WooCommerce支付測試模式
請記住儲存您的更改。
啟用測試模式後，您可以瀏覽您的WooCommerce商店並選擇任何產品。將其新增到您的購物車，然後轉到結帳頁面。
根據需要填寫結帳頁面表單欄位。對於付款資訊，您可以使用WooCommerce提供的任何虛擬信用卡號。您也可以使用任何三位數字作為CVC程式碼，並選擇任何未來日期。
完成後，單擊“Place Order”。接下來，導航到Payments > Transactions螢幕：
在WooCommerce中測試交易
在這裡，您應該會看到費用顯示。如果它在那裡，您就知道您的結帳頁面正在正常工作。完成後記得關閉測試模式！
最好的WooCommerce Checkout外掛和擴充套件
在這篇文章中，我們介紹了多種更改WooCommerce結帳頁面的方法，包括塊、短程式碼和自定義程式碼。我們還提到了一些關鍵外掛，它們可以幫助您新增原本無法使用的特性和功能。
但是，我們還沒有提到一些額外的附加元件、外掛和擴充套件，但它們為您的WooCommerce結帳頁面提供了更多自定義選項。一些值得考慮的最好的包括：
- WooCommerce Cart Notices Add-On。這個WooCommerce外掛可讓您在結算過程中向客戶顯示可操作的訊息和通知。例如，您可以使用它來通知他們相關的銷售和促銷活動。
- WooCommerce Checkout Manager。由為WooCommerce開發Direct Checkout的同一團隊製作，這個外掛是一個強大的擴充套件，您可以使用它來優化您的結帳頁面。您可以使用它來編輯、刪除和新增自定義欄位，以及建立條件欄位。
- WooCommerce Checkout Add-Ons。此高階外掛可讓您在結帳階段新增免費和付費附加元件。它是提高轉化率和增加收入的有用工具。
根據您擁有的電子商務網站的型別，您可能正在尋找更多選擇。如果是這樣，我們建議檢視WooCommerce擴充套件庫，它提供了大量用於擴充套件WooCommerce外掛的特性和功能的附加元件，包括免費和付費解決方案。
小結
您可以採用不同的方法來改進和優化您的WooCommerce結帳頁面。
根據您想要進行的更改和您的經驗水平，您可以利用WooCommerce外掛和擴充套件、頁面模板和主題，甚至自定義程式碼。
評論留言