Imágenes en móvil con width:50% y fila vacía en WooCommerce: cómo lo solucioné
Hola, amigos de Piensa para Crear. 👋
Hoy quiero contarte un problema real que me pasó editando una tienda en WooCommerce, porque sé que a muchos les puede pasar lo mismo y perder horas buscando la solución.
El síntoma era claro: en dispositivos móviles las imágenes de producto se mostraban al 50% de ancho, pero la segunda fila quedaba completamente vacía. Un desastre visual que hacía que la tienda pareciera rota.
Después de horas revisando CSS, configuraciones de WooCommerce, ajustes de medios y mil cosas más, la causa no estaba donde pensaba. Estaba en Autoptimize.
Aquí te cuento qué pasó y cómo lo resolví.
🔍 El problema: imágenes al 50% y segunda fila vacía en móvil
Todo empezó cuando estaba editando la tienda y noté que, en móvil, los productos se veían así:
Primera fila: dos imágenes al 50% de ancho.
Segunda fila: vacía.
Las imágenes siguientes aparecían, pero con un hueco raro en medio.
En escritorio todo se veía perfecto. Solo pasaba en móvil.
Lo primero que pensé fue: "esto es un problema de CSS". Así que me puse a probar:
width: auto;→ nada.width: 100%;→ nada.Cambiar estilos en la configuración de WooCommerce → nada.
Revisar la configuración de medios de WordPress → nada.
Inspeccionar el CSS del tema → nada.
Horas perdidas. El problema seguía ahí.
🧠 El diagnóstico: no era CSS, era Autoptimize
Después de mucho buscar, encontré la causa real: una configuración de Autoptimize.
Si no conoces Autoptimize, es un plugin gratuito para optimizar CSS, JavaScript y HTML en WordPress. Es muy útil, pero si se configura mal, puede romper el diseño de tu sitio sin que te des cuenta.
En mi caso, la opción culpable estaba en la pestaña de JS, CSS y HTML:
"¿Agregar archivos CSS?" estaba marcada.
Esa opción combina todos los archivos CSS de tu sitio en uno solo. El problema es que, al hacerlo, algunos estilos se aplican en un orden distinto al original, y eso rompe layouts que dependen de reglas específicas de orden o especificidad.
En mi caso, el CSS del grid de productos de WooCommerce se estaba aplicando mal, y por eso las imágenes quedaban al 50% con una fila vacía.
✅ La solución: cambiar una opción por otra
La solución fue muy simple una vez identificado el problema:
Fui a Ajustes → Autoptimize.
En la pestaña JS, CSS y HTML, desmarqué la opción "¿Agregar archivos CSS?".
Marqué la opción "¿Eliminar el CSS que bloquea el renderizado?".
Guardé los cambios y limpié la caché.
Resultado: el sitio volvió a funcionar con normalidad, las imágenes en móvil se veían bien y la velocidad se mantuvo (incluso mejoró).
🚀 Por qué funciona este cambio
Entender esto te ayuda a no volver a caer en el mismo error:
"Agregar archivos CSS" combina todos los CSS en un archivo. Esto reduce peticiones HTTP, pero puede alterar el orden de los estilos y romper cosas.
"Eliminar el CSS que bloquea el renderizado" hace algo distinto: extrae el CSS crítico (el necesario para mostrar la parte visible de la página) y carga el resto de forma diferida. No altera el orden de los estilos, así que es mucho más seguro.
En la práctica:
| Opción | Qué hace | Riesgo |
|---|---|---|
| Agregar archivos CSS | Combina todo el CSS en uno | Alto: puede romper el orden de estilos |
| Eliminar CSS bloqueante | Carga el CSS crítico primero y el resto después | Bajo: respeta el orden |
Por eso, en la mayoría de casos, es mejor activar "Eliminar CSS bloqueante" y dejar "Agregar CSS" desactivado, especialmente si usas WooCommerce o constructores de páginas como Elementor.
🧩 Mi stack actual: Autoptimize + WP Super Cache
Después de resolver el problema, dejé mi sitio configurado así:
Autoptimize para optimizar CSS y JavaScript (sin agregar CSS, pero sí eliminando el bloqueante).
WP Super Cache para la caché de páginas.
Y funciona de maravilla. El sitio carga rápido, el diseño se ve bien en todos los dispositivos y no he vuelto a tener problemas de layout.
¿Por qué esta combinación?
Autoptimize se encarga de la optimización front-end (CSS, JS, HTML).
WP Super Cache se encarga de la caché de páginas (genera versiones estáticas del HTML).
Juntos cubren lo esencial sin necesidad de plugins de pago.
🛠️ Cómo evitar que te pase lo mismo
Si estás usando Autoptimize en tu tienda WooCommerce, aquí van mis recomendaciones:
✅ Configuración segura para empezar
| Opción | Estado |
|---|---|
| Optimizar código JavaScript | ✅ ON |
| Agregar archivos JS | ⚠️ Solo si tu hosting usa HTTP/1.1 |
| Forzar JS en head | ❌ OFF |
| Optimizar CSS | ✅ ON |
| Agregar archivos CSS | ❌ OFF (aquí estuvo mi error) |
| Eliminar CSS bloqueante | ✅ ON (con Critical CSS configurado) |
| Optimizar HTML | ✅ ON |
| Guardar archivos estáticos | ✅ ON |
🧪 Cómo probar después de cada cambio
Guarda los ajustes de Autoptimize.
Limpia la caché de Autoptimize y de tu plugin de caché.
Abre tu sitio en ventana de incógnito (para evitar caché del navegador).
Revisa en móvil real (no solo en DevTools) que todo se vea bien.
Si algo se rompe, desactiva la última opción que activaste.
🔑 Regla de oro
No actives todas las opciones de Autoptimize de golpe. Activa una, prueba, y si funciona, pasa a la siguiente. Así identificas rápido qué opción causó el problema.
🎯 Conclusión: no siempre es CSS (aunque lo parezca)
Este problema me recordó algo importante: cuando algo se rompe en WordPress, no siempre es culpa del CSS, del tema o de WooCommerce.
A veces el culpable es un plugin de optimización mal configurado. Y lo peor es que puede pasar desapercibido durante semanas hasta que alguien lo nota en móvil.
Si te pasa algo similar:
Desactiva temporalmente Autoptimize y verifica si el problema desaparece.
Si desaparece, activa las opciones una por una hasta encontrar la culpable.
Prioriza "Eliminar CSS bloqueante" sobre "Agregar archivos CSS".
Combina con un plugin de caché como WP Super Cache para el máximo rendimiento.
💬 ¿Necesitas ayuda para optimizar tu WooCommerce o configurar Autoptimize sin romper tu diseño?
En Piensa para Crear ofrecemos servicios de optimización, configuración de caché y solución de problemas en WordPress.
Contáctanos aquí y hablemos.
❓ Preguntas frecuentes
¿Autoptimize puede romper mi tienda WooCommerce?
Sí, si activas la agregación de CSS o JS sin probar. La opción "Agregar archivos CSS" es la más problemática.
¿Qué es mejor: agregar CSS o eliminar el CSS bloqueante?
Eliminar el CSS bloqueante. Respeta el orden de los estilos y mejora el rendimiento sin romper el diseño.
¿Necesito un plugin de caché además de Autoptimize?
Sí. Son complementarios: Autoptimize optimiza archivos, el plugin de caché evita regenerar páginas. WP Super Cache es una opción gratuita y confiable.
¿Cómo sé si mi hosting usa HTTP/2?
Pregúntale a tu proveedor. Si usa HTTP/2 o HTTP/3, no combines archivos (o al menos no es necesario).
¿Puedo usar Autoptimize con WP Rocket?
Sí, pero no dupliques funciones: si WP Rocket ya minifica CSS/JS, no lo hagas también en Autoptimize.
Comentarios
Publicar un comentario