Aunque a UX y a los expertos en accesibilidad no les gustará esta personalización, es importante saber «lo que es posible» con WooCommerce.
Con respecto al formulario de pago (facturación + envío + notas), hay un útil «wooCommerce_checkout_fieldsHook (Filter) que es ampliamente utilizado por desarrolladores como yo para alterar el comportamiento de los campos de entrada.
En el episodio de hoy, echaremos un vistazo, de hecho, cómo eliminar las etiquetas del campo de pago de su posición predeterminada (arriba campos), y los usaremos como marcadores de posición, para que ahorremos algo de espacio vertical.
¡Disfrutar!
Php Snippet: visualización de etiquetas de campo dentro de cuadros de entrada @ página de pago
/** n*@snippet Move Labels Inside Inputs - WooCommerce Checkout n*@how-to https://tdestudiodesign.com/tutoriales n*@author Tomás Lucas D´Amario, TD Estudio Design n*@compatible WooCommerce 5 n*@community https://tdestudiodesign.com/club */ add_filter( 'woocommerce_checkout_fields', 'tddesign_labels_inside_checkout_fields', 9999 ); function tddesign_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; }
