logooneasesoria4

¿Necesita una consulta gratuita?

Mostrar los campos de pago en una sola columna en móviles

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.

campos pago woocommerce 2 columnas

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.

campos pago woocommerce 1 columna

Todo mucho más ordenado y limpio ¿no crees?

¿Te gustó este artículo?

Déjanos tus comentarios..!

11 de mayo de 2023

RECIBE

GRATIS

Recursos para tu web GRATIS.

En agradecimiento por haber leido nuestro blog te ofrecemos algúnos plugins, temas y asesoría para el desarrollo de tu sitio web.
Envía correo y espera respuesta...Gracias..!
baneranunciopluginsbest
Publicaciones Relacionadas
Abrir chat
One Asesoría
Hola 👋
¿Necesita cotizar una página o tienda online, cómo podemos ayudarle..?