Cómo mostrar las etiquetas dentro de los campos al finalizar compra en WooCommerce

Etiquetas fuera de los campos en WooCommerce - MARIO GÓMEZ LUELMO
¿Quieres cambiar el aspecto de tu página de finalizar compra en WooCommerce? ¿Quieres mover las etiquetas de los campos dentro de los mismos? ¡Descubre cómo hacerlo!

Índice de contenidos

Por defecto, todos los temas para WooCommerce muestran las etiquetas de los campos que tiene que rellenar el cliente en la página de finalizar compra fuera de los campos. En realidad es el modo más correcto de hacerlo para facilitar la comprensión de los campos, pero en ocasiones preferirás que esas etiquetas se muestren dentro de los campos…

Etiquetas fuera de los campos en WooCommerce - MARIO GÓMEZ LUELMO

Casi siempre es un modo de ahorrar espacio en la página, ya que al ir las etiquetas dentro de los campos se aprovecha más el espacio de la misma. Me refiero a esto:

¿Es mejor, es peor? Pues depende para qué.

  • Si hablamos de legibilidad y accesibilidad la mejor opción es que las etiquetas estén fuera del campo, básicamente porque se leen mejor y siempre están visibles aunque el usuario esté introduciendo sus datos en los campos.
  • Si hablamos de optimización de la página de finalizar compra a nivel de usabilidad, en ocasiones será mejor que las etiquetas estén dentro del campo.

Al final tú eliges.

Si quieres seguir adelante y prefieres mover estas etiquetas de los campos dentro de los campos es muy fácil de conseguir. Solo tienes que añadir este código que te facilito al archivo functions.php del tema hijo activo en tu página web o, mejor, a tu propio plugin de funciones personalizadas:

/* Etiquetas de los campos dentro del campo al finalizar compra */
add_filter( 'woocommerce_checkout_fields', 'etiquetas_dentro_finalizar_compra', 9999 );
function etiquetas_dentro_finalizar_compra( $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;
}

Guarda los cambios y ya lo tienes. Ahora las etiquetas de los campos habrán sido movidas dentro de los mismos. 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ver más

  • Responsable: Mario Gómez Luelmo.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a 1&1 IONOS España S.L.U. que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.