Vale que en una tienda online vamos a querer mostrar cuantos más productos en cualquier dispositivo, lo que la mayoría de las veces supone que en los móviles se visualicen 2 columnas para mostrar al menos un par de productos en cada pantalla, y eso está bien.
Pero…
Cuando el cliente llega a la página de pago, a finalizar la compra, el hecho de mostrar los campos que debe rellenar en dos columnas no facilita que digamos que rellene los susodichos campos, al quedar demasiado pequeños a 2 columnas. Otro problema es que como los campos de pago son de distinto tipo, muchas veces se verán mal, descolocados. Vamos, un desastre en todos los casos.
Soy, por este motivo, de la opinión de que los campos a rellenar por los clientes en el pago, en dispositivos móviles, deberían siempre estar a una sola columna, con suficiente espacio como para que pueda ver lo que está escribiendo, y al mismo tiempo facilitar el cambio de campo a campo.
Pues mira tú que bien, da igual lo que haya decidido el desarrollador de tu tema, o de tu plugin de personalización de campos en el pago, puedes siempre forzar a que los campos de la página de finalizar compra se muestren siempre a una columna cuando el cliente haga el proceso de pago desde un móvil.
Lo único que tienes que hacer es añadir un poquito de CSS para que se produzca la magia del código, desde Apariencia → Personalizar → CSS adicional, este:
/* Campos de pago a 1 columna en moviles */
@media( max-width: 480px ){
.woocommerce form.checkout .form-row {
clear: none;
float: none;
width: 100%;
}
}
Tras publicar los cambios tendrás los campos a 1 columna cuando los clientes hagan el pago desde su móvil, o cualquier dispositivo con un ancho de pantalla de un máximo de 480 píxeles, como se especifica en el código.
Todo mucho más ordenado y limpio ¿no crees?
El artículo WooCommerce: Mostrar los campos de pago en una sola columna en móviles lo publicó Fernando Tellado previamente en Ayuda WordPress. Lo que ves aquí es una copia de dicho contenido :/
0 Commentaires