Introducción
Este artículo explica en detalle cómo cambiar el número de columnas de la tienda de WooCommerce usando CSS (y ofrece una alternativa con PHP para temas que respetan el filtro). Encontrarás explicaciones sobre selectores comunes, diferentes métodos (CSS Grid, Flexbox y técnicas basadas en porcentajes), ejemplos listos para copiar y pegar, y recomendaciones para aplicar los cambios sin romper el diseño o la respuesta móvil.
Antes de empezar — qué debes comprobar
- Identifica el selector que usa tu tema: abre la tienda en el navegador y usa Herramientas de desarrollador (Inspector) para localizar la lista de productos. Habitualmente el contenedor es ul.products dentro de un elemento con clase woocommerce.
- Comprueba si tu tema ya aplica display: grid o display: flex a ul.products. Eso condiciona la técnica recomendada.
- Si tu tema incluye clases como woocommerce.columns-3 o .columns-4, puedes apuntar a esas clases para sobreescribir estilos por defecto.
- Ten a mano cómo añadir CSS en tu instalación: Apariencia → Personalizar → CSS adicional, un child theme (style.css) o un plugin de CSS personalizado.
Métodos para cambiar columnas
1) CSS Grid — solución moderna y robusta
Si no hay estilos que impongan una estructura incompatible, usar CSS Grid es la forma más limpia. Define el número de columnas con grid-template-columns y adapta con media queries para móviles.
Ejemplo: forzar 4 columnas en escritorio, 3 en tablet y 1 en móvil:
/ Forzar columnas con CSS Grid /
.woocommerce ul.products {
display: grid
grid-template-columns: repeat(4, 1fr)
gap: 1.5rem / espacio entre items /
list-style: none
margin: 0
padding: 0
}
.woocommerce ul.products li.product {
width: auto / evitar anchos heredados /
margin: 0
}
/ Tablet /
@media (max-width: 980px) {
.woocommerce ul.products {
grid-template-columns: repeat(3, 1fr)
}
}
/ Móvil /
@media (max-width: 640px) {
.woocommerce ul.products {
grid-template-columns: 1fr
}
}
2) Flexbox — compatible y fácil de ajustar
Si tu tema usa flexbox o prefieres mantener esa técnica, usa reglas que controlen el ancho base de cada producto mediante la propiedad flex y max-width. Incluye media queries para adaptar columnas en pantallas pequeñas.
/ Forzar 3 columnas con Flexbox /
.woocommerce ul.products {
display: flex
flex-wrap: wrap
gap: 1.5rem
margin: 0
padding: 0
}
.woocommerce ul.products li.product {
flex: 0 0 calc(33.333% - 1.5rem)
max-width: calc(33.333% - 1.5rem)
}
/ Tablet -> 2 columnas /
@media (max-width: 980px) {
.woocommerce ul.products li.product {
flex: 0 0 calc(50% - 1.5rem)
max-width: calc(50% - 1.5rem)
}
}
/ Móvil -> 1 columna /
@media (max-width: 640px) {
.woocommerce ul.products li.product {
flex: 0 0 100%
max-width: 100%
}
}
3) Técnica clásica con porcentajes (útil si el tema usa floats o reglas antiguas)
Si tu tema aplica anchos mediante floats o reglas antiguas, puedes forzar un ancho porcentual por producto. Añadir !important puede ser necesario si el tema aplica reglas con más especificidad.
/ 4 columnas /
.woocommerce ul.products li.product {
width: 25% !important
float: left
box-sizing: border-box
margin: 0
padding: 0 1rem / opcional para separación /
}
/ Media queries para adaptar /
@media (max-width: 980px) {
.woocommerce ul.products li.product { width: 33.3333% !important }
}
@media (max-width: 640px) {
.woocommerce ul.products li.product { width: 100% !important float: none }
}
Ejemplos rápidos — CSS para 2, 3 y 4 columnas
Copiar y pegar según el número de columnas que quieras forzar.
2 columnas
/ Forzar 2 columnas /
.woocommerce ul.products {
display: grid
grid-template-columns: repeat(2, 1fr)
gap: 1rem
}
@media (max-width: 640px) {
.woocommerce ul.products { grid-template-columns: 1fr }
}
3 columnas
/ Forzar 3 columnas /
.woocommerce ul.products {
display: grid
grid-template-columns: repeat(3, 1fr)
gap: 1rem
}
@media (max-width: 980px) {
.woocommerce ul.products { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px) {
.woocommerce ul.products { grid-template-columns: 1fr }
}
4 columnas
/ Forzar 4 columnas /
.woocommerce ul.products {
display: grid
grid-template-columns: repeat(4, 1fr)
gap: 1rem
}
@media (max-width: 980px) {
.woocommerce ul.products { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 640px) {
.woocommerce ul.products { grid-template-columns: 1fr }
}
Alternativa con PHP (cuando el tema respeta el filtro)
Algunos temas respetan el filtro de WooCommerce loop_shop_columns. Si prefieres cambiar la columna por defecto desde código, añade esto en el functions.php de un child theme o mediante un plugin como Code Snippets:
// Cambiar columnas por defecto de la tienda WooCommerce
add_filter(loop_shop_columns, mi_numero_columnas_tienda, 999)
function mi_numero_columnas_tienda( columns ) {
return 4 // Cambia a 4 columnas
}
Consideraciones prácticas y resolución de problemas
- Prioridad de estilos: si tus reglas no surten efecto, usa reglas más específicas o !important como último recurso. Ejemplo: .site .woocommerce ul.products li.product { width: 25% !important }
- Reglas del tema: algunos temas inyectan estilos inline o CSS con alta especificidad localiza esas reglas y sobreescríbelas con selectores igual de específicos.
- Caché: borra la caché del sitio y del navegador tras aplicar cambios, y purga cualquier CDN (Cloudflare, etc.).
- Regenerar miniaturas: cambiar columnas no obliga a regenerar imágenes, pero si tu diseño muestra imágenes con proporciones raras, considera usar un plugin para regenerar miniaturas.
- Compatibilidad responsive: siempre prueba en varias resoluciones. Evita forzar muchas columnas en pantallas pequeñas.
- Pruebas en child theme: aplica cambios en un child theme para evitar perderlos con actualizaciones del tema.
Selector específicos de algunos temas
Dependiendo del tema encontrarás variaciones. Aquí algunos ejemplos comunes de selectores que puedes necesitar apuntar:
- .woocommerce ul.products — selector genérico y el más usado.
- .woocommerce .products o ul.products.columns-3 — algunos temas añaden clases con el número de columnas.
- .site .woocommerce ul.products li.product — aumenta especificidad si otras reglas se sobreponen.
Buenas prácticas
- Trabaja en un entorno de pruebas o usa un child theme.
- Aplica cambios incrementales y comprueba resultados en distintos dispositivos.
- Mantén el CSS organizado: separa reglas para escritorio y media queries.
- No abuses de !important. Úsalo sólo cuando no puedas conseguir la prioridad con selectores más específicos.
Recapitulación rápida
La forma más recomendada hoy en día es usar CSS Grid para controlar el número de columnas de forma clara y responsive. Flexbox también funciona muy bien. Si tu tema no permite cambios por CSS fácilmente, como alternativa puedes usar el filtro PHP loop_shop_columns. Siempre prueba en móvil y borra cachés después de aplicar cambios.
Leave a Reply