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.
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.
Tabla de contenidos
Personalizar tamaño de imágenes en WooCommerce 2.x
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:
Desde ahí podéis llegar a las siguientes ventanas, aunque, si el mensaje ya no os aparece, podéis llegar desde Apariencia > personalizar:
De ahí seleccionamos WooCommerce, nos vamos a imágenes de producto:
Y de ahí ya podemos ajustar el tamaño de las imágenes.
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!
¡Hola! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
Hola Javier. Hice como explicas en esta entrada e incluso agregué las líneas que indicas. Me redujo las columnas a 1 o 2 (según le indique en el cód) pero el tamaño de los productos sigue siendo el mismo. Uso el tema twenty twelve. si me puedes ayudar te agradezco muchísimo; quisiera que se mostraran 2 productos por fila y un poco más grandes. saludos!
Perdona Sebastían, ayer no te pude responder. ¿Has probado a crear un producto nuevo para ver si las imágenes cogen el nuevo tamaño configurado? Analízalo con Firebug, así podrás hacer los retoques de estilos que sean necesarios. Sin ver la web no te puedo ayudar mucho. Un saludo.
Hola,
Estoy intentando subir fotos y que al clicar sobre ellas se amplien.
Por defecto me queda del mismo tamaño.
Por favor, me orientarías para saber si existe algún tipo de plug in que me pueda ayudar a que en la lista/grilla se enseñe de una manera y al clicar sobre producto, se abra y se amplie dicha foto?
Agradezco!
Hola. No sé si te he entendido bien. Cuando añades una foto entre el texto de la entrada, si la editas, en opciones de visualización tienes una opción que se llama "enlazado a" donde puedes elegir que se abra en una ventana nueva, o en una página diferente, etc. Prueba esas opciones a ver qué tal. No te puedo recomendar ningún plugin porque con estas opciones que te comento me ha sido siempre suficiente. Un saludo.
Excelente entrada, Muchas gracias
Me alegra que te sirva Andrés. Saludos!
Hola, oye no me aparece esa pestaña en la sección de ajustes de Woocommerce... que podría hacer al respecto? Agregar ese tamaño en funciones.php? Es raro pues las imágenes tienen el tamaño adecuado pero se muestran borrosas.
A lo mejor en la última versión han cambiado esa ventana de configuración. Si la ves borrosa y con el tamaño correcto puede que sea porque la subiste de un tamaño inferior y woocomerce le aumentó el tamaño. Y por eso ahora la ves borrosa. Deberás subirla de nuevo y con buena resolución. Un saludo.
Tengo el mismo problema. En la pestaña de producto, sólo me sale el link de general, inventario y producto descargable.
Gracias por el post
He incluido unas capturas nuevas en el post. A ver si ahora os ayuda. Un saludo.
Hola,
He actualizado la versión de Woocommerce y las imagenes de las variaciones se me han quedado muy pequeñas y no veo forma de ponerlas en el tamaño grande sabrias decirme que a podido ocurrir.
Hola Cristina. Siento no poder decirte. Ahora mismo no tengo ninguna web con Woocommerce. Para ayudarte tendría que verlo directamente sobre tu web y estudiarlo. Un saludo.
Hola Javier,
He seguido las mismas instrucciones en los ajustes de imágenes de woocommerce de poner el mismo tamaño para el ancho de la imagen principal y el ancho de la miniatura , pero cuando veo la pagina de un producto específico, sale pixeleada la imagen del producto porque está grande.
Buenos días Alejandro. Ahora te falta volver a subir la imagen con el nuevo tamaño, ya que la que tienes es demasiado pequeña y por eso te sale pixelada. Saludos!
Hola como estas? Sabes que en mi caso, al cargar los productos. Inserto en un layout de todos los productos, recientemente publicados o destacados, y como cada producto tiene una imagen de diferente tamaño, las cajas se ven mas grandes de un producto que de otro, por lo que provocan un desorden visual horrible.
Me entiendo lo que me pasa? me podrias ayudar?
Buenas tardes Juan. Ahí lo más fácil es subir todas las imágenes con el mismo tamaño. Si intentas ajustar el tamaño para que todas se vean igual, después las más grandes se te verán muy pequeñas. Por eso lo mejor es que las trates antes de subirlas. Un saludo, Javier.