Vamos a ver cómo modificar el tamaño de las imágenes de los productos de WooCommerce para que el aspecto de nuestra tienda online sea más atractiva.

Ya vimos en una ocasión cómo cambiar el número de productos a mostrar por fila y al hacer eso puede que nos sea necesario cambiar el tamaño de las imágenes para que se adapte mejor al aspecto de nuestra plantilla.

Como podemos apreciar en esta web, ahora mismo tiene configurada la tienda online para mostrar 4 productos por fila. Si queremos cambiarlo por ejemplo a 2 productos por fila deberemos seguir los pasos descritos en Cómo cambiar el número de productos por fila en WooCommerce.

Una vez realizado el cambio anterior, deberemos averiguar el tamaño nuevo que deberán tener las imágenes de los productos. Jugando con Firebug descubrimos que el ancho reservado para los productos en la zona central (site-main) es de 620px, y que el de cada imagen es 137px más 23px que tiene de margen derecho para que el producto de su derecha no quede pegado a él.

WooCommerce Cambiar Tamano Imagenes Productos 01

Como podemos ver en los ajustes de WooCommerce, el tamaño definido para las imágenes es de 180px. Para mostrar 2 productos por fila necesitaremos que sea de unos 290px. Así que sólo bastaría con cambiar el tamaño en los ajustes de WooCommerce para que los nuevos productos que creemos tengan ese tamaño y los 2 productos por fila ocupen todo el espacio que tienen disponible.

Personalizar tamaño de imágenes en WooCommerce 2.x

WooCommerce Cambiar Tamano Imagenes Productos 02

Personalizar tamaño de imágenes en WooCommerce 3.x

Desde las nuevas versiones de WooCommerce parece que han cambiado las opciones de configuración de los tamaños de las imágenes. Ahora se encuentra en el personalizador del tema, un poco escondido para mi parecer, pero ahí lo tenemos por si necesitamos realizar estos ajustes según nuestra plantilla.

Os dejo unas capturas de pantalla para que podáis localizarlo fácilmente.

Si habéis actualizado recientemente a WooCommerce 3.x os saldrá un aviso como este en la pestaña Productos:

Ajustes WooCommerce Tamaño Imagenes

Desde ahí podéis llegar a las siguientes ventanas, aunque, si el mensaje ya no os aparece, podéis llegar desde Apariencia > personalizar:

Ajustes WooCommerce Tamaño Imagenes

De ahí seleccionamos WooCommerce, nos vamos a imágenes de producto:

Ajustes WooCommerce Tamaño Imagenes

Y de ahí ya podemos ajustar el tamaño de las imágenes.

Ajustes WooCommerce Tamaño Imagenes

Si tenéis algún problema, puede que tengáis que regenerar las miniaturas con el plugin WordPress Regenerate Thumbails.

Regenerar miniaturas con Regenerate Thumbails Plugin

Puede que sea necesario que una vez que hemos modificado el tamaño en los ajustes, tengamos que hacer uso del plugin Regenerate Thumbails para que las miniaturas de los productos ya creados se vuelvan a generar con el tamaño nuevo que hemos definido.

Soporte personalizado

Si necesitas ayuda para realizar lo descrito en el artículo en tu web personal escríbeme (Contactar) explicándome qué necesitas y, sin compromiso, podré darte presupuesto personalizado.

¡Estaré encantado de ayudarte!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies