Dos productos por fila en versión móvil en WooCommerce

[ hace 10 meses ] [ Autor: Jhon Marreros Guzmán ][ Tutoriales - Básico] [ ]

En este artículo veremos cómo mostrar dos productos por fila en la versión móvil de un sitio web que usa WooCommerce. Haremos los cambios directamente a través de código CSS.

Resultado Final

Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen:

Código CSS para mostrar dos productos por fila

Puedes agregar el siguiente código en el archivo style.css de tu tema hijo, o si quieres ver formas alternas para agregar código CSS, puedes revisar el artículo para agregar CSS en WordPress de manera correcta.

@media(max-width:768px){
  .woocommerce ul.products li.product {
    padding:5px;
    width: 50%;
    float: left;
  }  
}

Conclusión

Como has podido comprobar, si tu tema no tiene la opción de cambiar la cantidad de productos por fila en móvil, puedes hacerlo directamente usando código CSS.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.