Evitar imágenes de productos borrosas en WooCommerce

Un problema muy común cuando estás empezando con WooCommerce y con el que yo mismo he lidiado, es el del tamaño de las imágenes de productos. Si no usas las dimensiones (ancho x alto) correctas en los archivos de las fotos de tus productos, estas se mostrarán con una calidad muy pobre. Para que no te ocurra eso, voy a dedicar este artículo a explicarte qué aspectos debes tener en cuenta para evitar imágenes de productos borrosas en WooCommerce.

Como ya te habrás fijado, la inmensa mayoría de plantillas para WooCommerce muestran las imágenes de producto en formato cuadrado, esto quiere decir que la foto del producto debe tener el mismo ancho que alto, de lo contrario se mostrará recortada. Además, cada plantilla usa unas dimensiones diferentes para mostrar las fotos del catálogo de productos, lo que hace aún más difícil saber cuál es el tamaño de foto correcto que debemos usar. Pero no te preocupes, todo esto es muy sencillo de configurar, si sigues las recomendaciones que te voy a explicar a continuación.

Tipos de imágenes en WooCommerce

En WooCommerce existen 3 (ahora son 2) tipos de imágenes de producto cada una con unas dimensiones específicas. Dependiendo de qué página se esté visualizando en la tienda, se usarán un tipo de imagen u otra. Los tipos de imágenes de los que hablo son:

  • Imágenes de Catálogo. Especifica las dimensiones de cada imagen del catálogo de productos.(Este tipo de imagen ya no se usa)
  • Imagen principal del Producto. Indica el tamaño utilizado en la imagen principal de la ficha de producto.
  • Vistas en Miniatura del producto. Este tamaño se aplica generalmente para la galería de imágenes en la ficha del producto.

Cada plantilla de WooCommerce tiene sus propias dimensiones para estos 2 tipos de imágenes de producto. Si usas una plantilla premium de WooCommerce lo lógico es que en la documentación de la plantilla vengan especificadas las dimensiones correctas que debes usar en las fotos de productos.

¿Cómo corregir el efecto de fotos borrosas o pixeladas en WooCommerce?

El origen del problema de las fotos borrosas en WooCommerce es que las dimensiones (ancho x alto) de los tipos de imágenes que he explicado antes son inferiores a las que realmente usa la plantilla. Es decir, si en la página de catálogo de productos, la plantilla que estás usando tiene definido un tamaño de 150×150 píxeles por cada foto de producto y después en la configuración de WooCommerce tienes configurado que las imágenes de catálogo tengan unas dimensiones de 100×100 píxeles, entonces tu tema de WooCommerce mostrará las fotos de productos pixeladas como se aprecia en la siguiente imagen:

Fotos de productos borrosas en WooCommercePara evitar que ocurra esto, lo primero que hay que hacer es conocer el ancho y alto usado por la plantilla para mostrar las fotos. La manera más fácil de conocer estos valores es usar la función «Inspeccionar elemento» (si estás usando Chrome como navegador) o la función «Ver información de la imagen» (si estás usando Firefox). Yo voy a mostrarte cómo hacerlo con Chrome, para ello haz clic derecho sobre la foto de producto y después clic en «Inspeccionar elemento«.

Conocer dimensiones fotos WooCommerce en Chrome

Después de esto se abrirá la herramienta de inspección de elementos y dentro podrás ver el código fuente de la foto que acabas de inspeccionar destacado en azul. Lo único que debes hacer es situar el cursor del ratón encima de esas líneas de código y ya podrás ver la información a cerca de las dimensiones reales que está usando tu plantilla WooCommerce.

Dimensiones fotos plantilla WooCommerce
Haz clic para agrandar la imagen.

Como puedes apreciar en la imagen anterior, en este caso las dimensiones que está usando la plantilla (133×133 píxeles) son mayores que las dimensiones que hay configuradas en WooCommerce (100×100 píxeles) y por eso se muestra la foto con poca calidad.

Una vez conocemos las dimensiones reales que está usando la plantilla, sólo falta configurar los tipos de imágenes en WooCommerce con las mismas dimensiones.

