Disable autocomplete phone billing Woocommerce

Question

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.

Could you please check this - https://stackoverflow.com/questions/31653634/woocommerce-enforce-minimum-length-phone-number-field. Maybe it's help you. — Dmitry Leiko, Feb 05 '21 at 15:10
Try this inside your hooked function (removing your code before inside it): `$fields['billing']['billing_phone']['autocomplete'] = false;` where variable `$content` should be replace by `$fields` everywhere. — LoicTheAztec, Feb 05 '21 at 15:12
The suggested link seems very similar to what i need, but cant make it work either. Loic, i have done (or at least think it is what you suggested) but still does not work, check the edit on my question and see if that is what you meant. — Andres Molina Perez-Tome, Feb 05 '21 at 15:16
Still no luck, although im using a specific plugin for my shops, underneath it usses woocommerce, so I dont think that should affect. But the result with your code is still the same. — Andres Molina Perez-Tome, Feb 05 '21 at 15:26

score 1 · Answer 1 · answered Feb 05 '21 at 16:44

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 );

Joseph L. · Answer 2 · 2021-06-24T15:41:43.150

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).

score 0 · Answer 3 · answered Apr 28 '23 at 10:20

After trying many solutions with spoofing (and almost breaking the checkout) simple autocomplete=off and autocomplete=none/nope, I started to read many many threads on this issue and apparently the only real way to prevent autocomplete from the browser, automatically, it's to specify new-password.

An example of the script I use in my checkout pages:

jQuery(document).ready(function ($) {
      $("input, select, textarea").attr("autocomplete", "new-password");
});

This way, the autocomplete option is present, but it will not be filled unless the user desires this expressly!

Disable autocomplete phone billing Woocommerce

3 Answers3