With the snippet below we add a billing phone field to the account edit details.
This works without problems, only we would have liked to add the new field between the email and the password change section field.
add_action( 'woocommerce_edit_account_form_start', 'misha_add_field_edit_account_form' );
// or add_action( 'woocommerce_edit_account_form', 'misha_add_field_edit_account_form' );
function misha_add_field_edit_account_form() {
woocommerce_form_field(
'billing_phone',
array(
'type' => 'text',
'required' => true, // remember, this doesn't make the field required, just adds an "*"
'label' => 'Phone',
'description' => 'add your phone number',
),
get_user_meta( get_current_user_id(), 'billing_phone', true ) // get the data
);
}
/**
* Step 2. Save field value
*/
add_action( 'woocommerce_save_account_details', 'misha_save_account_details' );
function misha_save_account_details( $user_id ) {
update_user_meta( $user_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
}
/**
* Step 3. Make it required
*/
add_filter('woocommerce_save_account_details_required_fields', 'misha_make_field_required');
function misha_make_field_required( $required_fields ){
$required_fields['billing_phone'] = 'Phone';
return $required_fields;
}
Advertisement
Answer
The way you apply the code is recommended. However, because you want to add the new field in a very specific place, I would recommend the following
Step 1: overwriting the template file
https://github.com/woocommerce/woocommerce/blob/3.8.0/templates/myaccount/form-edit-account.php
- This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-edit-account.php.
Replace: line 42 – 47
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="account_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="email" class="woocommerce-Input woocommerce-Input--email input-text" name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" />
</p>
// ADD NEW FIELD HERE
<fieldset>
With
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="account_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="email" class="woocommerce-Input woocommerce-Input--email input-text" name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" />
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="billing_phone"><?php esc_html_e( 'Billing phone', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="tel" class="woocommerce-Input woocommerce-Input--text input-text" name="billing_phone" id="billing_phone" autocomplete="tel" value="<?php echo esc_attr( $user->billing_phone ); ?>" />
</p>
<fieldset>
Step 2 & Step 3
To save and validate the field you can keep your existing code (I adjusted these slightly)
/**
* Save field value
*/
function my_save_account_details( $user_id ) {
if( isset( $_POST['billing_phone'] ) ) {
update_user_meta( $user_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
}
}
add_action( 'woocommerce_save_account_details', 'my_save_account_details' );
/**
* Make it required
*/
function my_save_account_details_required_fields( $required_fields ){
$required_fields['billing_phone'] = 'Billing phone';
return $required_fields;
}
add_filter('woocommerce_save_account_details_required_fields', 'my_save_account_details_required_fields');