Thêm các trường tùy chỉnh vào Biểu mẫu đăng ký WooCommerce

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn sẽ thêm các trường tùy chỉnh bổ sung như tên, họ, số điện thoại, v.v. vào biểu mẫu đăng ký WooCommerce của mình.

Để bắt đầu, hãy đảm bảo rằng biểu mẫu đăng ký WooCommerce được bật trên trang đăng nhập tài khoản. Đối với điều này, hãy đi tới WooCommerce -> Cài đặt -> Tài khoản & Quyền riêng tư và chọn Bật đăng ký khách hàng trên trang “Tài khoản của tôi”.

Bây giờ bạn sẽ nhận được mẫu đăng ký ở giao diện người dùng.

Bạn sẽ nhận được trường địa chỉ email duy nhất trên biểu mẫu đăng ký của mình. Tôi đang kích hoạt các trường tên người dùng và mật khẩu trên biểu mẫu đăng ký. Vì vậy, khách hàng có thể dễ dàng tạo tên người dùng và mật khẩu của riêng mình để đăng nhập.

Sau đó, biểu mẫu đăng ký trông như thế này.

Thêm trường bổ sung

Bây giờ chúng ta sẽ thêm các trường bổ sung như tên, họ, số điện thoại, v.v., bao gồm các dòng mã sau vào cuối tệp functions.php, nằm trong thư mục chủ đề của bạn.
/**
 * Extra custom fields variable
 *
 * @copyright PaulChinmoy.com
 * @author Paul Chinmoy
 **/
function paulc_wc_form_top_fields() {
	return array(
		'account_first_name' => array(
			'type' 		=> 'text', 
			'id' 		=> 'reg_first_name',
			'class' 	=> array( 'woocommerce-form-row', 'col-1', 'form-row-first' ),
			'label' 	=> __( 'First Name', 'paulc'),
			'placeholder' => __( 'First Name', 'paulc'),
			'required' 	=> true
		),
		'account_last_name' => array(
			'type' 		=> 'text',
			'id' 		=> 'reg_last_name',
			'class' 	=> array( 'woocommerce-form-row', 'col-2' ),
			'label' 	=> __( 'Last Name', 'paulc'),
			'placeholder' => __( 'Last Name', 'paulc'),
			'required' 	=> true
		),
		'phone' => array(
			'type' 		=> 'tel', 
			'id' 		=> 'reg_phone',
			'class' 	=> array( 'woocommerce-form-row', 'woocommerce-form-row--wide', 'form-row-wide' ),
			'label' 	=> __( 'Phone', 'paulc'),
			'placeholder' => __( 'Phone', 'paulc'),
			'required' 	=> true
		),
	);
}
/**
 * Adding the extra fields (first name, last name & phone number) to registration form
 *
 * @copyright PaulChinmoy.com
 * @author Paul Chinmoy
 **/
add_action( 'woocommerce_register_form_start', 'paulc_woocommerce_register_form_start_fields' );
function paulc_woocommerce_register_form_start_fields() {
	$fields = paulc_wc_form_top_fields();
	foreach ( $fields as $key => $field_args ) {
		woocommerce_form_field( $key, $field_args, $_POST[ $key ] );
	}
}
Bây giờ nếu bạn làm mới trang, bạn sẽ thấy các trường được thêm vào biểu mẫu đăng ký WooCommerce.

Xác thực dữ liệu trường tùy chỉnh

Chúng tôi sẽ xác nhận dữ liệu trường tùy chỉnh trước khi lưu chúng vào cơ sở dữ liệu. Bạn sẽ thêm những dòng mã này vào cuối tệp functions.php nằm trong thư mục chủ đề.
/**
 * Validating the registration form custom fields data
 *
 * @copyright PaulChinmoy.com
 * @author Paul Chinmoy
 **/
add_filter( 'woocommerce_registration_errors', 'paulc_validate_custom_fields_data_reg_form', 99 );
function paulc_validate_custom_fields_data_reg_form( $errors ) {
	$required_fields = array(
		'account_first_name'    => __( 'first name', 'woocommerce' ),
		'account_last_name'     => __( 'last name', 'woocommerce' ),
		'phone' 				=> __( 'valid phone number', 'paulc' ),
	);
	foreach ( $required_fields as $field_key => $field_name ) {
		if ( empty( $_POST[ $field_key ] ) ) {
			$errors->add( $field_key . '-error', sprintf( __( 'Please enter your %s.', 'woocommerce' ), esc_html( $field_name ) ) );
		}
	}
	$_POST[ 'phone' ] = WC_Validation::format_phone( $_POST[ 'phone' ] );
	if ( '' !== $_POST[ 'phone' ] && ! WC_Validation::is_phone( $_POST[ 'phone' ] ) ) {
		$errors->add( 'reg-phone-error', __( 'Please enter your valid phone number.', 'woocommerce' ) );
	}
	return $errors;
}

Lưu dữ liệu trường tùy chỉnh vào cơ sở dữ liệu

Cuối cùng, chúng tôi sẽ lưu dữ liệu của các trường mới bổ sung này vào cơ sở dữ liệu để sử dụng trong tương lai. Một lần nữa, bạn sẽ thêm những dòng mã này vào cuối tệp functions.php.
/**
 * Saving the fields data to database
 * 
 * @copyright PaulChinmoy.com
 * @author Paul Chinmoy
 **/
add_action( 'woocommerce_created_customer', 'paulc_save_extra_register_fields', 99 );
function paulc_save_extra_register_fields( $customer_id ) {
	$account_first_name   	= ! empty( $_POST['account_first_name'] ) ? wc_clean( $_POST['account_first_name'] ): '';
	$account_last_name    	= ! empty( $_POST['account_last_name'] ) ? wc_clean( $_POST['account_last_name'] ) : '';
	$account_phone 			= ! empty( $_POST['phone'] ) ? wc_format_phone_number( $_POST[ 'phone' ] ) : '';
	update_user_meta( $customer_id, 'first_name', $account_first_name );
	update_user_meta( $customer_id, 'billing_first_name', $account_first_name );
	update_user_meta( $customer_id, 'last_name', $account_last_name );
	update_user_meta( $customer_id, 'billing_last_name', $account_last_name );
	update_user_meta( $customer_id, 'billing_phone', $account_phone );
}
Chúng tôi đã hoàn thành ở đây! Bây giờ các trường được thêm gần đây đã được thêm, xác thực và chèn để sử dụng trong tương lai.

Mã hóa nâng cao

Tôi đã làm công việc nâng cao này cho khách hàng của mình. Tôi đã thêm các trường bổ sung giống nhau vào cả biểu mẫu đăng ký và chi tiết tài khoản. Vì vậy, khách hàng có thể chỉnh sửa dữ liệu hiện có từ trang chi tiết tài khoản.