Intercambiar la imagen al pasar el ratón por encima en las categorías de WooCommerce

En lo primero que se fija un cliente cuando navega por una tienda online son las fotos del producto. Por lo tanto, debemos trabajarlas en profundidad para que nos ayuden a vender los productos. El problema es que con la imagen principal muchas veces, no podemos transmitir toda la información, es por eso que tenemos que ofrecer más información visual.

Una de las formas que tenemos en un ecommerce de mostrar más información visual en el catálogo es con los efectos hover, o mejor dicho pasando el ratón por encima de la imagen y que esta cambie, como muestro en este gif:

¿Cómo conseguimos esto en WooCommerce? Algunas plantillas como Astra PRO tienen esta funcionalidad por defecto, si no habría que instalar un plugin. Incluso aunque solo tengamos Astra nos puede venir bien algunos de los plugins que explicaré a continuación.

Índice

Ventajas de cambiar la imagen al pasar el ratón

Ahorra tiempo al cliente, facilitando la información y, en consecuencia, mejora su experiencia de compra de manera significativa.
Aumenta la atención del usuario en los productos que está viendo, impidiendo así que abandone la tienda online.
Mejora la tasa de conversión, ya que acelera la decisión de compra del cliente al ver el producto desde varias perspectivas. Incluso con un vídeo o gif que tenga el producto.

Ahora veremos los plugins, puede ser que algunos no sean compatibles con tu plantilla, si es así, te recomiendo probar otro de los que te muestro.

TP Product Image Flipper for Woocommerce

Plugin simple y gratuito disponible en el repositorio oficial de WordPress o haciendo clic en este enlace. Una vez instalado ya dispondrás de el intercambio de imagen automático en las categorías de WooCommerce.

Tiene algunas personalizaciones como mostrar la segunda imagen como principal de forma automática o eliminar imágenes duplicadas. Aunque no se suelen usar. Su versión PRO tiene muchas opciones interesantes.

Magni Image Flip For WooCommerce

Si buscamos otro plugin gratuito que permita personalizar un poco más os recomiendo probar este. Disponible también en el repositorio oficial de WordPress o haciendo clic en este enlace. Tiene las siguientes opciones extra:

Elegir el estilo de transición entre 3 opciones.
Podemos seleccionar la velocidad de transición.
Se va cambiando la primera y la segunda foto sin pausa.
Permite reproducir gifs.
Podemos habilitar un selector de fotografías para elegir la primera o segunda:

Image Flip & Hover Effects for Your Product Listings de IconicWP

Mi preferido, vale 49$ y lo podéis encontrar en este enlace. Además de hacer lo que hacen los plugins gratuitos nos permite un montón de otras opciones empezando por los 9 efectos de imagen diferentes: Fundido, Deslizamiento, Viñetas, Miniaturas, Zoom, Imagen en imagen, Galería modal, Ampliar y Voltear.

Muchos de ellos muy interesantes como el de imagenes: