Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Evitar imágenes de productos borrosas en WooCommerce
#1
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 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.

  • Imagen 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 3 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 lapá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:
[img=464x0]http://woodemia.com/wp-content/uploads/2014/06/fotos-productos-borrosas-en-woocommerce.png[/img]Para 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“.
[img=485x0]http://woodemia.com/wp-content/uploads/2014/06/conocer-dimensiones-fotos-woocommerce-chrome.png[/img]
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.
[img=593x0]http://woodemia.com/wp-content/uploads/2014/06/dimensiones-fotos-plantilla-woocommerce.jpg[/img]
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 > Display” y abajo en la sección “Tamaño de imágenes de productos” “Products Images” introducimos las dimensiones que usa la plantilla para cada tipo de imagen y hacemos clic en “Guardar cambios“. En este ejemplo concreto mi plantilla usa los siguientes valores:
[img=502x0]http://woodemia.com/wp-content/uploads/2014/06/configuracion-tamanos-imagenes-productos-woocommerce.png[/img]
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.
[img=500x0]http://woodemia.com/wp-content/uploads/2014/06/redimensionar-tamanos-imagenes-productos-woocommerce.jpg[/img]
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.
[img=688x0]http://woodemia.com/wp-content/uploads/2014/06/corregir-problema-fotos-borrosas-woocommerce.jpg[/img]
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.
#2
gracias por el aporte
#3
Aveces suele dar dolores de cabeza al no saber que tamaño elegir en las imágenes ya que suelen salir o muy pequeñas o bien no ocupan el espacio determinado, con esta tutorial queda bastante claro hacer la forma correcta, gracias por el aporte, saludos.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Duda] Problema espaciados en imagenes PabloA3 16 221 15-09-2018, 11:49 AM
Último mensaje: PabloA3
Estrella Configurar múltiples vendedores en WooCommerce WMasterT 2 96 30-07-2018, 08:09 PM
Último mensaje: WMasterT
  Añade Marcas de agua a tus imágenes con Wordpress jcifuentes 1 80 02-06-2018, 07:57 AM
Último mensaje: ReyNexo23
  ¿Cuánto cuesta montar una tienda online que venda con WooCommerce? logoregion 8 749 19-04-2016, 02:09 PM
Último mensaje: betiko2424
  Cómo mostrar productos destacados en WooCommerce logoregion 0 499 08-02-2016, 09:59 PM
Último mensaje: logoregion
  Cómo usar las clases de envío en WooCommerce logoregion 0 459 08-02-2016, 09:56 PM
Último mensaje: logoregion
  WooCommerceAplicación oficial de WooCommerce para el móvil Aplicación oficial de WooC logoregion 0 377 08-02-2016, 09:55 PM
Último mensaje: logoregion
  Solución al problema de rango de precios en WooCommerce logoregion 0 458 08-02-2016, 09:52 PM
Último mensaje: logoregion
  Comisión en WooCommerce según método de pago logoregion 0 511 07-02-2016, 08:19 PM
Último mensaje: logoregion
  Configurar gastos de envío en WooCommerce según el peso logoregion 0 448 07-02-2016, 08:18 PM
Último mensaje: logoregion



Usuarios navegando en este tema: 1 invitado(s)