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.

Enjoy!

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 CustomizeWoo.com FREE * @author        Rodolfo Melogli * @compatible    WooCommerce 5 * @donate $9     https://businessbloomer.com/bloomer-armada/ */add_filter( 'woocommerce_checkout_fields', 'bbloomer_labels_inside_checkout_fields', 9999 );  function bbloomer_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;}

WooCommerce: Move Labels Inside Checkout Fields .

Navigate