Cómo solucionar problemas de tamaño de imagen de WooCommerce

¿Tienes problemas con los tamaños de las imágenes en tu tienda online? Has venido al lugar correcto. En esta guía, le mostraremos diferentes formas de solucionar los problemas más comunes de tamaño de imagen de WooCommerce .

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 la incompatibilidad de temas o complementos, 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 usan en WooCommerce son imágenes de productos, catálogos y miniaturas de 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 de 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 usan normalmente en la página de la tienda de WooCommerce. Si tiene una página de categoría separada en su tienda en línea, estas imágenes de 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.

Problemas comunes con los tamaños de imagen de WooCommerce

Ahora tiene una mejor comprensión de los diversos tipos de imágenes de WooCommerce y la diferencia en sus tamaños. Las imágenes son extremadamente importantes para ayudarte a convertir visitantes en clientes, por lo que tener problemas con tus imágenes puede ser un gran dolor de cabeza.

Para poder solucionar los problemas de tamaño de 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. Algunos de los más comunes son:

1. Imágenes borrosas

Este es uno de los problemas más comunes. Las imágenes que carga para sus 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 en su sitio web pueden ser de menor calidad después de haberlas cargado. Pueden parecer pixeladas 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 las originales. Este es un problema muy común si no ajusta la configuración de sus imágenes de acuerdo con los requisitos del tema .

Por ejemplo, supongamos que el requisito de su tema para las imágenes del 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 están configurados de acuerdo con los requisitos del tema, su imagen podría reajustarse automáticamente con el tamaño de imagen incorrecto.

4. Problemas con el zoom, la caja de luz o el control deslizante

WooCommerce le brinda opciones de zoom, caja de luz 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. Faltan campos de ancho de imagen y miniatura

También puede notar que faltan los campos de ancho y miniatura de sus imágenes de WooCommerce en el Personalizador en Apariencia > Personalizar > WooCommerce > Imágenes de productos .

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 ese caso, necesitará algunos conocimientos programáticos que discutiremos en las soluciones a continuación.

Ahora que entendemos 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

Ya que está familiarizado con algunos de los problemas de tamaño de imagen más comunes de WooCommerce, también vamos a solucionarlos. Sin embargo, los problemas de tamaño de imagen que encuentre 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 detallan 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 imagen de WooCommerce.

1. Checklist inicial a 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 complementos 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 Complementos > Complementos instalados en su panel de WordPress. Si hay avisos que le piden que actualice WooCommerce, haga clic en Actualizar ahora .

Además, si has actualizado WordPress con el editor Gutenberg, asegúrate de que WordPress también esté actualizado a la última versión . Por otro lado, si usas WordPress con el editor clásico, lo mejor es actualizarlo con la última versión de WordPress 4.9.

Una vez que haya hecho todo esto, si todavía tiene problemas con los tamaños de imagen, 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 las soluciones sin ningún problema. Si estás buscando un nuevo tema compatible con WooCommerce, echa 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 fácil. 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 recortarlas aquí. Si desea ajustar el tamaño de la imagen en miniatura, edite la opción Ancho de la 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 en funcionalidad como en 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 use la herramienta de desarrollador de elemento de inspección en su navegador web para ver el tamaño de la imagen del tema.

Por ejemplo, si usa Google Chrome , haga clic derecho en la imagen del producto y presione Inspeccionar . Podrá ver el tamaño de la imagen en la herramienta de desarrollador de elemento de inspección como se muestra a continuación.

En este caso, el tamaño de la imagen del producto es de 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 usando 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 más en el Personalizador si es necesario.

4. Cambiar los tamaños de imagen predeterminados

Si probó todas las soluciones anteriores, pero aún tiene problemas con las imágenes, es posible que deba ajustar los tamaños de imagen predeterminados de WordPress .

Para hacer eso, 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. Solucionar problemas de tamaño de imagen de WooCommerce con complementos

Otra alternativa para solucionar los problemas de tamaño de imagen de WooCommerce es usar un complemento dedicado. Hay varias herramientas que puedes usar 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 debe usar.

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 alta . Una pantalla preparada para retina garantiza que cualquier imagen que se vea en cualquier dispositivo con cualquier tamaño de pantalla sea nítida y sin líneas ni bordes pixelados visibles.

Esta es una solución perfecta si las imágenes cargadas en su sitio están borrosas o son de baja calidad. Si desea crear una imagen lista para la retina manualmente, debe duplicar el tamaño y las dimensiones de la imagen, optimizarlos y luego volver a cargarlos. Sin embargo, puede usar un complemento, por lo que sus imágenes están listas para la retina automáticamente. Para esto, Perfect Images es uno de los mejores complementos que existen.

Perfect Images es un complemento simple para agregar imágenes con pantalla retina a su sitio. Detecta automáticamente cualquier imagen con problemas de retina y crea una copia lista para retina de ellas. Además de eso, puede crear imágenes individuales listas para la retina o hacerlo a granel para ahorrar tiempo.

Ahora, veamos cómo usar este complemento.

5.1.1. Instalar y activar el complemento

Primero, necesitas instalarlo y activarlo. En su tablero de WordPress, vaya a Complementos > Agregar nuevo , busque el complemento y haga clic en Instalar ahora .

