Cómo igualar la altura de las imágenes de los productos #SemanaWooCommerce

Si hay algo que pone de los nervios a cualquier gestor de tienda online, y de paso es totalmente horrible de cara a los futuros compradores, es un catálogo de productos en los que cada producto tiene una altura diferente.

Un dolor para la vista, que ofrece un aspecto nada profesional de tu tienda online.

Esto es debido a que tu instalación de WooCommerce, en principio, no sabe de qué tamaño vas a subir tus imágenes, y no realiza ningún ajuste de recorte por defecto.

Horrible ¿verdad?

Vamos a ver varias posibles soluciones a este atentado estético a tu tienda online.

Unificar un recorte a las miniaturas

Un modo rápido que muchas veces funciona es aprovechar los ajustes de WooCommerce para aplicar un recorte uniforme a las imágenes que subas.

Un ejemplo sería así, recortando igual de ancho que de alto (1×1) y definiendo un tamaño, en este caso de 400×400 píxeles.

Otro modo podría ser aplicar un ajuste personalizado como el del siguiente ejemplo, a 4:3 y un tamaño adecuado.

Como verás, en ambos casos hemos conseguido que las imágenes tengan el mismo tamaño, así que hemos solucionado en gran parte el problema.

No obstante, como también podrás comprobar, el resultado no es perfecto, debido a otros dos elementos que conforman la visualización del producto:

  • El título del producto: en unos casos más largo que otros, ocupando más de una línea
  • La información adicional del producto (valoraciones, precio, etc.) que también influyen en el aspecto global de la altura del bloque total del producto.

Así que aún nos quedarán algunos elementos de la ficha de los productos que modificar para conseguir una altura uniforme, vamos a ver cómo cambiar esto.

Unificar los títulos de los productos

Como hemos visto antes, otro de los elementos que puede hacer que tus fichas de producto se muestren a alturas diferentes es el título de los productos.

Luego otra de las modificaciones que tendrías que hacer es tratar de acortar o alargar todos los títulos por igual, para que en el catálogo de productos todos los títulos se vean igual, y fuercen el mismo ancho, sea a una línea o dos o las que sea.

Esto es ya una cuestión de decisiones de cada tienda, pero mi consejo es que aproveches y hagas títulos de longitud consistente, y de paso aproveches a posicionarlos mejor mediante características o detalles de los mismos.

En el ejemplo de la captura anterior puedes ver que he unificado la longitud de los títulos, y queda mucho mejor, pero sigue faltando algo, y es que los botones de añadir al carrito no engañan, y saltan como una alarma en cuanto a la inconsistencia en la altura de las fichas de producto.

Quitar información de los productos

Llegado a este punto solo nos quedaría eliminar – o unificar – la visualización de información de los productos que afecte negativamente a la altura de las fichas de producto.

Aquí recurriremos a un poquito de código, para que apliques lo que sea necesario en cada tienda online.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 ); //Quitar cartel oferta
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 ); //Quitar valoraciones de estrellas

Si usas el tema StoreFront el código es diferente:

add_action( 'woocommerce_before_shop_loop', 'ayudawp_quitar_metas_producto_storefront' );
function ayudawp_quitar_metas_producto_storefront() {
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
}

Utiliza el código que necesites añadiéndolo al final del archivo functions.php del tema (hijo a ser posible) activo.

Ahora ya deberías haber conseguido unas fichas de producto totalmente uniformes en altura.

Solo hay que ver el antes y el después

Extra: Cambia de tema

Pues sí, hay ocasiones en las que cambiar a un tema especialmente preparado para WooCommerce aporta un valor diferencial.

Uno de ellos es Astra, pues por defecto tiene algunas cosas que te evitarán este tipo de disgustos estéticos.

Y es que no hace falta la versión pro de Astra para que todo esto no sea un problema, pero desde una perspectiva diferente.

Y es que Astra (gratis) te permite especificar qué información del producto se mostrará, con lo que las fichas siempre son iguales en altura si previamente configuraste los recortes de imagen.

De este modo puedes, a un clic, configurar si quieres que se muestren siempre las estrellas, tengan o no valoraciones.

O justo lo contrario, que no se muestren.

Y puedes personalizar esta configuración para cualquier otro elemento informativo de los productos, ocultando los que no quieras que se muestren e incluso  cambiándolos de orden, todo desde el personalizador de WordPress.

Y si te lanzas a la versión Pro de Astra entonces la cosa se pone seria.

Puedes hacer muchas más personalizaciones, incluso algunas que hacen desaparecer este problema, como la de aplicar una estructura sólida a las fichas de producto, incluso son borde sombreado y más efectos.

Con ajustes de este tipo ya da prácticamente igual lo que tenga cada ficha de producto porque todas se mostrarán de manera uniforme.

Estos ajustes se aplicarán a cualquier situación en la que se muestren productos, incluso en los relacionados.

Como ves en la captura anterior, aunque los productos tienen elementos (el título) que hacen que tengan una altura diferente, al unificarse en la ficha sombreada ofrecen una estética uniforme.


Espero que estos consejos te ayuden a mostrar  un catálogo de productos de altura uniforme.

Si quieres aprender más, casi todo, sobre las imágenes en WooCommerce te recomiendo la siguiente guía…

Imágenes en WooCommerce – Casi todo lo que tienes que saber

(2 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

1 comentario en “Cómo igualar la altura de las imágenes de los productos #SemanaWooCommerce”

  1. Muy buena publicación Fernando, pero me gustaría saber de que forma has conseguido que los títulos tengan una longitud consistente, mediante CSS?

    Saludos!

Deja un comentario

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

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido