how to display checkout labels inside fields with WooCommerce

woo expert

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.

How useful was this post?

Click on a smiley to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top