Una vez completada la instalación, active el complemento. Alternativamente, puede instalarlo manualmente. Si no está seguro de cómo hacerlo, consulte nuestra guía para instalar un complemento de WordPress manualmente.

5.1.2. Configurar las opciones de imagen para pantalla Retina

Después de activar el complemento, debe configurar las opciones de retina para sus imágenes de WooCommerce o sitio web. Ve a Meow Apps > Perfect Images y verás todas las opciones para tus 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 de retina para los tamaños de imagen más comunes.

Sin embargo, después de que las imágenes se conviertan en 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 inconveniente 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 complemento 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 utilizando un complemento o servicio de optimización de imágenes 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 imagen de WooCommerce.

También puede generar miniaturas e imágenes 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 generalmente ocurren cuando ha cambiado su tema recientemente. El nuevo tema puede tener diferentes requisitos de tema para los tamaños de imagen, por lo que debe volver a ajustarlos.

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, ve a Medios > Imágenes perfectas , abre la pestaña Todo y verás todas las imágenes en tu sitio. De manera similar al paso de soporte de retina, puede regenerar miniaturas para imágenes particulares o en masa.

Para regenerar imágenes en bloque, presione Acciones en bloque 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.

6. Solución Programática

Si ha llegado hasta aquí, ha intentado solucionar los problemas de tamaño de imagen con las opciones predeterminadas de WooCommerce e incluso con complementos. Si nada funcionó y aún tiene problemas, hay una cosa más que puede hacer. Para usar esta solución, te recomendamos tener conocimientos básicos de programación ya que usaremos un poco de código.

Hay algunos fragmentos de código que puede usar para solucionar problemas de imagen, pero tenga en cuenta que el fragmento que usaremos cambiará los tamaños de imagen en su sitio web. Esto puede ser útil cuando faltan los anchos de la imagen principal y los campos de miniaturas en el personalizador de su tema y desea establecer tamaños de imagen personalizados de WooCommerce.

Como editaremos algunos archivos principales, antes de comenzar, le recomendamos que haga una copia de seguridad de su sitio web de WordPress. Además, es una buena práctica crear un tema secundario o usar cualquiera de estos complementos de temas secundarios de WordPress.

Cambiar el tamaño de la imagen usando fragmentos de código

Para cambiar los tamaños de imagen cuando faltan el ancho de la imagen y el ancho de la miniatura en el Personalizador, puede usar el siguiente fragmento de código. Ve a Apariencia > Editor de temas y abre el archivo functions.php .

Luego, simplemente agregue el siguiente fragmento de código en la parte inferior del editor.

 add_theme_support('woocommerce', apply_filters('divi_woocommerce_args', array(
   'single_image_width' => 600,
   'thumbnail_image_width' => 300,
   'producto_grid' => matriz(
   'columnas_predeterminadas' => 3,
   'filas_predeterminadas' => 4,
   'min_columnas' => 1,
   'max_columnas' => 6,
   'min_filas' => 1
   )
) ) );

Este fragmento cambiará el ancho de la imagen del producto a 600 y el ancho de la miniatura a 300, que son los parámetros predeterminados. Ajuste estos valores según sus requisitos y no olvide actualizar el archivo.

7. Opciones de soporte

Si probó todas las soluciones mencionadas aquí pero no pudo encontrar la solución a los problemas de tamaño de la imagen, el problema que enfrenta es raro o hay un problema con los archivos principales de WooCommerce o su tema.

En este punto, la mejor opción es ponerse en contacto con el servicio de atención al cliente. WooCommerce tiene excelentes opciones de soporte para que pueda contactarlos sobre sus problemas de tamaño de imagen. Alternativamente, si cree que su tema puede ser el problema, puede comunicarse con su proveedor de temas y pedirle ayuda.

Conclusión

En general, hay diferentes tipos de imágenes (producto único, catálogo y miniaturas de productos) y varios problemas comunes con los tamaños de imagen. Los más comunes son imágenes borrosas o de baja calidad, tamaños de imagen incorrectos, opciones de zoom, caja de luz y control deslizante, y faltan campos de ancho y miniatura.

En esta guía, hemos visto diferentes soluciones para solucionar los problemas más comunes de tamaño de imagen de WooCommerce .

1. Actualice su tema y complementos a la última versión, incluido WooCommerce
2. Establecer tamaños de imagen personalizados de WooCommerce
3. Verifique las dimensiones del producto de la imagen de su tema
4. Cambiar los tamaños de imagen predeterminados
5. Usar complementos
6. Solución programática con un poco de código
7. Póngase en contacto con WooCommerce o con el equipo de soporte de su tema

Si este artículo te resultó útil, compártelo en las redes sociales y ayuda a tus amigos a deshacerse de estos problemas. ¿Te has enfrentado a estos problemas antes? Como los resolviste? Háganos saber en los comentarios a continuación.

Para obtener guías más útiles, aquí hay artículos que pueden resultarle interesantes:

• Cómo agregar una imagen a un producto en WooCommerce
• 3 métodos para eliminar miniaturas en WordPress
• Cómo agregar tamaños de imagen personalizados en WordPress