Esto se hace desde «WooCommerce > Ajustes > Productos > Mostrar» y abajo en la sección «Tamaño de imágenes de productos» introducimos las dimensiones que usa la plantilla para cada tipo de imagen y hacemos clic en «Guardar cambios«.

Puedes hacerlo desde «Apariencia > Personalizar > WooCommerce > Imágenes de producto» introduciendo los valores de ancho que usa tu tema tanto para la imagen principal como para las de miniatura.

En este ejemplo concreto mi plantilla usa los siguientes valores:

Cambiar ancho por alto en imagen de productos de tienda WooCommerce

Esta configuración soluciona el problema para las nuevas fotos de productos que publiquemos en la tienda a partir de ahora, pero no va a afectar a las fotos de productos que ya hay publicadas.

Para que la nueva configuración de tamaños afecte a todas las fotos de productos, hay que emplear un plugin llamado Regenerate Thumbnails. Simplemente una vez tengas instalado y activado el plugin, entra en «Herramientas > Regen. Thumbnails«, haz clic en el botón «Regenerate All Thumbnails» y espera a que se redimensionen el 100% de las imágenes.

Redimensionar tamaños imágenes productos en WooCommerce

Aquí puedes ver una comparación de la calidad de la imagen antes y después de configurar los tamaños de imagen en WooCommerce y redimensionarlas con el plugin Regenerate Thumbnails.

Corregir problema fotos borrosas en WooCommerce
Haz clic para agrandar.

Esto es todo lo que necesitas saber para evitar imágenes de productos borrosas en WooCommerce.

Como ves, no hay que modificar nada de código, ni tocar la hoja de estilos de la plantilla de WooCommerce, lo único que tienes que saber es configurar los tamaños de imágenes correctamente.

Las fotos de producto es uno de los aspectos más importantes a la hora de crear una ficha de producto optimizada que consiga ventas. Si quieres conocer mi sistema para crear fichas de producto que vendan en piloto automático, te recomiendo que hagas clic aquí.

