WooCommerce 添加下拉選擇字段到“我的賬戶(hù)”注冊(cè)表單

在做WooCommerce開(kāi)發(fā)時(shí)，我們可能需要對(duì)“我的賬戶(hù)”注冊(cè)字段做一些修改。今天，我們來(lái)分享一下WooCommerce 添加下拉選擇字段到“我的賬戶(hù)”注冊(cè)表單的方法，具體效果如下所示：

除了注冊(cè)表單字段以外，我們還需要在“編輯賬戶(hù)”頁(yè)面將這個(gè)字段也添加進(jìn)來(lái)：

我們還可以在后臺(tái)的“我的個(gè)人資料”頁(yè)面添加對(duì)應(yīng)的字段，允許用戶(hù)在后臺(tái)修改該字段：

實(shí)現(xiàn)以上所有功能的代碼如下：

<?php
/**
* @snippet       Add Select Field to "My Account" Register Form | WooCommerce
* @how-to        Get CustomizeWoo.com FREE
* @sourcecode    https://businessbloomer.com/?p=72508
* @author        Rodolfo Melogli
* @testedwith    WooCommerce 3.5.7+
* @donate $9     https://businessbloomer.com/bloomer-armada/
*/

// -------------------
// 1. 在我的賬戶(hù)頁(yè)面的注冊(cè)表單添加選擇字段

add_action( 'woocommerce_register_form', 'bbloomer_extra_register_select_field' );

function bbloomer_extra_register_select_field() {
?>

	<p class="form-row form-row-wide">
		<label for="find_where"><?php _e( 'Where did you find us?', 'woocommerce' ); ?>  <span class="required">*</span></label>
		<select name="find_where" id="find_where" />
			<option value="goo">Google</option>
			<option value="fcb">Facebook</option>
			<option value="twt">Twitter</option>
		</select>
	</p>

<?php

}

// -------------------
// 2. 在注冊(cè)時(shí)保存字段值

add_action( 'woocommerce_created_customer', 'bbloomer_save_extra_register_select_field' );

function bbloomer_save_extra_register_select_field( $customer_id ) {
	if ( isset( $_POST['find_where'] ) ) {
		update_user_meta( $customer_id, 'find_where', $_POST['find_where'] );
	}
}

// -------------------
// 3. 在后臺(tái)“我的個(gè)人資料”和前臺(tái)“我的賬戶(hù)-編輯賬戶(hù)”界面顯示新增的字段

add_action( 'show_user_profile', 'bbloomer_show_extra_register_select_field', 30 );
add_action( 'edit_user_profile', 'bbloomer_show_extra_register_select_field', 30 ); 
add_action( 'woocommerce_edit_account_form', 'bbloomer_show_extra_register_select_field', 30 );

function bbloomer_show_extra_register_select_field($user){ 

	if (empty ($user) ) {
		$user_id = get_current_user_id();
		$user = get_userdata( $user_id );
	}

	?>    

	<p class="form-row form-row-wide">
		<label for=""><?php _e( 'Where did you find us?', 'woocommerce' ); ?>  <span class="required">*</span></label>
		<select name="find_where" id="find_where" />
			<option disabled value> -- select an option -- </option>
			<option value="goo" <?php if (get_the_author_meta( 'find_where', $user->ID ) == "goo") echo 'selected="selected" '; ?>>Google</option>
			<option value="fcb" <?php if (get_the_author_meta( 'find_where', $user->ID ) == "fcb") echo 'selected="selected" '; ?>>Facebook</option>
			<option value="twt" <?php if (get_the_author_meta( 'find_where', $user->ID ) == "twt") echo 'selected="selected" '; ?>>Twitter</option>
		</select>
	</p>

<?php
}
 
// -------------------
// 4. 在后臺(tái)“我的個(gè)人資料”和前臺(tái)“我的賬戶(hù)-編輯賬戶(hù)”保存新增字段的值
  
add_action( 'personal_options_update', 'bbloomer_save_extra_register_select_field_admin' );    
add_action( 'edit_user_profile_update', 'bbloomer_save_extra_register_select_field_admin' );   
add_action( 'woocommerce_save_account_details', 'bbloomer_save_extra_register_select_field_admin' );
  
function bbloomer_save_extra_register_select_field_admin( $customer_id ){
	if ( isset( $_POST['find_where'] ) ) {
	   update_user_meta( $customer_id, 'find_where', $_POST['find_where'] );
	}
}

如果你想了解更多WooCommerce使用和開(kāi)發(fā)知識(shí)，可以系統(tǒng)學(xué)習(xí)《WooCommerce 開(kāi)發(fā)指南視頻課程》