Thêm thông tin đăng ký thành viên woocommerce.

114
0

Woocommerce một plugin tạo trang bán hàng khá nỗi tiếng. Nó hỗ trợ đầy đủ mọi chức năng cần có của một trang bán hàng chuyên nguyên từ quản lý sản phẩm, đến thanh toán… và hơn hết có rất nhiều theme hỗ trợ plugin này.

Vấn đề đặt ra, trang đăng ký thành viên mới của woocommerce khá đơn giản và rất dễ bị spam nếu bạn không biết cách phòng tránh. Minh xin đưa ra cách custom lại form đăng ký mặc định của woocommerce mà không cần tới plugin.

Form mặc định đăng ký thành viên mới của woocommerce là như thế này:

<div class="u-column2 col-2">

		<h2><?php _e( 'Register', 'woocommerce' ); ?></h2>

		<form method="post" class="register">

			<?php do_action( 'woocommerce_register_form_start' ); ?>

			<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

				<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
					<label for="reg_username"><?php _e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>
					<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( $_POST['username'] ) : ''; ?>" />
				</p>

			<?php endif; ?>

			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="reg_email"><?php _e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
				<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( $_POST['email'] ) : ''; ?>" />
			</p>

			<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

				<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
					<label for="reg_password"><?php _e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
					<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" />
				</p>

			<?php endif; ?>

			<!-- Spam Trap -->
			<div style="<?php echo ( ( is_rtl() ) ? 'right' : 'left' ); ?>: -999em; position: absolute;"><label for="trap"><?php _e( 'Anti-spam', 'woocommerce' ); ?></label><input type="text" name="email_2" id="trap" tabindex="-1" autocomplete="off" /></div>

			<?php do_action( 'woocommerce_register_form' ); ?>

			<p class="woocomerce-FormRow form-row">
				<?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
				<input type="submit" class="woocommerce-Button button" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>" />
			</p>

			<?php do_action( 'woocommerce_register_form_end' ); ?>

		</form>

	</div>

Để thêm được một trường thông tin mới vô trang đăng ký này mình sử dụng hook có wordpress. Ví dụ như muốn thêm first và last name, email và confirm password. Ta có thể sử dụng đoạn code này thêm vào file functions.php của theme.

<?php function frm_register(){ ?>
<p class="config-box-res woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
	<div class="box-register-content">
		<label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
		<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php echo ( ! empty( $_POST['billing_first_name'] ) ) ? esc_attr( $_POST['billing_first_name'] ) : ''; ?>" required />
	</div>
	<div class="box-register-content">
		<label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label>
		<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php echo ( ! empty( $_POST['reg_billing_last_name'] ) ) ? esc_attr( $_POST['reg_billing_last_name'] ) : ''; ?>" required />
	</div>
</p>

<p class="config-box-res woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
	<div class="box-register-content">
		<label for="reg_username"><?php _e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>
		<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( $_POST['username'] ) : ''; ?>" required />
	</div>
</p>
<?php } ?>
add_action('woocommerce_register_form_start','frm_register');

Thế là xong, Như vậy ta đã thêm được 3 ô input mới vào form đăng ký mặc định của woocommerce. Công việc tiếp theo là xử lý thông tin người dùng nhập vào. Ta thêm tiếp vào file functions.php đoạn này.

function wooc_save_extra_register_fields( $customer_id ) {
		if ( isset( $_POST['billing_first_name'] ) ) {
			update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
			update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
		}
		if ( isset( $_POST['billing_last_name'] ) ) {
			update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
			update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
		}

	}
	add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

Good luck!!

Đối nét về Thắng Nguyễn

Xin Chào, Mình là Nguyễn Việt Thắng người sáng lập và quản lý trang https://iamgvt.com
Mình sinh năm 1994, Đam mê thích học hỏi khám phá và chia sẻ những thứ mình học được. Tham gia vào MMO cũng được gần 1 năm.

| Website | Facebook | Twitter

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Viết một bình luận