Limiting the number of characters

Background

Some time ago now our client ComeFruta asked us for an improvement in their online shop that we believe may turn out to be interesting to other users, and that is why today we are sharing it in this tutorial.

Specifically, we were asked to limit the number of characters in some fields of the WooCommerce order form. They needed to limit the number of characters of the Street address fields of the billing form and of the shipping form, and of the Order notes field. The limit had to be set to 50 characters in the first two fields and to 70 characters in the third one.

The reason why they needed to limit the maximum number of characters allowed in these three fields of the WooCommerce order form was that in the automated CSV they send to whichever transport company they use, no more characters were accepted in these fields and they caused them serious problems in the automatic imports.

Solution

After our client’s request we got down to work and created a small PHP function in the functions.php file of the child theme.

This small PHP function takes care of adding a small piece of JavaScript code exclusively to the WooCommerce checkout page that adds the maxlength attribute in the requested fields with the maximum number of characters allowed in each of them:

Obviously, thanks to small modifications to this PHP function and the JavaScript code it contains, you can make other fields of the order form have character limits too, add additional custom attributes to them or modify any existing attribute at will. The options the JavaScript code offers us on the order form, its billing and shipping forms and the different fields that make them up are almost infinite.

We hope you like this little tutorial and find it useful, that you can use it in your online shops and that it solves more than one problem for you in the future.

We look forward to your comments and contributions.