Set maxlength for checkout postcode field in WooCommerce

Question

I'm trying to delete or increase the default maxlength (nowadays set to 4) on a WordPress site I developed using Woocommerce.

Up to now I've tried all these functions on my childtheme's functions.php

#OPTION 1

function wpse215677_checkout_fields ( $fields ) {
    $fields['postcode']['maxlength'] = 5;
    return $fields;
}
add_filter('woocommerce_default_address_fields', 'wpse215677_checkout_fields');

#OPTION 2 - WITH AND WITHOUT ['custom_attributes']

add_filter( 'woocommerce_checkout_fields' , 'my_override_checkout_fields');

function my_override_checkout_fields( $fields ) {
    $fields['billing']['postcode']['custom_attributes']['maxlength'] = 5;
     $fields['billing']['billing_postcode']['custom_attributes']['maxlength'] = 5;
     return $fields;
}

#OPTION 3 - WITH AND WITHOUT ['custom_attributes']

function my_wc_custom_billing_fields( $fields ) {
    $fields['billing_postcode']['custom_attributes']['maxlength'] = 5;

    return $fields;
}

add_filter( 'woocommerce_billing_fields', 'my_wc_custom_billing_fields' );

function my_wc_custom_shipping_fields( $fields ) {
    $fields['shipping_postcode']['custom_attributes']['maxlength'] = 5;

    return $fields;
}

add_filter( 'woocommerce_shipping_fields', 'my_wc_custom_shipping_fields' );

All of them worked fine on the cart calculator (now I can write any number over 4) but when I go to the checkout page and try to write a number over 4 characters on the postcode (shipping or billing), the input still remains with a maxlength of 4 (I've inspected it with Chrome's tools).

Is there any way I can overwrite the entire input on the checkout to allow me to write more than 4 characters on this input?

Or am i doing something wrong with these functions and that is why they are not working on the checkout page?

7uc1f3r 7uc1f3r · Accepted Answer · 2020-10-10T16:08:59

One way is to do it via jQuery, although the code you have already posted here works without any problems

function action_wp_footer() {
    // Returns true on the checkout page, when false, return
    if ( ! is_checkout() ) return;
    ?>
    <script>
        jQuery(document).ready(function($){
            $( '#billing_postcode' ).attr( 'maxlength', '5' );
            $( '#shipping_postcode' ).attr( 'maxlength', '5' );
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'action_wp_footer' );

Set maxlength for checkout postcode field in WooCommerce

1 Answers