WooCommerce: Mover etiquetas dentro de los campos de pago

Aunque a los expertos en UX y accesibilidad no les gustará esta personalización, sigue siendo importante saber "lo que es posible" con WooCommerce.

Con respecto al formulario de pago (facturación + envío + notas), hay un gancho (filtro) útil " woocommerce_checkout_fields " que los desarrolladores como yo usan ampliamente para alterar el comportamiento de los campos de entrada.

En el episodio de hoy, veremos cómo eliminar las etiquetas de los campos de pago de su posición predeterminada (sobre los campos) y usarlas como marcadores de posición, de modo que ahorremos algo de espacio vertical.

¡Disfrutar!

Una vez que el fragmento a continuación esté activo, sus campos de pago de WooCommerce se verán así; las etiquetas de campo ahora se mostrarán dentro de sus respectivos campos de entrada.

Fragmento de PHP: mostrar etiquetas de campo dentro de los cuadros de entrada en la página de pago

/**
 * @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;
}

Deja una respuesta Cancelar la respuesta

WooCommerce: Mover etiquetas dentro de los campos de pago

Fragmento de PHP: mostrar etiquetas de campo dentro de los cuadros de entrada en la página de pago

(adsbygoogle = window.adsbygoogle || []).push({});