Cómo igualar el alto de los productos de woocommerce sin plugins

Cómo igualar el alto de los productos de Woocommerce

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.

Igualar alto de los productos en las categorias de woocommerce
Para solucionar el problema que se nos plantea vamos a trabajar con CSS y con la clase asignada al título de los productos en el loop: woocommerce-loop-product__title Para ello, desde nuestro administrador nos vamos a apariencia/ personalizar/ css adicional y pegamos el siguiente código CSS:
.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.

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Cómo personalizar la herramienta de buscar de la plantilla Astra Pro

Cómo personalizar la herramienta de buscar de la plantilla Astra

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter Pese a la cantidad de virtudes y opciones de personalización que tiene la plantilla Astra Pro, algo que no nos permite realizar desde sus ajustes es personalizar la herramienta

Cómo crear un formulario multipasos con Elementor

Cómo crear un formulario multipasos con Elementor y Piotnet

¿Tiene formularios largos en su sitio web? ¿Tu analitycs marca visitas en las páginas de formularios y no recibes conversiones?. Los formularios largos desalentan a los usuarios y aumentan el porcentaje de abandono. La alternativa pasa por segmentar los campos del formularios en varias páginas.

Cómo crear un menu vertical con Elementor

Cómo crear un menú vertical en WordPress con Elementor

Una de las características que caracteriza a WordPress es su gran versatilidad para llevar a cabo una tarea. Si en nuestro anterior post explicábamos la creación de un menú vertical con Astra pro y Ultimate addons for Elementor, hoy os enseñaremos cómo crear un menú

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba