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.
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.
Esto puede ser muy interesante si vendes productos físicos, pero puede tener menos sentido si vendes cursos o productos digitales, ¿no crees?
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 2055 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 2055 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. 😉
