Cambiar tamaños de imagen en Woocommerce

Cuando se agregan imágenes a nuestra tienda WooCommerce las define dependiendo del caso en el que se vaya a utilizar, estos casos podrían ser alguno de los siguientes:

  • woocommerce_thumbnail: se utiliza en las «cuadrículas» del producto en lugares como la página de la tienda.
  • woocommerce_single: se utiliza en la vista simple del producto.
  • woocommerce_gallery_thumbnail: se usa debajo de la imagen principal en la página simple del producto para cambiar la galería.

Teniendo en cuenta los 3 casos en los que la imagen puede ser redimensionada según su uso hay que tener en cuenta sus valores predeterminados, los cuales son los siguientes:

  • woocommerce_single muestra la imagen completa del producto, tal como se cargó, por lo que siempre está sin recortar de forma predeterminada. El valor predeterminado es 600px de ancho.
  • woocommerce_gallery_thumbnail siempre se recorta en forma cuadrada y el valor predeterminado es 100 × 100 píxeles. Se utiliza para navegar por las imágenes de la galería.
  • woocommerce_thumbnail tiene un ancho predeterminado de 600 px, recortado en forma cuadrada para que las cuadrículas del producto se vean ordenadas. El propietario de la tienda puede personalizar la relación de aspecto para el recorte.

Es importante tener en cuenta que, a pesar de los anchos de imagen reales que se establecen, los temas pueden cambiar en última instancia el tamaño de las imágenes que se muestran mediante CSS, y los anchos de las imágenes pueden estar limitados por el ancho de la cuadrícula / columna del producto.

Los temas pueden definir los distintos tamaños de las imágenes

A partir de WooCommerce 3.3.0, los temas pueden declarar qué tamaños deben usarse al declarar la compatibilidad con WooCommerce. Si un tema define los tamaños de imagen (anchos), el propietario de la tienda no podrá cambiarlos, pero el tamaño definido debería ser el óptimo para el tema.

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 200,
'gallery_thumbnail_image_width' => 100,
'single_image_width' => 500,
) );

Entonces, por ejemplo, si quisieramos cambiar las miniaturas de la galería para que sean imágenes sin recortar de 150x150px, podemos usar el siguiente código:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 150,
'height' => 150,
'crop' => 0,
);
} );

Al llamar a funciones de WordPress que corresponden al tamaño de una imagen, por ejemplo wp_get_attachment_image_src, se deben utilizar los nombres de los tamaños de la imagenes, los cuales son:

  • woocommerce_thumbnail
  • woocommerce_single
  • woocommerce_gallery_thumbnail

Los propietarios de las tiendas aún podrán controlar la relación de aspecto y el recorte.

Ajustar los tamaños de las imágenes en el personalizador

El personalizador aloja las opciones que controlan las miniaturas en WooCommerce.

Si el tema declara tamaños de imagen, la sección superior se ocultará y solo estará visible la opción de recorte (cropping).

Al cambiar la opción de recorte, o los anchos, se actualizará la vista previa en el lado derecho para mostrar cómo se verán las cosas. Los cambios no serán visibles para los clientes hasta que se guarden los cambios en el personalizador y las miniaturas se hayan regenerado a las nuevas dimensiones.

La sección de recorte de miniaturas del personalizador permite a los propietarios de las tiendas seleccionar una de las tres configuraciones de proporción de recorte para las imágenes del catálogo:

  • 1: 1 (recorte cuadrado)
  • Personalizado (el propietario de la tienda puede ingresar una relación de aspecto personalizada)
  • Sin recortar (conservar la relación de aspecto de una sola imagen)

Las dimensiones reales de la imagen se calculan en función de la opción de recorte seleccionada y el ancho de la imagen.

Cambiar el tamaño de la imagen mediante ganchos (hooks)

Si bien los temas pueden fijar tamaños de imagen en ciertos anchos, y los propietarios de las tiendas pueden controlar los anchos y las relaciones de aspecto, si necesita más control sobre los tamaños de las miniaturas, hay algunos hooks disponibles que podemos utilizar.

WooCommerce utiliza la función wc_get_image_size para obtener las dimensiones del tamaño de la imagen. El valor de retorno de esto se pasa a través del siguiente filtro:

woocommerce_get_image_size_ {SIZE_NAME_WITHOUT_WOOCOMMERCE_PREFIX}

Si usamos este hook, se le pasará una variedad de tamaños en forma de arreglo, similar a esta:

array(
'width' => 200,
'height' => 200,
'crop' => 1,
)

No recomendamos que los complementos y temas sigan este camino porque quitan el control al propietario de la tienda y su configuración no será respetada, pero la opción está disponible para quienes lo quieran utilizar.

Después de realizar cambios en los tamaños de las imágenes, es posible que deba volver a generar las miniaturas para que los nuevos tamaños se utilicen para las imágenes existentes, Esto podemos hacerlo instalando el siguiente plugin Regenerate Thumbnails.

Updated on 17 mayo, 2021

Related Articles