skip to Main Content

i use script for phone mask on chekout page.
On chekout page i used this if (is_checkout())
I add this mask on adress page in my account use this if (is_account_page())

I need help to add this mask on registration page too.
I create custom field on registration page but I don’t know what to use instead if (is_checkout()) to add mask on my new custom (phone) filed on registartion page

Mask

// mask
add_action('wp_enqueue_scripts', 'masked_input');
function masked_input() {
    if (is_checkout()) {
        wp_enqueue_script('masked_input', get_site_url().'/wp-content/JS/jquery.maskedinput.min.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 
function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>

<script type="text/javascript">
    jQuery( function( $ ) {
        $.mask.definitions['h'] = "[0|1|2|3|4|5|6|9]";
$("#billing_phone").mask("+998 (h999999999");
    });
</script>

<?php
    }
}

Custom field on reg page

// Add extra registration fields
add_action( 'woocommerce_register_form_start', 'woo_add_extra_registration_fields', 20 );
function woo_add_extra_registration_fields() {?>


    <p class="form-row form-row-wide">
        <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?><span class="required"> *</span></label>
        <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php if ( ! empty( $_POST['billing_phone'] ) ) esc_attr_e( $_POST['billing_phone'] ); ?>" />
    </p>


    <div class="clear"></div>
    <?php
}

// Validate require additional registration fields
add_action( 'woocommerce_register_post', 'woo_extra_registration_fields_validation', 20, 3 );
function woo_extra_registration_fields_validation( $username, $email, $validation_errors ) {
    $domain = 'woocommerce';
    $error  = '<strong>' . __( 'Error', $domain ) . '</strong>: ';



    // Billing Phone field
    if ( isset($_POST['billing_phone']) && empty( $_POST['billing_phone'] ) )
        $validation_errors->add( 'billing_phone_error', $error . __( 'Phone is required!.', $domain ) );


    return $validation_errors;
}

// Save extra registration fields data
add_action('woocommerce_created_customer', 'woo_save_extra_registration_fields_data', 20, 1 );
function woo_save_extra_registration_fields_data( $customer_id ) {

    // Billing Phone Field
    if ( isset( $_POST['billing_phone'] ) ) {
        update_user_meta( $customer_id, 'phone', sanitize_text_field( $_POST['billing_phone'] ) );
        update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
    }

}

2

Answers


  1. Chosen as BEST ANSWER

    LoicTheAztec big thanks, after your hint I started looking for the problem in a different way and found the answer

    Just change this $("#billing_phone").mask("+998 (h999999999"); on this $("#reg_billing_phone").mask("+998 (h99)9999999");

    // mask
    add_action('wp_enqueue_scripts', 'masked_input');
    function masked_input() {
        if (is_checkout()) {
            wp_enqueue_script('masked_input', get_site_url().'/wp-content/JS/jquery.maskedinput.min.js', array('jquery'));
            add_action( 'wp_footer', 'masked_script', 999);
        }
    }
     
    function masked_script() {
        if ( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    
    <script type="text/javascript">
        jQuery( function( $ ) {
            $.mask.definitions['h'] = "[0|1|2|3|4|5|6|9]";
    $("#reg_billing_phone").mask("+998 (h99)9999999");
        });
    </script>
    
    <?php
        }
    }
    

  2. As WooCommerce uses now, more custom tables should need something a bit different when saving the billind_phone.

    Also, you can make it work for checkout and My account registration, with the following:

    // mask
    add_action('wp_enqueue_scripts', 'masked_input');
    function masked_input() {
        // Only on checkout and on My account registration
        if ( ( is_checkout() || is_account_page() ) && ! is_wc_endpoint_url() ) {
            wp_enqueue_script('masked_input', get_site_url().'/wp-content/JS/jquery.maskedinput.min.js', array('jquery'));
    
            if ( wp_script_is( 'jquery', 'done' ) ) {
                add_action( 'wp_footer', 'masked_script', 999);
            }
        }
    }
    
    function masked_script() {
    ?>
    <script type="text/javascript">
        jQuery( function( $ ) {
            $.mask.definitions['h'] = "[0|1|2|3|4|5|6|9]";
            $('[name=billing_phone]').mask("+998 (h99)9999999");
        });
    </script>
    <?php
    }
    
    

    And for saving the billing phone from registration:

    // Save extra registration fields data
    add_action('woocommerce_created_customer', 'woo_save_extra_registration_fields_data', 20, 1 );
    function woo_save_extra_registration_fields_data( $customer_id ) {
        if ( isset( $_POST['billing_phone'] ) ) { // Billing Phone Field
            update_user_meta( $customer_id, 'phone', sanitize_text_field( $_POST['billing_phone'] ) );
    
            $customer = new WC_Customer( $customer_id ); // get an instance of customer object
            $customer->update_meta_data( 'billing_phone', sanitize_text_field($_POST['billing_phone']) );
            $customer->save();
        }
    }
    

    Tested and works on both checkout and My account registration.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search