Home » WooCommerce: Move Labels Inside Checkout Fields

WooCommerce: Move Labels Inside Checkout Fields

by Tutor Aspire

Although UX and accessibility experts won’t like this customization, it’s still important to know “what’s possible” with WooCommerce.

In regard to the checkout form (billing + shipping + notes), there is a useful “woocommerce_checkout_fields” hook (filter) that is widely used by developers like me to alter the behavior of input fields.

In today’s episode we will take a look, indeed, at how to remove the checkout field labels from their default position (above fields), and use them as placeholders instead, so that we save up some vertical space.


Once the snippet below is active, your WooCommerce checkout fields will look like this; field labels will now display inside their respective input fields.

PHP Snippet: Display Field Labels Inside Input Boxes @ Checkout Page

 * @snippet       Move Labels Inside Inputs - WooCommerce Checkout
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 5
 * @donate $9     https://tutoraspire.com

add_filter( 'woocommerce_checkout_fields', 'tutoraspire_labels_inside_checkout_fields', 9999 );
function tutoraspire_labels_inside_checkout_fields( $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;

You may also like