• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Eliminar el zoom de la imagen de un producto en WooCommerce

Aprende en este tutorial cómo eliminar el efecto de zoom en las imágenes de producto de WooCommerce mediante un sencillo snippet de código.

Una de las ventajas de Código Genesis es que los suscriptores pueden sugerir tutoriales. El otro día, uno de ellos me preguntó si se podía eliminar la lupa y el zoom que hay en las imágenes de WooCommerce.

imagen producto WooCommerce con lupa y zoom activado.

Por defecto, WooCommerce muestra un icono de una lupa en la imagen de producto y si haces hover por encima te amplía la imagen.

imagen producto WooCommerce ampliada al pasar por encima.

Esto puede ser muy interesante si vendes productos físicos, pero puede tener menos sentido si vendes cursos o productos digitales, ¿no crees?

imagen producto WooCommerce sin lupa y zoom deshabilitado.

Así que aquí tienes cómo hacerlo:

Pasos para eliminar el zoom y la lupa de las imágenes de WooCommerce

Para deshabilitar el zoom te voy a mostrar dos snippets, ya que dependiendo del tema o los plugins que estés usando es posible que alguno de ellos no te funcione.

1A. Eliminar el soporte del tema al zoom de WooCommerce

Para ello, añade el siguiente fragmento al final del fichero functions.php o a tu plugin de funcionalidades:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Ambas estrategias consiguen lo mismo, así que puedes usarlas indistintamente. Eso sí, usa solo una de ellas. 😉

2. Ocultar la lupa mediante CSS

Para eliminar el icono de la lupa, añade el siguiente fragmento al final del fichero style.css:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Conclusión

Como ves, con unas pocas líneas de código puedes deshabilitar el zoom de las imágenes de WooCommerce y eliminar el icono de la lupa.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

CSS PHP Productos Título WooCommerce

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?