WooCommerce es una de las mejores plataformas de comercio electrónico, pero de vez en cuando, puede encontrar algunos problemas. Ya hemos visto cómo solucionar los problemas más comunes en el proceso de pago y qué hacer cuando el botón Agregar al carrito no funciona . En este tutorial, le mostraremos diferentes soluciones para solucionar problemas de tamaño de imagen.
Estos problemas pueden ocurrir debido a varias razones, como incompatibilidad de temas o plugins, tamaños de imagen incorrectos, falta de campos de imagen, etc. Antes de ver cómo resolver los diversos problemas de tamaño de imagen, echemos un vistazo a los diferentes tipos de imágenes en WooCommerce.
Tipos de imágenes en WooCommerce
Hay muchos tipos de imágenes que puede agregar a su sitio web, pero los 3 tipos principales que se utilizan en WooCommerce son las imágenes en miniatura de productos, catálogos y productos.
- Imágenes de un solo producto: las imágenes de un solo producto son imágenes de gran tamaño que se utilizan para ver un solo producto. Esta es la imagen principal del producto que muestra a los clientes cuando abren la página del producto WooCommerce en particular . Puede agregar más de una imagen de producto para mostrar el producto desde varios ángulos.
- Imágenes de catálogo: son imágenes de tamaño mediano de productos que se utilizan normalmente en la página de la tienda WooCommerce . Si tiene una página de categoría separada en su tienda en línea, estas imágenes del catálogo también se pueden ver en las categorías de productos o en los productos mismos.
- Imágenes en miniatura del producto: estas son imágenes en miniatura que son de tamaño muy pequeño. Se muestran para identificar los productos en varias páginas de WooCommerce, como páginas de carrito, áreas de widgets o incluso en las páginas de pedidos.
Tabla de contenido:
Problemas comunes con los tamaños de imagen de WooCommerce
Ahora comprende mejor los distintos tipos de imágenes de WooCommerce y la diferencia en sus tamaños. Las imágenes son extremadamente importantes para ayudarlo a convertir visitantes en clientes, por lo que tener problemas con sus imágenes puede ser un gran dolor de cabeza.
Para poder solucionar los problemas de tamaño de la imagen de WooCommerce, primero debe identificar su problema . La parte complicada es que hay varios problemas que puede enfrentar con respecto al tamaño de las imágenes. Algunas de las más comunes son:
1. Imágenes borrosas
Este es uno de los problemas más comunes. Las imágenes que subes para tus productos o miniaturas aparecen borrosas y es posible que no se vean claramente, incluso si la imagen original no estaba comprimida, era claramente visible y tenía una gran calidad.
Las imágenes borrosas no solo se ven mal, sino que también dan la impresión de que su sitio no es profesional.
Imagen original
Imagen borrosa
2. Imagen de baja calidad
Al igual que las imágenes borrosas, algunas imágenes de su sitio web pueden ser de menor calidad después de haberlas cargado. Pueden parecer pixelados o no tener líneas tan suaves como las originales.
Esto puede suceder incluso si la imagen cargada tiene una calidad excelente. Veremos por qué y cómo solucionarlo en la siguiente sección.
3. Tamaños de imagen incorrectos
A veces, también puede notar que las imágenes cargadas tienen tamaños diferentes a los de las originales. Este es un problema muy común si no ajusta la configuración de las imágenes de acuerdo con los requisitos del tema .
Por ejemplo, digamos que su requisito de tema para las imágenes de catálogo es de al menos 250 x 250 píxeles, pero la configuración de imagen de WooCommerce de su tienda está configurada en 200 x 200 píxeles. Dado que los ajustes no se configuran de acuerdo con los requisitos del tema, es posible que su imagen se reajuste automáticamente con el tamaño de imagen incorrecto.
4. Problemas con el zoom, la caja de luz o el control deslizante
WooCommerce le proporciona opciones de zoom, lightbox y control deslizante para obtener una vista previa de sus imágenes. Esta fue una nueva característica que se agregó a WooCommerce con el lanzamiento de la versión 3.0 . Si su tema no se ha actualizado de acuerdo con sus especificaciones, es posible que tenga algunos problemas.
5. Falta el ancho de la imagen y los campos de miniaturas
También puede notar que los campos de ancho y miniatura de sus imágenes de WooCommerce faltan en el Personalizador en Apariencia> Personalizar> WooCommerce> Imágenes de producto .
Este puede ser el caso si su tema tiene tamaños de imagen muy estrictos, por lo que no puede cambiar los tamaños de imagen del tema a través del administrador en absoluto. En ese caso, necesitará algunos conocimientos programáticos que discutiremos en las soluciones a continuación.
Ahora que comprendemos mejor los tipos de imágenes y los problemas más comunes, veamos diferentes soluciones para solucionar problemas de tamaño de imagen en WooCommerce.
Cómo solucionar problemas de tamaño de imagen de WooCommerce
Como está familiarizado con algunos de los problemas de tamaño de imagen de WooCommerce más comunes, solucionémoslas también. Sin embargo, los problemas de tamaño de la imagen que puede encontrar pueden deberse a varias razones. Por lo tanto, es posible que no haya una solución particular para ellos.
Por lo tanto, le recomendamos que utilice algunas de las soluciones comunes que se proporcionan a continuación con respecto a cualquier problema de tamaño de imagen. Estamos seguros de que una de las soluciones podrá solucionar los problemas de tamaño de la imagen de WooCommerce.
1. Lista de verificación inicial para tener en cuenta
Antes de analizar las soluciones específicas para solucionar problemas de tamaño de imagen, hay algunas cosas que debe tener en cuenta. Primero, asegúrese de haber configurado correctamente WooCommerce sin perder ningún paso. Es posible que tenga problemas con su sitio web si no está instalado correctamente.
En segundo lugar, nos gustaría recordarle que verifique si todo en su sitio web está actualizado . Puede haber problemas en su tienda si no ha actualizado su tema o plugins a la última versión.
Del mismo modo, asegúrese de actualizar WooCommerce a la última versión disponible. Para saber si tiene actualizaciones pendientes, vaya a Plugins> Plugins instalados en su panel de WordPress. Si hay avisos que le solicitan que actualice WooCommerce, haga clic en Actualizar ahora .
Además, si ha actualizado WordPress con el editor de Gutenberg, asegúrese de que WordPress también esté actualizado a la última versión . Por otro lado, si usa WordPress con el editor clásico, es mejor actualizarlo con la última versión de WordPress 4.9.
Una vez que haya hecho todo esto, si aún tiene problemas con los tamaños de las imágenes, continúe con la siguiente solución.
NOTA: Usaremos el tema Divi para este tutorial, por lo que algunas de las páginas pueden verse diferentes a su sitio web si usa otro tema. Sin embargo, debería poder seguir todas y cada una de las soluciones sin ningún problema. Si está buscando un nuevo tema compatible con WooCommerce, eche un vistazo a este artículo.
2. Establecer tamaños de imagen personalizados de WooCommerce
Agregar tamaños de imagen personalizados es una de las formas más comunes de solucionar los problemas de tamaño de imagen de WooCommerce. Dado que la mayoría de los problemas ocurren debido al cambio en los tamaños de imagen predeterminados , este debería ser su primer paso.
Configurar un tamaño de imagen personalizado es bastante sencillo. En su panel de administración, vaya a Apariencia> Personalizar y abra la pestaña WooCommerce para acceder al Personalizador.
Luego, abra la opción Imágenes del producto . Aquí puede cambiar el tamaño de la página del producto y las imágenes en miniatura de sus productos. Para editar la imagen principal de la página del producto, agregue el tamaño de imagen que desee en la sección Ancho de la imagen principal .
También puede editar los tamaños de las miniaturas y recortar aquí. Si desea ajustar el tamaño de la imagen en miniatura, edite la opción Ancho de miniatura .
Además, hay tres opciones para ajustar el recorte de miniaturas: 1: 1, personalizado y sin recortar. Para minimizar los problemas de imagen tanto de funcionalidad como de apariencia, el recorte 1: 1 es la mejor opción. Una vez que haya realizado todos los cambios necesarios, haga clic en Publicar.
3. Verifique las dimensiones de la imagen del producto de su tema
Si todavía tiene algunos problemas incluso después de agregar los tamaños de imagen personalizados, es posible que el tamaño de la imagen sea incorrecto. Como se mencionó anteriormente en el problema del tamaño de imagen incorrecto, existen requisitos de tema específicos para los tamaños de imagen en WooCommerce. Si esos tamaños no cumplen con los requisitos, es posible que tenga algunos problemas.
Para solucionar estos problemas de tamaño de imagen de WooCommerce, la mejor opción es verificar primero los tamaños de imagen del producto del tema. Abra la página del producto de cualquiera de sus productos y utilice la herramienta de desarrollo de elementos de inspección en su navegador web para ver el tamaño de la imagen del tema.
Por ejemplo, si está utilizando Google Chrome , haga clic con el botón derecho en la imagen del producto y presione Inspeccionar . Podrá ver el tamaño de la imagen en la herramienta de desarrollo de inspección de elementos como se muestra a continuación.
En este caso, el tamaño de la imagen del producto es 900 × 600 . Si los requisitos de imagen de su tema son diferentes, es posible que tenga problemas.
Puede ajustar el tamaño de la imagen del producto en consecuencia desde el Personalizador utilizando el método que describimos en el punto 2. De manera similar, puede inspeccionar el tamaño de la imagen en miniatura de la misma manera y editarlo en el Personalizador si es necesario.
4. Cambiar los tamaños de imagen predeterminados
Si ha probado todas las soluciones anteriores, pero aún enfrenta problemas de imagen, es posible que deba ajustar los tamaños de imagen predeterminados de WordPress .
Para hacerlo, vaya a Configuración> Medios en su panel de WordPress y verá las opciones de tamaño para imágenes en miniatura, medianas y grandes .
Configure los tamaños de imagen de acuerdo con los requisitos del tema y guarde los cambios .
Además, puede eliminar algunos de los tamaños predeterminados si no los usa. Para obtener más información al respecto, consulte nuestra guía para eliminar los tamaños de imagen predeterminados de WordPress.
5. Solucione problemas de tamaño de imagen de WooCommerce con plugin
Otra alternativa para solucionar los problemas de tamaño de la imagen de WooCommerce es utilizar un plugin dedicado. Hay varias herramientas que puede utilizar para esto. En esta sección, le mostraremos algunos para que pueda evitar más problemas de tamaño de imagen en su sitio web.
Echemos un vistazo a algunas de las mejores herramientas que debería utilizar.
5.1. Imágenes perfectas y compatibilidad con Retina
En términos simples, Retina Support es una opción de visualización de imágenes en su sitio web con una resolución y calidad muy altas . Una pantalla lista para retina asegura que cualquier imagen vista en cualquier dispositivo con cualquier tamaño de pantalla sea nítida y sin líneas o bordes pixelados visibles.
Esta es una solución perfecta si las imágenes cargadas en su sitio están borrosas o de baja calidad. Si desea crear una imagen lista para retina manualmente, debe duplicar el tamaño y las dimensiones de la imagen, optimizarlas y luego volver a cargarlas. Sin embargo, puede usar un plugin, por lo que sus imágenes están listas para retina automáticamente. Para esto, Perfect Images es uno de los mejores plugins que existen.
Perfect Images es un plugin simple para agregar imágenes con pantalla retina a su sitio. Se detecta automáticamente cualquier imagen con problemas de retina y crea una copia retina listo de ellos. Además de eso, puede crear imágenes individuales listas para retina o hacerlo a granel para ahorrar tiempo.
Ahora, veamos cómo usar este plugin.
5.1.1. Instalar y activar el plugin
Primero, debes instalarlo y activarlo. En su panel de WordPress, vaya a Plugins> Agregar nuevo , busque el plugin y haga clic en Instalar ahora .
Una vez completada la instalación, active el plugin. Alternativamente, puede instalarlo manualmente. Si no está seguro de cómo hacerlo, consulte nuestra guía para instalar un plugin de WordPress manualmente .
5.1.2. Configurar las opciones de imagen para la pantalla Retina
Después de activar el plugin, debe configurar las opciones de retina para las imágenes de su sitio web o WooCommerce. Vaya a Aplicaciones de Miau > Imágenes perfectas y verá todas las opciones para sus imágenes de retina en la pestaña General . Las opciones predeterminadas están bien para la mayoría de los sitios web, ya que crean imágenes retina para los tamaños de imagen más comunes.
Sin embargo, una vez que las imágenes se convierten en listas para retina, es posible que deban optimizarse. Las imágenes listas para retina tienden a ser muy grandes y pueden ralentizar su sitio web. Esto puede ser un gran obstáculo para sus clientes, ya que la mayoría de los usuarios utilizan dispositivos móviles para realizar compras en línea.
Para asegurarse de que las imágenes de la retina no agoten la velocidad de su sitio web, debe asegurarse de que estén bien optimizadas. Puede hacer esto desde el plugin yendo a la pestaña Optimización y velocidad . Tenga en cuenta que para eso deberá suscribirse a su plan premium que incluye Easy IO para la optimización y cuesta 10 USD por mes.
Alternativamente, también puede optimizarlos manualmente usando un plugin o servicio de optimización de imagen como TinyPNG o Smush .
5.1.3. Convertir imágenes para compatibilidad con Retina
Una vez que haya configurado todas las opciones necesarias para sus imágenes de retina, puede comenzar a convertirlas. Primero, vaya a Medios> Imágenes perfectas y será redirigido a la pestaña Problemas de Retina . Aquí puede crear imágenes listas para retina para solucionar los problemas de tamaño de la imagen de WooCommerce.
También puede generar miniaturas e imágenes de retina seleccionando las imágenes que desee.
5.2. Regenerar miniatura
La regeneración de miniaturas también es una forma excelente de resolver problemas con el tamaño de las imágenes, especialmente con las imágenes en miniatura .
Estos problemas suelen ocurrir cuando ha cambiado recientemente su tema. El nuevo tema puede tener diferentes requisitos de tema para los tamaños de imagen, por lo que debe reajustarlos.
Si tiene una gran cantidad de miniaturas en su sitio web, puede usar Perfect Images . Todo lo que necesita hacer es configurar las opciones de tamaño de imagen tal como lo hicimos en los pasos 5.1.1 y 5.1.2. Luego, vaya a Medios> Imágenes perfectas , abra la pestaña Todas y verá todas las imágenes en su sitio. De manera similar al paso de soporte de retina, puede regenerar miniaturas para imágenes particulares o de forma masiva.
Para regenerar imágenes de forma masiva, presione Acciones masivas y seleccione Regenerar todas las entradas para regenerar miniaturas. Tenga en cuenta que esto puede tardar unos minutos si tiene muchas imágenes en su sitio.
