WooCommerce Checkout頁面優化 – 將郵件地址欄移動到結款頁面表單的最頂部

WooCommerce 的付款頁面，默認情況下，Email 一欄會在 Billing details 頁面的底部。這種情況下，如果客戶在填寫郵箱地址之前就遺棄了訂單，那麼我們是無法通過發送遺棄訂單挽救郵件的方式來引導客戶完成該筆訂單的付款，所以，我個人是建議和 Shopify 的 Checkout 頁面一樣，儘可能的把郵箱地址欄挪到付款頁面頂部的位置，配合遺棄訂單挽救的策略來提高網站整體轉化率。經過一番搜索，網上找了兩個解決方案，可以隨意去 DIY WooCommerce 付款頁面，一種方式是修改代碼實現，一種方式是安裝插件實現。供參考。

WooCommerce Checkout 頁面修改 – 修改代碼

因爲涉及到修改代碼，所以，建議在進行以下操作之前，先對網站進行備份操作，並且在操作過程中記錄好操作過程和修改細節，這樣，如果因爲誤操作導致網站無法訪問的時候，我們可以通過網站的備份數據快速恢復網站，或者根據操作過程記錄一步步還原我們對網站的修改。如果你用SiteGround主機建站，可以參考-網站備份教程

做好網站的備份之後，依次打開 WooCommerce網站後臺 – Appearance （外觀） – Theme Editor （主題編輯）- Select theme to edit 選擇你正在使用的主題的子主題 – 點擊下方的 functions.php 文件，打開文件編輯頁面。然後把下方由 businessbloomer 提供的代碼複製粘貼到文件末尾。最後點擊頁面底部的 Update File （更新文件）對所做的修改進行保存。

/**
* @snippet Move Email Field To Top @ Checkout Page
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible Woo 4.9
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_filter( ‘woocommerce_billing_fields’, ‘bbloomer_move_checkout_email_field’ );

function bbloomer_move_checkout_email_field( $address_fields ) {
$address_fields[‘billing_email’][‘priority’] = 1;
return $address_fields;
}

以上代碼來自 Businessbloomer ，推薦直接去原網址複製代碼。

修改好之後，在網站前臺打開 Checkout 頁面，查看網站是否還可以正常訪問，並且郵件地址欄是否已經被挪動到了付款頁面的最頂部。如果網站訪問異常，請及時對所做出的的修改進行還原操作，或者直接恢復網站備份。

另外一種方法就是

安裝 WordPress 插件 Checkout Field Editor for WooCommerce

安裝並激活插件之後，在 WooCommerce – Checkout Form 頁面，就可以對付款頁面的各個選項進行隨意拖動排序，以及文字，功能修改。而且還可以隨意添加和刪除付款頁面需要客戶提交的數據選項，免費版本功能有限，但是已經足夠滿足我挪動郵箱位置的需求。

如果你想對WooCommerce付款頁面進行更深度的訂製修改，可以考慮購買插件的付費版本來解鎖更多功能。