How to add phone number masking in woo commerce my account page in wordpress

Question

I want to add phone number masking on my account page of Woocommerce in wordpress?

Answer 1

Add the below code snippet in your active theme's functions.php file -

// Add field in Account Details
function wc_add_field_edit_account_form() {
    woocommerce_form_field(
        'user_phone_number',
        array(
            'type'        => 'tel',
            'required'    => true, // for false do not need this `woocommerce_save_account_details_required_fields` callback
            'label'       => __( 'Phone Number', 'yourtextdomain' ),
        ),
        get_user_meta( get_current_user_id(), 'user_phone_number', true ) 
    );
}
add_action( 'woocommerce_edit_account_form', 'wc_add_field_edit_account_form' );

// Save field data
function wc_save_account_details( $user_id ) {
    update_user_meta( $user_id, 'user_phone_number', wc_clean( $_POST[ 'user_phone_number' ] ) );
}
add_action( 'woocommerce_save_account_details', 'wc_save_account_details' );

// Add field required
function wc_add_account_details_required_fields( $required_fields ){
    $required_fields[ 'user_phone_number' ] = __( 'Phone Number', 'yourtextdomain' );
    return $required_fields;
}
add_filter( 'woocommerce_save_account_details_required_fields', 'wc_add_account_details_required_fields' );