Un problema muy común que te puedes encontrar en tu tienda de Woocommerce es que las categorías de productos aparezcan los productos sin una altura común. En este post te vamos a explicar cómo igualar el alto de los productos de Woocommerce.
Índice de contenidos
Porque sucede que el alto de los productos no sea igual
En el caso que nos atañe, el factor que hace que el alto de los producto de Woocommerce sea diferente para todos los productos es el el título. Y puede ser por varios factores:
- Por la longitud del titulo del producto.
- Por el tamaño de la fuente.
- Por el espacio entre letras de la fuente.
Por eso, para solucionar el problema deberemos trabajar con ese elemento.
Igualando el alto de los productos de woocommerce
Vamos a presentar un ejemplo. En la siguiente captura de pantalla tenemos 3 productos. Cómo podrás comprobar el título de los productos no tiene la misma longitud para todos ellos.
.woocommerce-loop-product__title{ min-height:80px; display:flex; align-items:center; }Ten en cuenta el variar el valor del atributo min-height en relación a tus títulos de productos. Ajusta si valor para que su altura mínima no sea más de la que necesitas.
Guardamos los cambios y ya tenemos igualadas las alturas de los productos en las categorías de Woocommerce.
Puedes seguir todos los pasos de lo que hemos explicado en el siguiente vídeo:
Hasta aquí este tutorial en el que te hemos explicado cómo igualar el alto de los productos de Woocommerce. Si tienes alguna duda/pregunta puedes dejarla en los comentarios.
De igual forma si quieres que hablemos en la web sobre algún tema relacionado con WordPress, puedes hacerlo también dejando un comentario.
Muy bueno y simple. Gracias!