¡Muy buenas! Si estás leyendo este artículo debe ser porque te has dado cuenta que el modo en que WooCommerce muestra las imágenes por defecto no es el más adecuado, y quieres mejorar las imágenes de producto. ¡Bien por ti! Eso te ayudará a subir las ventas en tu ecommerce.
Como lo vas a ver mucho más claramente con un vídeo, aquí te dejo uno muy cortito pero muy claro. Después del vídeo nos vemos para explicar las principales opciones que tenemos con este plugin. ¡Dentro vídeo!
Pues bien, ya lo has visto. Fácil, rápido y eficaz. ¡Ojalá todo fuera tan sencillo de hacer!
Eso sí, recuerda que WordPress, por defecto, reduce en un 18% la calidad de las imágenes subidas a la biblioteca de medios. Si quieres que tus imágenes de producto queden perfectas (algo absolutamente necesario para vender) puedes configurar ese valor mediante código o con un plugin según explico en este artículo.
Tabla de contenidos
Mejorar las imágenes de producto en WooCommerce de forma rápida
Como habrás podido ver de pasada en el vídeo, el plugin (YITH WooCommerce Zoom Magnifier) tiene bastantes más opciones, algunas muy interesantes. Vamos a ver las más importantes.
WooCommerce Zoom Magnifier: opciones generales
Bien, en este primer apartado de opciones generales encontramos tres opciones de configuración:
La primera de ellas solamente sirve para activar o desactivar el efecto del plugin sin llegar a desactivar el plugin propiamente dicho. Normalmente la tendrás que dejar activada, a no ser que queramos probar puntualmente alguna cosa con las imágenes sin desactivar el plugin.
En la segunda opción podemos elegir si queremos que los efectos de zoom y de carrusel se muestren también en dispositivos móviles. Esto va al gusto, aunque lo ideal es dejarlo también activado: el lightbox que WooCommerce tiene por defecto no es muy cómodo en móviles.
La tercera es para gestionar el modo en que el plugin controla el tamaño de las imágenes: si lo desactivas, tú eres el responsable de decirle qué tamaño debe aplicar. Lo recomendable es dejarlo activado, a no ser que sepas lo que haces (y por qué lo haces).
WooCommerce Zoom Magnifier: configuración de la lupa
En el siguiente apartado nos encontramos las opciones para configurar la lupa.
En estas opciones podemos definir, lo primero de todo, el tamaño de la caja de aumento (ancho y alto). Lo mejor es dejar ambas opciones en auto, de forma que se encaje en el espacio asignado por nuestra plantilla a la imagen.
La siguiente opción es para establecer el tamaño que tendrá la imagen dentro de la caja de aumento. Por defecto viene marcado un tamaño de 600×600, que es el recomendable. De todos modos si quieres cambiarlo (no te recomiendo subirlo mucho más y ni mucho menos bajarlo) recuerda que deberás desactivar la última opción del primer apartado.
A continuación vienen las opciones para elegir, tal como hemos visto en el vídeo, la posición de la caja de zoom: a la derecha de la imagen principal o «dentro» de ella. Primero para ordenadores de escritorio y portátiles y después para dispositivos móviles.
Tras elegir el texto que se mostrará mientras se carga la imagen, podemos escoger la opacidad de la lente y si le aplicamos un efecto de emborronamiento al lugar por donde estamos pasando el ratón. Estas dos opciones sólo tendrán efecto, evidentemente, si hemos elegido que la caja de aumento esté a la derecha de la imagen de producto. Si la tenemos «dentro» de ella, el efecto quedará oculto por el propio aumento y no se mostrará.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
WooCommerce Zoom Magnifier: configuración del carrusel
Y por último tenemos las opciones de configuración para el carrusel, es decir, cómo se comportará la galería de imágenes del producto:
La primera opción activa o desactiva el carrusel (si lo desactivamos queda como lo muestra WooCommerce por defecto), mientras que la segunda opción «encaja» dinámicamente el carrusel en su sitio. Sólo tendrás que desactivarla si quieres personalizar la posición o el modo en que se muestra dentro de tu plantilla (márgenes, etcétera).
A continuación podemos elegir el número de imágenes que se mostrarán en la galería. Podemos tener todas las imágenes del producto que queramos, pero mostrar sólo tres (o cuatro, o dos, o las que quieras) y que el resto vayan apareciendo según avance el carrusel.
Las dos últimas opciones nos permiten elegir si queremos que el carrusel sea circular (tras la última imagen vuelve a aparecer la primera) o infinito. Fíjate que un carrusel circular siempre será infinito (por su propia naturaleza), pero se puede elegir un carrusel no circular pero infinito, es decir, que cuando llegue a la última imagen automáticamente «rebobine» de nuevo hasta la primera. Es un efecto curioso.
Conclusión: es obligado mejorar la forma en que WooCommerce muestra las imágenes de producto
Pues ya has visto qué fácil es. Parece mentira que una cosa tan importante en un comercio electrónico como son las imágenes de producto (al fin y al cabo el cliente no puede ver el producto antes de comprarlo y estas imágenes son su guía principal) esté resuelta de una forma tan deficiente o, al menos, manifiestamente mejorable, en WooCommerce.
Pero en fin, gracias a este utilísimo plugin solventar eso es coser y cantar, así que ya no tienes excusa: hacerlo es prácticamente obligado si quieres aumentar el ratio de conversiones en tu ecommerce.
Y si tienes alguna duda, de este tipo o de cualquier otro, tanto con WooCommerce como con WordPress, ya sabes que no tienes más que usar el formulario de contacto que tienes aquí al lado. 🙂
Hola!
Lo descargo, activo y configuro y no ocurre nada en mis páginas de productos .(
Hola Luisa. Recuerda que, para que funcione, tienes que activar la casilla Activate YITH WooCommerce Zoom Magnifier, que está en las opciones (YITH Plugins → Zoom magnifier).
Si la has activado, vigila que no haya un plugin de caché activo que pueda estar mostrándote una versión de la página sin actualizar.
Un saludo!
Si, está activado y no tengo ningún plugin de caché. ¿Puede ser que mi tema no lo permita?
Sí, una vez descartadas las opciones anteriores tenemos que pensar que lo más probable sea que está interfiriendo o bien el tema o bien (menos probable) otro plugin.
Para comprobarlo o descartarlo puedes activar momentáneamente el tema por defecto (cualquier twenty-loquesea) y comprobar si con esa plantilla funciona. Si no es así ya habría que mirar con más detenimiento dónde puede estar el fallo (supongo que tienes WooCommerce actualizado).
Un saludo.
Hola Enrique a mi si que me ha funciono, pero tengo una duda, al poner este plug no da la opción de hacerse grande la foto, que es lo que hago mal?
Muchas gracias por tu tiempo.
Hola María. La verdad es que no sé a qué opción te refieres. Acabo de comprobar la última versión del plugin y las opciones son las mismas que puedes ver en las capturas de pantalla en este post, sólo que ahora lo han traducido a español.
Hola Enrique,
magnífico Post, tengo el mismo problema que María, para ampliar la imagen, no lo hace, aparece una caja donde debería hacer zoom, pero no la amplía, y además si le pongo una imagen mas grande, incluso me la reduce en la pantalla donde debería hacer zoom
Hola Javier. ¿Has probado ya a cambiar la plantilla para comprobar que no sea un problema de compatibilidad?
Un saludo.
Hola que tal, tengo una web con un carruse, l pero no encuentro como cambiar las imagenes de dicho carrusel. Gracias por la ayuda!!!
Hola,
Mira en lo referente a este pluging que es chulisimo pregunto es de pago.Como se yo si wooCommerce esta actualizado o no;doi por seguro que si; si wordpress se actualiza tanbien se supone que esta actualizado no.
Otra cosa sabrias de algun plugins para saber si todos los plugins que tenga uno en el repositorio instalado de su wordpress cada uno son todos conpatibles pues se vuelve algunas veces uno loco .
Gracias
Hola Julio
El plugin es gratuito. En cuanto a la compatibilidad, los plugins declaran siempre a partir de qué versión de WordPress (y de WooCommerce en su caso) pueden utilizarse.
Un saludo
Hola Enrique, llevo horas buscando una solución así de buena. Muchísimas gracias por el post, muy útil. Podría ampliar la lupa para que se vea más grande las imagenes al hacer zoom? no consigo encontrarlo en las opciones avanzadas para configurarlo.
Muchas gracias de nuevo,
Sara
Hola Sara. Gracias por tu comentario, me alegra que el post te haya sido útil.
La opción la tienes en YITH Plugins > Zoom magnifier > Ajustes del zoom > Tamaño de la imagen.
Un saludo.
hola enrrique gracias por tus explicaciones son muy buenas tengo una consulta ami me pasa que cuando uso este plugin y estoy dentro de un producto se ve el zoom bien pero al momento de intentar desplegar el menu de categorias dentro del producto y este queda sobre la imagen no me deja escoger nada del sector que toca la imagen como podria solucionar este conflicto?
Hola Daniel.
Debe ser alguna incompatibilidad con tu plantilla (probable) o con algún otro plugin que tengas en uso (menos probable). Cambia momentáneamente a cualquier twenty-loquesea o a Storefront, para comprobar si así funciona correctamente. Si es así, ya sabes que es una incompatibilidad con el theme.
Un saludo.
Hola Enrique, muy buenos tus aportes, gracias!
Tengo un problema, como veo en los pedidos realizados por los usuarios, que variación tomó? por ejemplo el color y el tamaño, no lo encuentro.
Hola Laura
En los detalles del pedido está indicado (Nombre del producto – Variación). Además, si cada variación tiene su propio SKU, éste también está indicado debajo.
Un saludo.
Hola Enrique. ¿Cómo puedo hacer para que las miniaturas de las imágenes del producto (las imágenes adicionales) se vean al costado derecho y en posición vertical?, ¿es posible eso?. Espero atenta tu respuesta.
Muchas gracias
Hola Pasquala
Puedes hacerlo con este plugin.
Un saludo
para ampliar fotos de los articulos hay que pinchar en un «+» que sale en la esquina de la foto abajo
¿hay forma de que esto lo haga pinchando en la foto?
Hola Olivia
Echa un vistazo a este plugin, es posible que te sirva para lo que necesitas.
Un saludo