WooCommerce 的內建會員註冊是只有填寫電子郵件跟密碼,而公司網站需要設計一個在WooCommerce 會員註冊時,可以填寫姓名與電話的填寫欄位,以便之後客人第一次結帳時就能夠自動帶入會員資料。

因此文章將會透過程式,新增註冊欄位,並且記錄到會員的資料,底下就一步一步來講解吧!

Step 1 – 開啟帳號註冊頁

首先要確認註冊頁面是否有開啟,否則後面做的都是看不到的。設定的位置在WooCommerce > 設定 > 帳號與隱私權,將”允許客戶在「我的帳號」頁面上建立帳號。“選項打開。

WooCommerce 開啟帳號註冊功能

之後便可以到我的帳號查看是否完成了

帳號註冊頁面

Step 2 – 新增欄位

再來就開始新增欄位,為了不動到原本的版型,所以我會建立一個子主題,將所有的程式都放在子主題的 function.php 檔案中,,透過Wordpress Hook功能,在帳號註冊的地方新增欄位。

<?php
add_action( 'woocommerce_register_form', 'add_register_form_field' );
function add_register_form_field(){
woocommerce_form_field( 
'first_name', array(          // 欄位的ID
'type'        => 'text',  // 欄位的類型(text, password, tel...)
'required'    => true,    // 提醒用戶是否為必填
'label'       => __( 'First name', 'woocommerce' )  //欄位的名稱
), ( isset( $_POST['first_name'] ) ? $_POST['first_name'] : '' )
);
woocommerce_form_field(
'phone', array(
'type'        => 'tel',
'required'    => true, 
'label'       => __( 'Phone', 'woocommerce' )
), ( isset( $_POST['phone'] ) ? $_POST['phone'] : '' )
);  
}
?>

更多的woocommerce_form_field() 可以參考此網站https://rudrastyh.com/woocommerce/woocommerce_form_field.html

再從網頁觀看就可以看到多兩個欄位了!

註冊已經有新增欄位

Step 3 – 驗證欄位

為欄位增加驗證的功能,來確保使用者是否有照規則輸入,最簡單的是驗證欄位是否為空值。

<?php
add_action( 'woocommerce_register_post', 'validate_fields', 10, 3 );
function validate_fields( $username, $email, $errors ) {
if ( empty( $_POST['first_name'] ) ) {
$errors->add( 'first_name_error', '請輸入姓名' );
} else if ( empty( $_POST['phone'] ) ) {
$errors->add( 'phone_error', '請輸入連絡電話' );
} 
}
?>

進行測試看看是否有驗證是否為空值

註冊驗證資料

Step 4 – 資料儲存

最後一步就是將資料儲存至使用者的帳單資料了

<?php
add_action( 'woocommerce_created_customer', 'save_register_fields' );
function save_register_fields( $customer_id ){
if ( isset( $_POST['first_name'] ) ) {
update_user_meta( $customer_id, 'billing_first_name', wc_clean( $_POST['first_name'] ) );
update_user_meta( $customer_id, 'shipping_first_name', wc_clean( $_POST['first_name'] ) );
}
if ( isset( $_POST['phone'] ) ) {
update_user_meta( $customer_id, 'billing_phone', wc_clean( $_POST['phone'] ) );
}
}
?>

關於使用者的帳單與運送的欄位名稱可以到這裡查詢https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

實際測試註冊看看並且到地址查看,就能夠看到註冊時填寫的資料囉

儲存使用者資料

參考資料: https://rudrastyh.com/woocommerce/add-registration-form-field.html

rHuei

一個喜歡亂玩亂弄的工程師。

Leave a comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *