Quitar zoom, lightbox y carrusel en un producto de Woocommerce

El zoom, el lightbox y carrusel son las características destacables a la hora de visualizar las imágenes en un producto de Woocommerce. Sin embargo a veces quieres desactivar alguna o todas estas características, o incluso que no permita abrirse la imagen al hacer clic sobre ella (un ejemplo sería un producto virtual que solo utiliza una imagen con texto a modo presentación). O también puede pasar que quieras que lo haga solo en algún producto en concreto de tu catálogo.

En este artículo vamos a ver como eliminar el zoom, el lightbox o el carrusel en los productos Woocommerce, tanto por código como mediante un plugin en todos o solo algún producto. Como opción extra también veremos como desactivar hover en nuestro cursor y que no se abra la imagen al hacer clic sobre ella.

Código para eliminar zoom, lightbox y carrusel en WooCommerce

Esta tarea a pesar de tener que tocar el código es una tarea sencilla y te ahorra tener que añadir a tu web con un plugin más. Simplemente tienes que entrar en el archivo functions.php  de tu tema activo y buscar este código:

Código en functions.php sobre las imagenes en WooCommerce

Recuerda que puedes encontrar el archivo functions.php en la carpeta de tu tema, tanto por ftp, como por el administrador de archivos de vuestro cPanel o la opción más sencilla, en vuestro WordPress, en «Apariencia» > «Editor de temas».

El paso siguiente sería introducir debajo la línea de código de la característica que deseéis eliminar. Aquí os dejo el código para cada una de las características:

remove_theme_support( ‘wc-product-gallery-zoom’ ); //Eliminar zoom

remove_theme_support( ‘wc-product-gallery-lightbox’ ); //Eliminar lightbox

remove_theme_support( ‘wc-product-gallery-slider’ ); //Eliminar carrusel

Quedaría de esta forma:

Eliminar zoom, lightbox y carrusel en producto Woocommerce con código

En este caso hemos deshabilitado todo, el zoom, el lightbox y el carrusel. Si deseas deshabilitar solo alguno de ellos basta simplemente con incluir su línea de código correspondiente.

Esto afectará a todos los productos. Si lo que quieres es que solo afecte a algún producto en concreto tendrás que tirar de plugin que es la otra alternativa que te voy a explicar en el apartado siguiente.

Desactivar zoom en WooCommerce, lightbox y carrusel mediante plugin

Si eres de los que no le gusta tocar código y simplemente quieres estos cambios en solo alguno de tus productos esta es la solución.

Instala en tu WordPress el siguiente Plugin para desactivar zoom, lightbox, carrusel de producto en Woocommerce.

Eliminar zoom, lightbox y carrusel en producto Woocommerce con plugin

Después de instalar el plugin, vete a la edición del producto que quieras hacer los cambios y verás en la parte derecha una nueva caja donde podrás marcar que característica desactivar y listo.

Desactivar zoom woocommerce

Desactivar hover y que no se abra la imagen al hacer clic sobre ella

Si realmente lo que quieres es que el puntero del ratón no haga hover ni permita abrir la imagen de ninguna forma al hacer click, sigue este paso.

Lo que tienes que hacer es entrar en tu editor css en WordPress, mismo el que se encuentra en Apariencia > Personalizar > CSS adicional y añadir el siguiente código:

.woocommerce div.product .images, .woocommerce-page div.product .images {

pointer-events: none !important;

}

Verás algo así, le das a publicar y listo.

Desactivar hover y apertura imagen producto

¿Todavía te parece demasiado complicado?

Recuerda que puedes contactar con nosotros para que te demos soporte web.

Bueno, y hasta aquí hemos llegado. Como ves hay varias formas de desactivar el zoom y el resto de opciones en las imágenes de producto de tu WooCommerce. Puedes optar por la que te parezca más cómoda o la que mejor se adapte a lo que buscas para tu tienda online.

Espero que el artículo os haya servido de ayuda. No olvides que dejarnos un comentario si tienes alguna duda o quieres contarnos tu experiencia y si te ha funcionado o no.

ebook gratuito Socialxpl.

Los 7 pasos [probados] para vender más en internet

Rellena tus datos y recibe el eBook al instante en tu correo electrónico (si no lo encuentras, busca en la capeta de Spam o Promociones).

+La finalidad de este formulario es poder enviarte más información, contenidos y recursos para ayudarte a construir un negocio en Internet. La base de legitimación es tu consentimiento, tu nombre y dirección de correo serán almacenados en Active Campaign (herramienta acogida al acuerdo de seguridad EU-US Privacy Shield) y el responsable de su tratamiento es Marcos Pastoriza. Consulta la la política de privacidad para conocer más información así como tus derechos de acceso, rectificación, cancelación y objeción.

También te podría interesar...

3 comentarios

    1. Hola Alexander. Lamentablemente no dispongo de otro código. Puede que tras las actualizaciones de wordpress requiera alguna modificación, pero ya no nos dedicamos a este tipo de servicios.

  1. No funciona este codigo
    .woocommerce div.product .images, .woocommerce-page div.product .images {

    pointer-events: none !important;

    }

Deja una respuesta

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