Vamos a ver cómo eliminar el zoom en las imágenes de productos en Woocommerce (efecto lupa). Así como quitar el Lightbox y el slider.
En la actual versión de Woocommerce ya no hay opciones para poder desactivar el zoom (lupa) sobre la imagen de productos. Tampoco hay opciones en Woocommerce para quitar el Lightbox o mesa de luz de la imagen de producto o el slider de las imágenes de la galería de la ficha de producto.
Existen dos maneras fundamentales para quitar estos efectos sobre la imagen de la ficha de producto en Woocommerce: A través de código o con un plugin gratuito.
Con el código podremos desactivar el zoom y resto de opciones de manera global. Es decir, para todos los productos de Woocommerce
Pero, ten en cuenta que con el plugin solo será posible desactivar estas opciones producto a producto. Por lo que no es recomendable si tenemos ya muchos productos. Sería interesante cuando lo que queremos es desactivar el zoom, slider o lightbox en una serie de productos específicos.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE QUITAR ZOOM LIGHTBOX SLIDER DE IMAGEN PRODUCTOS WOOCOMMERCE
1.- Desactivar zoom, lightbox o slider de imágenes de productos de Woocommerce con código.
Para desactivar el zoom en las imágenes de la ficha de productos de Woocommerce, el lightbox o el slider, tendremos que introducir un código en el archivo functions.php
Esto lo puedes hacer de tres maneras fundamentales:
- a.- Utilizar el plugin Code Snippet: es sin duda la forma más sencilla, si no tienes conocimientos técnicos, es la que te recomiendo. Además, con este sistema el código no dependerá de la plantilla que estés utilizando. En este post, tienes toda la info de cómo se instala y utiliza el plugin Code Snippet para añadir un código al archivo functions.php muy fácilmente
- b.- Modificar el archivo functions.php del tema hijo: Si tienes un tema hijo o child theme puedes añadir el código al archivo functions.php (en caso de que tengas el archivo dentro del tema hijo). Si no lo tienes, puedes crear el archivo y añadirlo a tu tema hijo. En este post tienes toda la info sobre los temas hijo o child themes en WordPress. Esta opción siempre es mejor que editar el archivo functions.php del tema padre. Ya que si lo hacemos en el tema hijo, al actualizar la plantilla padre no perderemos los cambios.
- c.- Modificar el archivo functions.php del tema padre: Esta sería la peor opción, ya que si añadimos el código al archivo functions.php del tema padre, perderemos ese código al actualizar la plantilla. Por lo que no te recomiendo esta opción.
1.1.- Código para quitar los efectos de imagen en la ficha de producto con Woocommerce.
Sea cual sea el método que utilices para añadir el código al archivo functions.php entre los que te he comentado en el apartado anterior, el código a añadir será el siguiente, según que función quieras desactivar:
1.1.1.- Código para eliminar el zoom en la imagen de la ficha de producto Woocommerce
function remove_image_zoom_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );
1.1.2.- Código para desactivar el Lightbox o mesa de luz de la imagen de producto en Woocommerce y el slider
add_action( 'after_setup_theme', 'remove_wc_gallery_lightbox', 100 );
function remove_wc_gallery_lightbox() {
remove_theme_support( 'wc-product-gallery-lightbox' );
}
2.- Desactivar el zoom, slider y/o ligtbox con un plugin
Se trata del plugin gratuito WooCommerce Product Image Gallery Options
El plugin hace tiempo que ya no se actualiza. Pero yo lo he probado con la versión actual de Woocommerce (en el momento de crear este post) y funciona.
Lo que tienes que tener en cuenta, es que este plugin te permite desactivar estas opciones de las imágenes de productos de manera individual y NO global. Si te interesa realizar esto de manera global, has de utilizar los códigos que se han visto en el apartado anterior.
El plugin es super sencillo. Una vez que lo hayas instalado y activado, al editar o crear un producto te aparecerán las siguientes opciones:
- a.- Hide image zoom: si marcas esta opción se ocultará el efecto zoom sobre la imagen del producto que estás editando.
- b.- Hide image Lightbox: si marcas esta opción se ocultará el Lightbox o mesa de luz de Woocommerce. Pero, se mostrará el que tenga por defecto tu plantilla.
- c.- Hide imagen Slider: si marcas esta opción se ocultará el efecto slider de las imágenes de la galería.
Realiza tus modificaciones y guarda el producto
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
