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.
