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

webempresa woocommerce diegol

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:

efecto hover woocommerce imagenes

¿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.

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:
flip imagenes woocommerce

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:

galeria de imagenes en catálogo woocommerce

Tenéis todas las personalizaciones posibles en el vídeotutorial de este post.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)
template monsters diegol

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

Reader Interactions

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *