El problema es el texto que no tiene la misma longitud en cada artículo. Lo único que se me ocurre es que pongas una altura fija para el texto. Prueba en el menú Apariencia – Personalizar – CSS Adicional, lo siguiente:
@media only screen and (min-width: 480px) {
li.title {
height:60px;
}
}
No afectará a los móviles, si al resto de dispositivos. Calcula para cuatro líneas aumentando 60px. En títulos cortos se verá un espacio en blanco pero quedará alineado.
Otra cosa que tienes que tener en cuenta es el tamaño de las imágenes, todas deben tener el mismo para que se vea a la misma altura.
Hola, tengo el mismo problema , no puedo alinear los botones del añadir al carrito para el tema OceanWp.
Me salen descuadrados los botones cuando el cadena de texto del titulo del productos es mas largo.
Hola @maxzu
La solución es del mismo tipo, tienes que definir tamaños fijos para los espacios de texto. Si nos indicas la url donde se vea el error (no captura sino la url) te podemos dar más datos.
Gracias @jose64 , aplique el codigo que escribiste y lo soluciono 😀
hola buenas tardes agrege el codigo css que dejaron arriba pero solo se soluciono en la version de pc como hago para que afecte tambien en la version mobile? mi pagina es dezetec.com y uso el tema oceanwp
Hola,
- Las diferentes longitudes en los nombres de producto hacen que ocupen diferente cantidad de líneas, normalmente entre una y tres.
- Las estrellas de valoración de productos (cuando están presentes sólo en algunos de ellos).
Con un poco de CSS esto se puede solucionar, el truco acá es hacer que todos ocupen la altura que ocupa el que tiene el título más largo, que normalmente será de 55px para los títulos que ocupen hasta tres líneas (aunque puede ser incluso más).
El CSS depende de muchas cosas, sobre todo de tu plantilla, pero éste funcionará con la gran mayoría de ellas:
ul.products li.product h2 {
min-height:55px;
}
En caso de que no te lo tome podrías intentar agregando !important o inclusive cambiando las medidas en min-height:
ul.products li.product h2 {
min-height:55px !important;
}
Ahora sólo quedadaría solucionar el asunto de la diferencia de altura debido a que unos muestran estrellas, otros el cartel de oferta, otros las dos cosas y otros ninguna. Generalmente Woocommerce suele darte la opción para deshabilitar estas opciones pero en caso de que no lo tengas cortamos por lo sano y evitamos que en las páginas de listado de productos se muestren estas características:
ul.products li.product .star-rating, ul.products li.product .onsale {
display:none;
}
Y listo! Ahora todos los productos quedarán perfectamente alineados.
Espero haber ayudado a la comunidad. Saludos!
@helong Si se ha solucionado el problema planteado, porfavor cambiá el estado a Solucionado así la comunidad puede colaborar mucho mejor.
