6

my question: How to add mobile phone field in Woocommerce my-account/edit-account/ page (Related template: form-edit-account.php file)

Like in the following answer thread:
Saving the value of a custom field phone number in WooCommerce My account > Account details

But this answer code is incomplete as there is some missing hooked functions. Any help is appreciated to get something complete, meaning the field display.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
ahmadwp
  • 228
  • 1
  • 4
  • 15
  • thank you, but can't find my answer? your answer need edit 2 files. 1: functions.php and 2. form-edit-account.php. but need 1 code for functions.php. – ahmadwp Jun 29 '18 at 16:55
  • I have finally answered… So this is a complete tested solution – LoicTheAztec Jun 29 '18 at 17:02

1 Answers1

15

You have 3 options to display a custom mobile phone field on My account > Edit account page:

1) As the first field using woocommerce_edit_account_form_start action hook (see below).

2) After existing fields using woocommerce_edit_account_form action hook:

// Display the mobile phone field
// add_action( 'woocommerce_edit_account_form_start', 'add_billing_mobile_phone_to_edit_account_form' ); // At start
add_action( 'woocommerce_edit_account_form', 'add_billing_mobile_phone_to_edit_account_form' ); // After existing fields
function add_billing_mobile_phone_to_edit_account_form() {
    $user = wp_get_current_user();
    ?>
     <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="billing_mobile_phone"><?php _e( 'Mobile phone', 'woocommerce' ); ?> <span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
    </p>
    <?php
}

// Check and validate the mobile phone
add_action( 'woocommerce_save_account_details_errors','billing_mobile_phone_field_validation', 20, 1 );
function billing_mobile_phone_field_validation( $args ){
    if ( isset($_POST['billing_mobile_phone']) && empty($_POST['billing_mobile_phone']) )
        $args->add( 'error', __( 'Please fill in your Mobile phone', 'woocommerce' ),'');
}

// Save the mobile phone value to user data
add_action( 'woocommerce_save_account_details', 'my_account_saving_billing_mobile_phone', 20, 1 );
function my_account_saving_billing_mobile_phone( $user_id ) {
    if( isset($_POST['billing_mobile_phone']) && ! empty($_POST['billing_mobile_phone']) )
        update_user_meta( $user_id, 'billing_mobile_phone', sanitize_text_field($_POST['billing_mobile_phone']) );
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

3) In a specific location, overriding myaccount/form-edit-account.php template file via the theme as explained on this documentation. and on this answer thread…

In this case you will need to add the following html code in the template (like in this answer thread):

 <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="billing_mobile_phone"><?php _e( 'Mobile phone', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
</p>

In this last case, you will need to add in your theme's function.php file the 2 last hooked functions from section 2 (validation and saving).

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • thank you. but this code work for custom field. i need add mobile phone (default woocommerce) > billing_phone standard field show in edit account page. – ahmadwp Jun 29 '18 at 17:15
  • 1
    You have just change the meta key everywhere from `billing_mobile_phone` to `billing_phone` in the code… Now if you want to handle the billing phone everywhere, from my account fields to checkout fields, that is something different, that can be handled in different ways. – LoicTheAztec Jun 29 '18 at 17:17
  • sorry, my english not good; i need change to mobile phone (default woocommerce) > billing_phone original field - edit account page from writable and changable to readonly – ahmadwp Jun 29 '18 at 18:19
  • in woocommerce edit account page, The fields that exist include: email, first name, last name, display name and password. I want to add billing_phone or any billing fields like postcode, company (checkout fields) Add to here – ahmadwp Jun 29 '18 at 18:56
  • in my shop. customers signup during in checkout is disabled. and need login and complete payment. customers signup before buy with signup page (created with gravityforms plugin) customers see billing name and last name and email and display name in account page as default woocommerce setup. i want customer see billing_phone too, in edit account page. like name, last name and email. – ahmadwp Jun 29 '18 at 19:08
  • You are making confusions: Your needs are on the registration form, when going to my account as unlogged user and "Register" is displayed… There you need to add all necessary fields. – LoicTheAztec Jun 29 '18 at 19:20