How can I convert woocommerce checkout fields in capital letters

Question

I have a woocommerce checkout page, where customers are writing whatever way they like, all lowercase all uppercase etc.

How can I do the checkout fields of Name, Surname, Address to be in capital letters?

Thank you

Answer 1

If you want the values to display uppercase (or capitalized), then adding CSS to your theme would do the trick.

.your-input-class{
  text-transform: uppercase; /* or you can use 'capitalize' */
}

If you are concerned with how the values are being saved in the database, you would need to add custom code to your website that hooks into the action that saves the checkout fields, which is woocommerce_checkout_posted_data found here.

You can use something like the following to capitalize the users input data. Our example can be "jAnE" and "DOe" for the first and last name.

<?php

add_filter('woocommerce_checkout_posted_data', 'mg_custom_woocommerce_checkout_posted_data');
function mg_custom_woocommerce_checkout_posted_data($data){
  // The data posted by the user comes from the $data param. 
  // You would look for the fields being posted, 
  // like "billing_first_name" and "billing_last_name"

  if($data['billing_first_name']){
    /*
      From jAnE to JANE
    */
    $data['billing_first_name'] = strtoupper($data['billing_first_name']);
  }

  if($data['billing_last_name']){
    /*
      From DOe to DOE
    */
    $data['billing_last_name'] = strtoupper($data['billing_last_name']);
  }

  return $data;
}

The code above has not been tested - please do not use on a production site without testing first.

Note in the above example I am using the strtoupper PHP function, but you can swap that with ucfirst to capitalize the first letter instead of the whole string.

References:

• https://www.php.net/manual/en/function.strtoupper.php
• https://www.php.net/manual/en/function.ucfirst.php