• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Dos productos por fila en versión móvil en WooCommerce

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

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

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

css woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Dos productos por fila resultado final

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Formulario de cotización en WooCommerce sin pluginsFormulario de cotización en WooCommerce sin plugins
  • Activar el modo catálogo en WooCommerceActivar el modo catálogo en WooCommerce
  • Cambiar la caja de cantidad a una lista desplegable en WooCommerceCambiar la caja de cantidad a una lista desplegable en WooCommerce
  • Etiqueta de Agotado en lista de productos WooCommerce sin pluginsEtiqueta de Agotado en lista de productos WooCommerce sin plugins
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Tabla de Contenidos en WordPress sin plugins

Ocultar categorías que no están activas en widget de categorías WooCommerce

Desactivar las notificaciones de actualización en WordPress

Saltos de enlace en una misma página en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados