Seguro te ha pasado. Creas un Loop Grid precioso en Elementor para tus productos de WooCommerce. Todo se ve perfecto… hasta que decides añadir un temporizador de oferta o una etiqueta de “¡Nuevo!” solo a algunos productos.
De repente, ¡desastre! La cuadrícula se rompe.
Los productos con la oferta (que ahora son más altos) desalinean toda la fila. Los productos que no la tienen son más cortos y todo parece un desorden. Muchos intentan arreglarlo con “Altura Igual” (Equal Height), pero eso solo hace que los botones queden flotando a diferentes alturas.
Hoy te voy a enseñar el truco CSS profesional para solucionar esto. No vamos a eliminar el bloque de la oferta, vamos a hacerlo invisible pero conservando su espacio.
El Problema: display: none vs. visibility: hidden
El 99% de las veces, este problema ocurre porque usas la Visibilidad Dinámica (Dynamic Visibility) de Elementor Pro, JetEngine u otro plugin. Cuando la condición no se cumple (el producto no está en oferta), el plugin aplica display: none; a tu contenedor.
display: none; le dice al navegador: “Elimina este elemento por completo. No existe y no ocupa espacio”. Y ahí es donde tu diseño colapsa.
La solución es usar visibility: hidden;. Esto le dice al navegador: “El elemento sigue aquí y ocupa exactamente el mismo espacio, pero no lo dibujes, hazlo invisible”.
Punto Clave: Prepara tus Contenedores (Cero Márgenes)
Este truco funciona perfectamente bajo una condición muy importante que mencionas: tus contenedores deben estar limpios.
Para que el “espacio fantasma” que vamos a crear coincida perfectamente con el espacio del temporizador real, debes asegurarte de que tanto el contenedor del temporizador como los elementos que lo rodean (como el título o el precio) no tengan márgenes (margin) o rellenos (padding) personalizados que puedan interferir.
Trabaja con una estructura limpia. Si tu temporizador ocupa 50px de alto, su “espacio fantasma” también ocupará 50px. Pero si le añades un margin-top: 20px;, su espacio fantasma también tendrá ese margen y podría crear un hueco feo.
Mi recomendación: Controla todo el espaciado usando las opciones de Gap (Espaciado) del contenedor principal de tu tarjeta (el que tiene la dirección de columna vertical).
El Código CSS Mágico: Cómo Reservar el Espacio
¡Vamos al grano!
Paso 1: La Lógica de WooCommerce
Lo primero que necesitas saber es que WooCommerce es muy listo. Cuando un producto está en oferta (tiene un precio de oferta y una fecha), WooCommerce añade automáticamente la clase .onsale a la “tarjeta” principal del producto (normalmente una etiqueta <article>).
Usaremos esto a nuestro favor.
Paso 2: El CSS que lo Arregla Todo
En lugar de usar la Visibilidad Dinámica, vamos a mostrar el temporizador en todas las tarjetas, y luego usaremos CSS para ocultarlo en las que no lo necesiten.
Ve a Apariencia > Personalizar > CSS Adicional (o a los Ajustes de Sitio de Elementor > CSS Personalizado) y pega este código:
CSS
/*
* EL TRUCO DE ALINEACIÓN DE GRID DEFINITIVO
* Oculta el temporizador en productos que NO están en oferta,
* pero conserva su espacio para alinear la cuadrícula.
*/
/* Paso 1: Apunta a la tarjeta de producto
que NO (!) tenga la clase .onsale
*/
article.product:not(.onsale) {
/* (Opcional) Puedes descomentar esto para ver
a qué productos estás afectando */
/* border: 1px solid red; */
}
/* Paso 2: Apunta al contenedor de tu temporizador
DENTRO de esas tarjetas sin oferta.
¡¡IMPORTANTE!! Cambia '.cont_timer' por la clase
CSS que tú le hayas puesto a tu contenedor.
*/
article.product:not(.onsale) .cont_timer {
visibility: hidden;
opacity: 0;
transition: none; /* Evita animaciones raras */
}
Explicación del Código:
article.product:not(.onsale): Este es el selector clave. Le decimos a CSS que busque todas las “tarjetas” de producto (article.product) que NO (:not()) tengan la clase.onsale..cont_timer: Después, buscamos el contenedor de tu temporizador (el que tiene la clase.cont_timer) DENTRO de esas tarjetas sin oferta.visibility: hidden;: ¡La magia! Esto lo hace invisible pero sigue ocupando todo su espacio.opacity: 0;: Lo usamos como un refuerzo para asegurar que sea 100% invisible, ya que algunos elementos internos podrían no heredar bien la visibilidad.
Conclusión
¡Y ya está! 🥳
Ahora, todas tus tarjetas de producto tendrán exactamente la misma altura. Las que están en oferta mostrarán el temporizador, y las que no, tendrán un “bloque fantasma” invisible que ocupa el mismo espacio, empujando los títulos y botones hacia abajo de manera uniforme.
Tu cuadrícula quedará perfectamente alineada, profesional y limpia.