Tabla de contenidos
Introducción
De forma predeterminada, la mayoría de los temas de WooCommerce, por no decir que todos tienen la configuración para mostrar las etiquetas de campo en la página de pago fuera de los campos, es decir, sobre el campo, tendremos un texto explicativo de este mismo, ya que esta es la forman la que WooCommerce trabaja estos para que sean más fáciles de entender por la clientela y por el propio usuario que por primera vez está accediendo a un sitio WooCommerce.
Si bien esto es normal, hay ciertas ocasiones en donde es preferible que en una tienda online muestren estas etiquetas dentro de los campos, casi siempre como una forma de ahorrar espacio en la página y optimizar la vista y estilo de nuestra página de finalizar compra.
Por qué utilizar un placeholder en lugar del label
Es mejor utilizar una u otra opción, dependiendo de que necesitemos para nuestra tienda, por ejemplo:
En este caso, al hablar de lo que seria legibilidad del sitio o bien la accesibilidad para el cliente, es mejor y más vistoso que las etiquetas estén ubicadas en la parte externa de estos campos, es decir, fuera del campo, tanto porque se leen mejor como también porque siempre están visibles aunque el usuario esté introduciendo datos en los campos.
Si estamos hablando de optimizar la usabilidad de la página de pago, en algunas ocasiones es mejor que estas etiquetas estén contenidas dentro del campo.
Como implementar placeholders en campos de woocommerce
Al final, es nuestra elección, pero si deseamos mover estas etiquetas de campo dentro de los mismos, simplemente tenemos que agregar un código a nuestro archivo functions.php, que está ubicado en:
Cpanel > Administrador de archivos > Publi_html > Dominio > wp-content > themes > Tema utilizado o tema hijo > archivo functions.php
/* Textos de descripcion dentro del input woocommerce */
add_filter( 'woocommerce_checkout_fields', 'checkout_labels_inside_field', 9999 );
function checkout_labels_inside_field( $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;
}
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
