Cómo modificar el tamaño de las imágenes de la galería en Woocommerce

Hoy he tenido que modificar el tamaño de la galería de producto que viene por defecto en Woocommerce, en concreto para que en las páginas de producto la foto no se apreciase pixelada.

El problema

El tema «Onea» permite una plantilla para las páginas de producto de Woocommerce en la cuál las imágenes de la galería de producto se apilan debajo de la imagen principal.

En la captura podemos ver la imagen principal y justo debajo la primera de la galería, si ves la imagen al 100% notarás un pixelado notable en la imagen de abajo.

Como habrás notado, se trata de joyas, sector en el que el diseño lo es todo, y este defecto no era tolerable.

Si vamos al inspector de elementos veremos que la imagen que se está pintando ahí tiene 300px de ancho pero se ajusta al 100% de un elemento de más de 600px, de ahí la distorsión. Veamos como solucionarlo.

Curiosamente, el autor del tema no tuvo esto en cuenta cuando creó la plantilla de producto.

La solución

A mi me ha llevado varias horas pelearme con este problema hasta que he visto dónde se «pintaba» el tamaño de la foto del thumbnail de la galería de fotos en la página de producto de Woocommerce, pero te dejo una solución que puedes aplicar en un minuto.

Resulta que en el archivo includes/wc-template-functions.php dentro del core de Woocommerce hay una función llamada wc_get_gallery_image_html que es la que crea estos elementos html. En ella se llama al filtro woocommerce_gallery_image_size para definir el tamaño que tendrá la «miniatura» de la imagen de la galería.

Por defecto Woocommerce indica que tome el tamaño «thumbnail» y eso está bien para la mayoría de los casos, pero no para el nuestro. Por tanto debemos engancharnos a ese filtro y pasarle el tamaño que queramos. Se hace poniendo este código en el functions.php de tu theme si es un child theme, o en un plugin.

function tu_funcion( ) {
    $size = apply_filters( 'woocommerce_gallery_medium_size', apply_filters( 'woocommerce_gallery_medium_size', 'full' ) );
    return $size;
}
add_filter( 'woocommerce_gallery_image_size', 'tu_funcion' );

Como ves en el código le estamos diciendo a WordPress a través de este filtro que tome la imagen de tamaño medio para pintarla en este elemento.

Y funciona como un tiro.

Veamos el resultado final:

Como puedes ver ahora las miniaturas de la galería tienen ya una apariencia correcta.

Espero haberte ayudado, si ha sido así, cuéntamelo en un comentario.