how to display checkout labels inside fields with WooCommerce

By default, all WooCommerce themes display the field labels on the checkout page outside the fields, as this is actually the most correct way to do it to make the fields easier to understand.

Now, there are times when you will prefer that in an online store these labels are displayed inside the fields, almost always as a way to save space on the page.

I mean this:

Is it better, is it worse? Well, it depends on what for.

• If we talk about readability and accessibility, it is better that the labels are outside the field, basically because they are better read and are always visible even if the user is entering data in the fields.
• If we are talking about optimizing the checkout page for usability, sometimes it will be better for the labels to be inside the field.

In the end, your choice, but if you want to move these field labels inside the fields it is easy to achieve, just add this code to the functions.php file of the active child theme or to a plugin:

/* Checkout labels inside fields */
add_filter( 'woocommerce_checkout_fields', 'checkout_labels_inside_field', 9999 );
function checkout_labels_inside_field( $fields ) {
foreach ( $fields as $section => $section_fields ) {
foreach ( $section_fields as $section_field => $section_field_settings ) {
$fields[$section][$section_field]['placeholder'] = $fields[$section][$section_field]['label'];
$fields[$section][$section_field]['label'] = '';
}
}
return $fields;
}Code language: PHP (php)

Save the changes and you have it, the field labels moved inside the fields.