如何在 woocommerce 的注册页面中更改 order/location of HTML 表单元素
How to change order/location of HTML form elements in registration page of woocommerce
我在 woocommerce 的注册表中添加了 custom/extra 用户详细信息（附图片）。
红框中显示的字段为自定义字段。
我的添加自定义字段的代码。
function My_extra_register_fields() {?>
<br><hr>
<p class="form-row form-row-wide">
<label for="reg_password_again"><?php _e( 'Please Confirm Password', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="user_password_again" id="reg_password_again" />
</p>
<p class="form-row form-row-first">
<label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
</p>
<p class="form-row form-row-last">
<label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
</p>
<p class="form-row form-row-wide">
<label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob" />
</p>
<p class="form-row form-row-wide">
<label for="reg_billing_email_cnfrm"><?php _e( 'Please Confirm Email Address ', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_email_cnfrm" id="reg_billing_email_cnfrm" />
</p>
<p class="form-row form-row-wide">
<label for="reg_billing_phone"><?php _e( 'Mobile', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" />
</p>
<p class="form-row form-row-wide">
<input type="checkbox" name="reg_mkt_email" id="" />Check 1
</p>
<p class="form-row form-row-wide">
<input type="checkbox" name="reg_mkt_number" id="" />Check 2
</p>
<div class="clear"></div>
<?php
}
add_action( 'woocommerce_register_form', 'My_extra_register_fields' );
现在我正在尝试更改注册表中所有表单元素的顺序。但问题是我只能更改由 me.I 添加的自定义元素的顺序我无法更改带有自定义元素的预定义元素（用户名、电子邮件地址和密码）的顺序。
我正在尝试实现以下顺序 -
用户名（预定义）
名字
姓氏
出生日期
电子邮件地址（预定义）
请确认电子邮件地址
密码（预定义）
请确认密码
手机号码
任何建议
首先，检查这个How to override WooCommerce template files?
您必须覆盖表单-login.php 文件。
`wp-content/pluings/woocommerce/templates/myaccount/form-login.php`
从此路径复制文件。
`wp-content/pluings/woocommerce/templates/myaccount/form-login.php`
并上传此路径。
`wp-content/themes/your-active-theme-name/woocommerce/myaccount/form-login.php`
现在您可以编辑此文件并添加您的自定义字段。
You can get the `$user` object to this file. and based on that you can get user meta.
现在根据您的要求在 form-login.php 中替换 HTML 下面的内容。
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<p class="form-row form-row-first">
<label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
</p>
<p class="form-row form-row-last">
<label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
</p>
<p class="form-row form-row-wide">
<label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob" />
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_email"><?php esc_html_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" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<p class="form-row form-row-wide">
<label for="reg_billing_email_cnfrm"><?php _e( 'Please Confirm Email Address ', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_email_cnfrm" id="reg_billing_email_cnfrm" />
</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 esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="confirm_password"><?php esc_html_e( 'Confirm Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="confirm_password" autocomplete="confirm-password" />
</p>
<?php else : ?>
<p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p>
<?php endif; ?>
<p class="form-row form-row-wide">
<label for="reg_billing_phone"><?php _e( 'Mobile', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" />
</p>
已测试并有效
我在 woocommerce 的注册表中添加了 custom/extra 用户详细信息（附图片）。
红框中显示的字段为自定义字段。
我的添加自定义字段的代码。
function My_extra_register_fields() {?>
<br><hr>
<p class="form-row form-row-wide">
<label for="reg_password_again"><?php _e( 'Please Confirm Password', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="user_password_again" id="reg_password_again" />
</p>
<p class="form-row form-row-first">
<label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
</p>
<p class="form-row form-row-last">
<label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
</p>
<p class="form-row form-row-wide">
<label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob" />
</p>
<p class="form-row form-row-wide">
<label for="reg_billing_email_cnfrm"><?php _e( 'Please Confirm Email Address ', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_email_cnfrm" id="reg_billing_email_cnfrm" />
</p>
<p class="form-row form-row-wide">
<label for="reg_billing_phone"><?php _e( 'Mobile', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" />
</p>
<p class="form-row form-row-wide">
<input type="checkbox" name="reg_mkt_email" id="" />Check 1
</p>
<p class="form-row form-row-wide">
<input type="checkbox" name="reg_mkt_number" id="" />Check 2
</p>
<div class="clear"></div>
<?php
}
add_action( 'woocommerce_register_form', 'My_extra_register_fields' );
现在我正在尝试更改注册表中所有表单元素的顺序。但问题是我只能更改由 me.I 添加的自定义元素的顺序我无法更改带有自定义元素的预定义元素（用户名、电子邮件地址和密码）的顺序。
我正在尝试实现以下顺序 -
用户名（预定义）
名字
姓氏
出生日期
电子邮件地址（预定义）
请确认电子邮件地址
密码（预定义）
请确认密码
手机号码
任何建议
首先，检查这个How to override WooCommerce template files?
您必须覆盖表单-login.php 文件。
`wp-content/pluings/woocommerce/templates/myaccount/form-login.php`
从此路径复制文件。
`wp-content/pluings/woocommerce/templates/myaccount/form-login.php`
并上传此路径。
`wp-content/themes/your-active-theme-name/woocommerce/myaccount/form-login.php`
现在您可以编辑此文件并添加您的自定义字段。
You can get the `$user` object to this file. and based on that you can get user meta.
现在根据您的要求在 form-login.php 中替换 HTML 下面的内容。
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<p class="form-row form-row-first">
<label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
</p>
<p class="form-row form-row-last">
<label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
</p>
<p class="form-row form-row-wide">
<label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob" />
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_email"><?php esc_html_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" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<p class="form-row form-row-wide">
<label for="reg_billing_email_cnfrm"><?php _e( 'Please Confirm Email Address ', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_email_cnfrm" id="reg_billing_email_cnfrm" />
</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 esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="confirm_password"><?php esc_html_e( 'Confirm Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="confirm_password" autocomplete="confirm-password" />
</p>
<?php else : ?>
<p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p>
<?php endif; ?>
<p class="form-row form-row-wide">
<label for="reg_billing_phone"><?php _e( 'Mobile', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" />
</p>
已测试并有效