70 comentarios en “Evitar imágenes de productos borrosas en WooCommerce”

  1. Hola. Quería un servicio de asesoría personalizada dado que en mi página tengo algunas fotos borrosas y he seguido a la letra este y otros posts al respecto y he tenido diversas dificultades. Espero tu respuesta.

  2. Hola, gran post, me ha servido uchísimo, una pregunta, en firefox, el catálogo de mi tienda se ve perfectamente bien, imágenes nítidas y con calidad, pero en chrome, no, se ven borrosas… sabes a qué se peude deber este error?

    un saludo y gracias

  3. Hola Antonio,

    Tengo este mismo problema pero a mi no me aparece la opción de tamaño de las imágenes dentro de los ajustes de woocommerce, entonces no se como puede cambiar esto. Solo tengo la opción «general», «inventario» y «productos descargables»

    Gracias

  4. Buenos días Antonio, necesito tu ayuda 🙁 , me han hecho la siguiente web, he gastado una pasta y me dicen que no hay solución para el siguiente problema, si entras en productos las imágenes de las categorías están nítidas, pero si entras dentro de las categorías, las imágenes de los artículos se ven borrosas, eso sí, si entras dentro de un articulo y vuelves a salir, entonces la foto ya se ve nítida, según quien me hizo la web eso no tiene solución, dice que es problema de la plantilla, es la avada, yo no puedo creer que sea cierto ya que en las demos de esa plantilla las fotos se ven correctas.

    Porfa échame una mano, creo que me están tomando el pelo ó no saben solucionar el problema ó les es mas cómodo no perder mas tiempo, pero el caso es que no quiero que se vea así.

    http://herrajesmartinezsl.com/categoria-producto/bisagra-art-empotrar/

    1. Hola Leticia!

      Acabo de visitar tu tienda y a mi si que me muestra bien las imágenes, tanto en las categorías como en las fichas de producto :-/

      Supongo que lo habrás solucionado ya.

      Un saludo!

    2. ¿Cómo lo arreglaste? A mi me pasa exactamente lo mismo y con la configuración del post me fuerza todas las imágenes al 100 x 100

      http://tpv.ufv.es/producto/the-joy-of-beauty-entrada-en-grupo/

  5. Hola buenas noches Antonio, hace unos días estoy con el problema de imágenes borrosas de los productos en mi tienda online, quizás me puedas orientar para saber cual es el problema, las imagenes se ven borrosas cuando entro con el movil

  6. Hola la opción “WooCommerce > Ajustes > Productos > Mostrar” el mostar ya no esta disponible.

    Version 3.3.4 alguna opción para modificar las dimensiones de las imagenes de de las miniaturas?

    1. Hola Max!

      Efectivamente, ese ajuste lo encuentras ahora en «Apariencia > Personalizar > WooCommerce > Imágenes de producto».

      Acabo de actualizar el post explicando cómo hacerlo con la versión actual de WooCommerce.

      Saludos!

  7. Hola, buenos días! Si pudiera llorar para solucionar el problema que tengo con las imágenes en woocomerce lo haría en este mismo momento, pero como no serviría de nada, mejor sigo buscando soluciones. Os comento por si alguien me pudiera ayudar.

    Tengo mi web, en la que uso woocomerce, bien. Con una plantilla básica, twenty twelve, Es una tienda online de bikinis, y me gustaría hacer las fotos oportunas con mi teléfono iphone en formato 1:1, subirlas a la web y que se vean claras. Qué tengo que hacer?

    He leído muchísimas cosas sobre las medias, de la plantilla y de woocomerce pero no veo ningún cambio. No entiendo nada. Me siguen saliendo borrosas y además han cambiado de sitio los comandos para poner las medidas de las imágenes y no encuentro ninguna información actualizada. Muchas gracias

  8. Hola antonio sálvame por favor !! hace un monton que tengo problema en el catalogo de productos que me saltea dos lugares y pasa a la segunda pagina.
    como puedo hacer para solucionar este problema ?
    mil gracias.
    www.rennovata.com.ar

  9. Buenas, antes de nada agradecer tu gran ayuda!

    Tengo un problema que no sé si está relacionado con lo que comentas en este post o con otra cosa, cuando cree la tienda todo funcionaba perfectamente pero dejó de hacerlo sin cambiar nada, quizá alguna actualización de WordPress… no sé exactamente cuando fue para poder restaurar a un punto anterior.

    El caso es que el catálogo sale bien, pero en los productos, además de salir la imagen pixelada, las miniaturas salen al mismo tamaño, y al seleccionar color por ejemplo no cambia la imagen.. He cambiado los parámetros del tamaño de imágenes y regenerado miniaturas, pero nada..

    Por ejemplo:
    http://www.sansgraphic.com/producto/camiseta-chica-tirantes/

    Cualquier info sería de gran ayuda.
    Un saludo y muchas gracias!

  10. Hola,

    Me alegro mucho que escribas este blog ya que me resuelve y me ayuda cuando tengo dudas.

    Ahora va mi otra duda 🙂

    Cuando estas diseñando el producto de manera individual:
    ¿Puedo cambiar la foto del producto por código en html con javascript?

    Os dejo el link para que lo veas:

    http://www.matriculasdebarcos.com/producto/nombres-para-barco/

    Se debe a que hemos desarrollado un html para que se puedan ver diferentes tipografías y nos gustaría que estuviera donde esta la foto. Si no se puede ¿hay algún sistema para colocarlo en algún sitio que quede funcional?
    Muchas gracias por tu atención.

    Un saludo
    Jose

    1. Hola Jose,

      Todo lo que respecta al diseño de la tienda, depende del tema que estés usando, no de WooCommerce.

      Supongo que se podrá hacer modificando el código fuente del tema, pero es algo complejo y difícil de explicar en un comentario.

      De todas formas, si no tienes conocimientos de desarrollo de temas para WP y WC, te recomiendo que no toques nada de código.

      Siento no poder ayudarte con eso.

      Saludos!

  11. Hola Antonio,

    Muy gran trabajo, estoy empezando el el mundo WooCommerce y encontrarte ha sido genial. Sabia que esta aplicacion tenia mucho potencial pero contigo se puede llegar a exprimir al maximo.

    Mi problemilla con las imagenes es que no las recorta bien, es decir le pongo las dimesiones de mi theme pero no recorta la zona que yo quiero ni la calidad que deseo. He encontrado este Plugin por ahi…(Post Thumbnail Editor) no se si lo recomiendas.

    Gracias, buen post!!

  12. Buenas, mi consulta es, quiero que en la tienda no aparezca ninguna imagen, que sea solo el nombre del producto, precio y añadir al carrito, pero no quiero imágenes, hay forma de hacer eso??

    Gracias, buen post!

  13. Hola Antonio
    A ver si puedes resolverme el calentamiento de cabeza que me llevan las imágenes.
    He hecho todo lo que indicas, he visto que las de catálogo eran más pequeñas, y ya lo he corregido en woocommerce>>productos>>mostrar
    catálogo 398×398
    producto 450×450
    miniatura 90×90
    Con el plugin las he redimensionado y sigue viéndose borrosa.

    Yo las retoco en photoshop a un tamaño de 614×614 y que pesen de 90-100kb también uso el plugin wp smush que las comprime 4-5% aproximadamente:
    FULL 5,5 KB ( 5.6% )
    MEDIUM
    (300×300) 498,0 B ( 3.6% )
    THUMBNAIL
    (150×150) 227,0 B ( 4.7% )

    Para mi que entre wordpress y el plugin wp smush me quitan mucha calidad. ¿Tú qué piensas o estoy haciendo algo mal?

    He subido una foto a 450×450 pero sigo viéndola mal, en cambio 614×614 cuando pasas a amplificarla se ve mucho mejor.

    ¿Qué me recomiendas? Para que se cargue rápido y no se vean borrosas.

    Muchas gracias por tu ayuda

  14. Hola me gustaría saber una cosa, estoy utilizando el tema storefront y el tamaño de imagen predeterminado de woocomerce, mi pregunta es debo tener diferentes tamaños de la misma imagen según el sitio donde está irá en mi tienda. Es decir la misma imagen 600×600, 300×300 y 180×180
    Gracias

    1. Hola Jose,

      No. Solo necesitas que se cumplan las condiciones (ancho x alto) para el mayor de los 3 tamaños.

      El resto de versiones de la imagen, las crea automáticamente WooCommerce.

      Saludos!

  15. Buenos dias, estoy empezando a usar WooCommerce, y estpy en la fase de crear productos, pero cuando me toca subir la foto, lo hago pero aparece la foto demasiado grande y no se aprecia bien si no que queda cortada, las fotos que tengo no son profesionales son tomadas desde telefonos celulares y realmente no se cual es la dimesion

  16. Hola, tengo un problema inverso al de todos, a mi no se me pixelean las imagenes, al contrario, Tanto en listado como en productos relacionados carga en pequeño las imagen original de 1800×1800 px, ya revise y si tengo configurados los tamaños en elos productos de woocomerce, incluso revise la carpeta de uploads y si existen las versiones pequeñas, el problema es solo que los listados y productos relacionados no carga las versiones pequeñas sino las versiones grandes y esto afecta mucho el tiempo de carga. http://45.55.21.40/categoria-producto/tops/camisas/camisas-doandbe/

    Saludos y gracias!

    1. Jajaja… no te preocupes 😉

      La verdad es que no sabría decirte el motivo, pero normalmente (el 99% de los casos) ese tipo de problemas se deben a la plantilla y no a WooCommerce.

      Entonces lo que te recomiendo es que contactes con el soporte de la plantilla y le expliques tu problema. Seguro que ellos te lo solucionan.

      Saludos!

  17. Hola Andrés,

    Que tal?
    Te sigo desde hace un tiempo. Enhorabuena por tu trabajo y gracias por tu tiempo 🙂

    Mi problema es que las imágenes se ven borrosas en el catálogo pero cuando se ve en responsive. Pasa de tres columnas a una y es ahí cuando se ve borrosa. No se muy bien que debo de hacer para que esto no suceda.

    Mi tienda: www.nuriadiaz.es/shop

    Gracias

  18. Hola Antonio, desde el año pasado vengo siguiendo tu pagina y la verdad es que para mi es una fuente en consulta permanente. Primero que todo gracias por tomarte el tiempo de hacer los que haces, no sabes lo que nos ayuda. Para que te des una idea te escribo desde Bucaramanga-Colombia, cuidad que seguramente será la primera vez que escuchas. Bueno me gustaría me asesoraras con una pagina que monté

    www.kindex.com.co

    . Las imágenes de los productos no salen simétricas y por lo que dices la solución es dejar las imágenes cuadradas, pero lo que no veo como hacer es que cuando entro a ver una de ellas me salen muy grandes, ya he probado con varios tamaños pero no logro dar con el que es.

    Espero tu ayuda y de antemamo gracias Antonio

    1. Hola Uriel,

      Las imágenes de los productos aparecen borrosas y no se muestran simétricas porque no estás usando las dimensiones recomendada por tu tema.

      Para saber qué dimensiones debes emplear, revisa la documentación de tu tema o entra en «WooCommerce > Ajustes > Productos > Mostrar» y abajo del todo te indicará las dimensiones que debes usar para las fotos de producto.

      Saludos!

  19. Hola Antonio, tenemos el siguiente problema entre los productos queda un espacio en blanco te agredeceria si me ayudas 🙂 . es está

    http://decoriente.co/producto-categoria/decoracion-regalos-y-uso-personal/

    Gracias

  20. Hola Antonio, puedes decirme como hacer para que las imágenes en vertical se vean igual horizontal, ya que las verticales quedan de la manera que las he configurado pero las verticales salen mucho más grandes. te dejo 2 ejemplos.
    Muchas gracias!

    http://foto717.com/producto/masajes-tendon-de-aquiles
    http://foto717.com/producto/masaje-en-los-pies
  21. Ya descarge el plugin y lo actualicé, pero sigue saliendo mis imagenes pixeleadas.
    He borrado todas las imagenes para volver a realizarlo desde un inicio y sigue saliendo de la misma manera.

  22. Hola Antonio, empece hace poco a usar el Woocommerce y alucine. Pero tengo el inconveniente de las imagenes borrosas. Lei tu nota, inspeccione el elemento pero no logro ver el tamaño que tiene mi plantilla para las imagenes. Tengo productos de diversos tamaños.
    Te paso el link de la imagen que se ve peor

    http://www.imanesfuncionales.com.ar/producto/agendar-celulares/

    Gracias totales

    Silvana

  23. Hola Antonio, buenas tardes.
    Después de romperme la cabeza haciendo pruebas y des instalando plugins y volviéndolos a instalar, buscando soluciones en los foros de wordpress internacional, cambiando tamaño de las fotos…. finalmente apareció tu post, con tus estupendas explicaciones y todas las nubes borrosas y oscuras desaparecieron. Te doy mil gracias, he hecho lo que decías, paso a paso y he conseguido solucionarlo. Estoy tan feliz!!! Has hecho que mi intenso día pegada a la pantalla haya servido para solucinarlo y dar por cerrado este tedioso problema. Mil gracias.

    1. ¡Hola maría!

      Pues que quieres que te diga, no sabes tú el subidón que me da a mi leer comentarios como el tuyo jajaja…

      Para mi, saber que mis post sirven de ayuda, es la mayor de las satisfacciones. Así que hoy me voy a dormir con una sonrisa en la cara 🙂

      Espero seguir viéndote por aquí.

      Un saludo!

  24. Hola Antonio!!

    En mi web he configurado como decías las imágenes y luego he usado el plugin,mi plantilla usaba 173x173px de modo que dejé las medidas 173x173px,290x290px y 90x90px y tanto las imágenes de portada como tienda están bien,pero en el blog tengo un artículo donde cuelgo todas las fotos de los trabajos que voy realizando y esas imágenes usan otro formato en plantilla que es de 290x803px y no se han modificado siguen saliendo unas fotos más grandes que otras no sé como puedo cambiarlas uso el tema mr.tailor de themeforest quizás el problema esté en el tema como has comentado en otras entradas.Si me puedes ayudar,gracias!!!

  25. Hola Antonio:

    La verdad es que llevaba tiempo intentando corregir este problema. He seguido los pasos y cual ha sido mi sorpresa que, tanto en mi wordpress como en mi web me aparece un error que no se como quitar:

    Warning: Illegal string offset ‘crop’ in /home3/sonia/public_html/wp-content/themes/socute/theme/woocommerce.php on line 723

    Warning: Illegal string offset ‘width’ in /home3/sonia/public_html/wp-content/themes/socute/theme/woocommerce.php on line 733

    Warning: Illegal string offset ‘height’ in /home3/sonia/public_html/wp-content/themes/socute/theme/woocommerce.php on line 734

    Warning: Illegal string offset ‘crop’ in /home3/sonia/public_html/wp-content/themes/socute/theme/woocommerce.php on line 735

    Warning: Illegal string offset ‘width’ in /home3/sonia/public_html/wp-content/themes/socute/theme/woocommerce.php on line 739

    Warning: Illegal string offset ‘height’ in /home3/sonia/public_html/wp-content/themes/socute/theme/woocommerce.php on line 739

    Warning: Illegal string offset ‘crop’ in /home3/sonia/public_html/wp-content/themes/socute/theme/woocommerce.php on line 739

    He probado volviendo a poner los tamaños que venían antes en los ajustes y quitar la opción de «recortar» pero no he solucionado nada.
    Si al menos no puedo cambiar el tamaño, ¿como podría solucionar este problema?

    Espero tu respuesta.
    Muchas gracias por tu ayuda, me encantan tus tutoriales.

    1. Hola Sonia,

      No son errores, sino mensajes de aviso, por lo que no deben de preocuparte en exceso.

      Sin embargo deberías corregirlos y además parecen que están relacionados con tu tema. Quizás se arregle con una actualización.

      En cualquier caso, si no se arregla, deberás contactar con el desarrollador del tema para que lo solucione.

      Saludos!

  26. Hola, muchas gracias por la publicación, me solucionó completamente el problema sin mucho esfuerzo.

    Aunque aun tengo un problema.

    Al final de la pagina del producto, me muestra productos relacionados con el que estoy viendo. y estos productos se me muestran grandes y la imagen esta muy pixeleada y no encuentro la forma de modificar esto, estoy ocupando el tema ‘twentytwelve’.

    www.vencedoresglobal.com

    dale un vistazo.

    les agradezco que me ayuden con esto.

    saludos.

  27. Hola que tal? Primero felicidades por el post. Tenía problemas en algunas imágenes (pocas) que se veían borrosas, en el catálogo se ven perfectas pero al ver cada artículo se veían borrosas. Después de utilizar regenerate thumbnails ahora se me ven todas borrosas. Ya no se que hacer! Aunque ajustó la imagen al tamaño no se ve bien! No se puede deshacer lo que ha hecho regenerate thumbnails? Muchas gracias, saludos.

    1. Hola Rebeca,

      Si se te ven todas borrosas estoy casi seguro de es porque no has configurado correctamente las dimensiones de imágenes en WooCommerce. De hecho, si se muestran borrosas es porque has introducido tamaños de imágenes más pequeños de los que recomienda tu tema.

      Ajusta los tamaños de nuevo y después aplica Regenerate Thumbnail.

      Un saludo!

  28. Muchas gracias por la ayuda!! Lo seguí paso a paso y ahora las imágenes de los tres tipos se ven bien. Sólo me queda un tema por solucionar. En cada producto me aparecen imágenes de productos relacionados, y esas siguen saliendo borrosas, aunque cuando pincho y llego a la página de ese producto, ahí se ve bien. La imagen de los productos relacionados sale enorme (del mismo tamaño que el producto principal ) y no veo dónde cambiarlo en woocommerce. Me puedes ayudar para cambiar el tamaño o al menos para que estas imágenes de producto relacionado no salgan borrosas?

    Gracias!!

  29. Yo observo que cuando navego desde el movil (chrome) se me pixelan las imagenes de los productos del catalogo, no se si será cuestion del navegador movil o si será algo que debo resolver en la página. Gracias por dedicar tu tiempo en escribir el post.

  30. hola
    que sucede si la plantila es de 200*200 y la imagen de wocoormece es de 400*400 ¿ la recorta? la encoge con peor calidad o ¿o se veria con mejor calidad ?
    ante bajas resoluciones de pantalla 800*600 o 1024 que configuracion de wocoomerce seria la ideal si la plantilla es de 200*200
    Con 200*200 se ve muy pixeladas las fotos en un portatil con esa esa resolucion
    Muchas gracias por tus articulos

  31. Hola. Bueno, leí todo el artículo, seguí los pasos e incluso consulté a los comentarios para no tener que molestarte con la pregunta, pero la verdad que no logro solucionar el problema.
    Mira esta página de ejemplo:

    http://slime.com.ar/producto/sdadasdsamjashjfhjahjf/

    Antes las imágenes se veían bien, pero simplemente por curiosidad clickee en «regenerate thumbnails» y desde ese entonces las imágenes se ven taaan grandes y explotadas.
    Tanto en la configuracion de wordpress como de woocommerce tengo:
    – thumbnails: 100px
    – imagenes medio: 300px

    Como veras todo se ve mucho mas grande que eso… y no se como solucionarlo.
    Desisntale woocomerce, lo volvi a instalar, cambie los ajustes y regenere thumbnails mil veces.. ya no se que hacer. Como te decia: antes se veia bien, desde que regenere las miniaturas la primera vez.
    Espero que puedas ayudarme. Es un sitio muy importante

    1. Hola fatima,

      Por lo que veo, no has corregido el problema tal y como explico en el post.

      En la configuración de las dimensiones de imágenes de WooCommerce tienes que poner 528×528 px, que son las dimensiones que requiere tu plantilla.

      Ahora mismo estás mostrando fotos recortadas a 300×300 px en un cuadro de 528×528 px, por eso se ven tan borrosas.

      Cuando hayas configurado las dimensiones en WooCommerce, entonces usa Regenerate Thumbnails para redimensionarlas todas.

      Espero que te sirva.

      Saludos!

      1. Exacto. El problema es q no las quiero asi de grandes (antes de regenerar thumbnails no eran asi, eran la mitad de tamaño). Quisiera volver el tiempo atrás antes de ese errorr, pero bueno jeje.
        Y tocar la configuracion de wordpress desde los ajustes no lo soluciona. Imagino que tendre q iinvestigar en el theme.
        Muchas gracias igual por tu ayuda.
        Saludos!

  32. Hola Antonio!

    Tengo una pregunta, ¿Qué pasa si las dimensiones de los productos no son las mismas, es decir, no son cuadradas? Por ejemplo, mis imagenes (originales son 900×600). Tendré q jugar con los tamaños de catalogo/producto/miniatura?

    Saludos!!

    PD. gran aporte tu blog!

    1. Hola Andrés,

      Pues seguramente las imágenes aparezcan recortadas. Aunque eso también depende del tema que estés usando, es decir, no todos los temas usan fotos cuadradas.

      Si en tu caso se mostrasen las imágenes recortadas, entonces te recomendaría que las editases con cualquier programa de edición fotográfica antes de subirlas.

      Si el fondo de tu web es blanco, puedes añadir un «trozo» blanco a la imagen hasta alcanzar el mismo alto que ancho o viceversa.

      Un saludo!

      1. Hola!

        Al final he jugado con los px de cada y el final es éste:

        prueba

        Podéis ver que tiene un shadow, por que el theme q he utilizado no lo tenía, así que le he añadido.

        Gracias Antonio!

  33. Hola, gracias por tu explicación porque tengo este problema, pero a nivel movil.
    En el ordenador mis imagenes se ven bastante bien, están a 150×150 cuando realmente son de 163×163 pero lo peor es al ver la web desde el movil, cuyas dimensiones de imagen son 291×291.
    En este caso como hago? Cambio las dimensiones 150×150 a 291×291 para que se vea bien en movil? Y en ese caso, como se verá en un ordenador?
    Porque si modifico las dimensiones a 163×163 voy a seguir teniendo el mismo problema en movil, no?
    Bueno, espero que puedas ayudarme y muchas gracias

    1. Hola SoCute4You,

      La verdad es que es la primera vez que me encuentro un caso en el que las imágenes tienen unas dimensiones mayores en la versión móvil que en la versión para PC. De hecho, me atrevería a decir que es un fallo de la plantilla que usas, ya que no le encuentro mucha lógica a mostrar imágenes más grandes en pantallas más pequeñas :-/

      Estoy seguro de que si haces la prueba con otra plantilla, no tendrás este problema.

      Lo único que puedo decirte es que si tu plantilla es de pago, preguntes al desarrollador a qué se debe ese fallo y si puede solucionarlo. S no, no te va a quedar más remedio que cambiar de plantilla o si tienes soltura con CSS, puedes modificar tú mismo las dimensiones para las fotos en pantallas móviles.

      Siento no poder hacer más.

      Un saludo.

  34. Muchas gracias por tu post, pero tengo una pregunta, yo redimiensiono el tamaño de las imagenes desde woocomerce, pero en mi pagina aparecen mas grandes que el tamaño real, cómo puedo arreglar esto?

    1. Hola Liliana,

      Si has configurado correctamente las dimensiones de las imágenes de los productos en WooCommerce (recuerda que deben ser las mismas que use tu plantilla) y después has usado el plugin «Regenerate Thumbnails» para redimensionarlas, entonces las imágenes deben de quedar bien.

      En caso de que no sea así, es probable que el problema resida en la plantilla que estás usando.

      Para asegurarte, puedes hacer la prueba con otra plantilla.

      Espero que te sirva.

      Saludos!

  35. Hola, te quería pedir un favor. Verás las imágenes de mi catálogo quedan espantosas. No se ven enteras. He seguido tus instrucciones pero no acierto con ello. ¿Podrías ayudarme? Gracias y enhorabuena por el blog. Es de mucha ayuda.
    Gracias

    1. Hola Carmen,

      He visitado tu tienda (supongo que es la del enlace) y he visto el catálogo. Lo que te ocurre es que tu plantilla de WooCommerce usa un formato cuadrado para tus fotos de catálogo y tú estás usando fotos más altas que anchas, con lo cual a tu plantilla no le queda más remedio que cortarlas para que quepan en el cuadro.

      La solución que doy en el artículo no corrige tu problema. De hecho, aviso de que cada plantilla especifica sus propias dimensiones de imágenes y que debes usar fotos que cumplan esos requisitos.

      La única solución que veo, es que uses un editor de imagen cualquiera (tipo GIMP) para igualar el ancho al alto de la imagen. Esto lo puedes hacer rellenando de fondo blanco ese espacio que falta hasta que se quede la imagen cuadrada. Es algo tedioso y requiere volver a subir de nuevo las fotos del catálogo.

      Si permites que te de mi opinión, yo no lo veo tan espantoso como dices. Sinceramente no sé si te merece la pena todo el esfuerzo y el tiempo que vas a dedicarle.

      Siento no poder hacer más.

      Un saludo.

      1. Muchísimas gracias por contestarme y darme la solución. La página no es mía, y quieren que se vea la portada entera. Eres un hacha.

        De nuevo gracias y ya te contaré como queda.

        Un saludo
        Carmen.

  36. Hola, yo otra vez. Tengo un problema, y es que al modificar los tamaños la imagen del catálogo se ve bien, ya no se ve borrosa, pero al darle click al producto, se abre una nueva ventana del producto y sigue manejando la misma imagen del catálogo, y entonces se ve pixelada… porque la imagen del producto al darle click se debe mostrar más grande, pero no se como configurarle que esa imagen interna sea otra, pues me sale solo la opción de insertar las miniaturas de la galería… Podrías ayudarme?

    Gracias.

    1. Hola Jennifer,

      Para evitar que esto ocurra tienes que repetir el mismo proceso que explico, pero esta vez en lugar de ser para las imágenes de catálogo, será para la imagen del producto. Es decir, en la sección “Tamaño de imágenes de productos” que verás dentro de “WooCommerce > Ajustes > Productos”, ahora tienes que configurar las dimensiones para «Imagen del Producto«.

      Un saludo!

  37. Hola, muy útil tu artículo muchas gracias, tardé toda la noche tratando de solucionar este problema y como dices, la gente se mete con código y yo de eso poco sé. Pero hice todo tal cual y fue genial. Mil gracias en serio, por fin puedo seguir con el trabajo pendiente 🙂

Deja un comentario

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

Responsable: Antonio Cantero, siendo la Finalidad; envío de mis publicaciones así como correos comerciales. La Legitimación; es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en mi plataforma de email marketing Active Campaign ubicada en EEUU y acogida al Privacy Shield. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos en contacto@woodemia.com

Ir arriba