skip to Main Content

First of all, I’m not a coder my self, therefore the code I’m sharing with you I created myself by copying here and there to try and make it work… but it does not. So would you please help me out?

What I’m trying: make the billing_phone autocomplete="tel" value, become automplete="nope" so it will stop autocompleting that filed and only that one.

I tried many things during the last 10 hours, with no luck, so this is what I got right now on my functions.php file, although it can be completely wrong, I just hope you can help me, and of course, explain your code would be most welcome:

/* Disable autofill phone */
add_action('woocommerce_billing_fields', 'autocomplete_nope');
function autocomplete_nope( $content ) {
    $str_pos = strpos( $content, 'name="billing_phone"' );
    $content = substr_replace( $content, 'value autocomplete="nope"', $str_pos, 0 );
return $content;
}

UPDATE

Based on your anwswers bellow i tried this 2 options, but still no luck, they still send back this in the HTML:

<input type="tel" class="input-text wfacp-form-control" name="billing_phone" id="billing_phone" placeholder="999-999-9999" value="" autocomplete="tel">

First attempt (not working):

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields )
{        
     $fields['billing']['billing_phone']['custom_attributes'] = array( "autocomplete" => "nope" );      
     return $fields;    
}

Updated – Second attempt (not working):

add_action('woocommerce_billing_fields', 'autocomplete_nope');
function autocomplete_nope( $fields ) {
    $fields['billing']['billing_phone']['autocomplete'] = false;
    return $fields;
}

Thanks so much for your time.

2

Answers


  1. Chosen as BEST ANSWER

    finally make it work, not exactly sure what the code below does, but I manage to make it work:

    /* Disable autofill phone */
    function change_autofill( $field, $key, $args, $value ) {
        //  Remove the .form-row class from the current field wrapper
        $field = str_replace('autocomplete="tel"', 'autocomplete="nope"', $field);
        //  Wrap the field (and its wrapper) in a new custom div, adding .form-row so the reshuffling works as expected, and adding the field priority
        $field = '<div autocomplete="none" data-priority="' . $args['priority'] . '">' . $field . '</div>';
        return $field;
    }
    add_filter( 'woocommerce_form_field', 'change_autofill', 10, 4 );
    

  2. The issue of field autocomplete goes far beyond from WooCommerce only. There is an ancient (and large) thread discussing this topic and how Google has handled it with Chrome over the years. Try this code instead:

    /* Disable autofill phone */
    
    add_filter( 'woocommerce_form_field', 'change_autofill', 1, 1 );
    
    function change_autofill( $field) {
        
        $agent = $_SERVER['HTTP_USER_AGENT'];
        
        if (strpos($agent, 'Firefox') !== false) {
            $field = str_replace('autocomplete="tel"', 'autocomplete="off"', $field);
            return $field;
        }   
        else {
            $field = str_replace('autocomplete="tel"', 'autocomplete="none"', $field);
            return $field;
        }      
        
    }
    

    As of June 2021, this is how it should work for most used web browsers. Please, note that this could change with future updates either from Google, Mozilla, Apple, etc. (as it has happened before).

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