¡Hey! Si estás aquí, es probable que el zoom y el lightbox de las imagenes de los productos en WooCommerce te esté dando más dolores de cabeza que beneficios. Ya sabes, ese efecto que hace que las imágenes de tus productos se vean en una ventana emergente, pero que a veces… simplemente no va con el estilo de tu tienda. ¡No te preocupes! Tengo justo lo que necesitas para solucionarlo.

¿Qué es el zoom y el lightbox en el producto?

El zoom y el lightbox son funcionalidades esenciales en WooCommerce para ofrecer una visualización detallada de los productos, pero a veces resulta poco práctico en la experiencia de usuario, para no decir, tedioso. Existen situaciones en las que podría ser beneficioso desactivar estas características, como en el caso de personalizar y mejorar la experiencia de compra en productos específicos.

Así que en esta guía exploraremos métodos efectivos para quitar o desactivar el zoom y el lightbox en tus productos de WooCommerce. Abordaremos tanto soluciones a nivel de código como la implementación de plugins, permitiéndote una adaptación flexible a tus necesidades específicas. Adicionalmente, descubrirás cómo deshabilitar el efecto hover en el cursor para prevenir que las imágenes se abran al clickear, mejorando así la usabilidad en ciertos contextos.

En resumen, a veces menos es más y queremos que nuestra tienda sea tan limpia y rápida como el rayo. ¡Vayamos por ello!

¿Cómo quitar zoom en un producto de WooCommerce?

Para decirle adiós al zoom en los productos de WooCommerce, vamos a meternos un poco con el código. Pero tranqui, no es nada del otro mundo y así nos ahorramos cargar nuestra web con otro plugin más. Es una pequeña aventura en el código que, prometo, será más fácil de lo que suena.

Paso 1: El Encuentro con functions.php

Puedes encontrarlo a través del Editor de Temas en el admin de WordPress, usando un cliente FTP, o desde el Administrador de Archivos si tienes cPanel. La ruta mágica es wp-content/themes/el-nombre-de-tu-tema/, y ahí estará, esperándote.

Esta vez vamos a meternos de lleno con el Editor de Temas. Para ello, primero nos damos un paseo por el área de Apariencia y hacemos clic en «Editor de temas«. ¿Ves esa lista de archivos que aparece a la derecha de la pantalla? Ahí es donde está el tesoro. Busca el archivo functions.php entre ellos, porque ese es el que vamos a editar.

Aquí se puede visualizar el editor de temas de wordpress, en donde tenemos seleccionado el archivo functions.php
Aquí se puede visualizar el editor de temas de wordpress, el tema activo es un tema hijo de Hello Elementor; ya tenemos seleccionado el archivo functions.php.

Paso 2: Quitar el Zoom y el Lightbox

Ahora, con el functions.php abierto y listo para la acción, vamos a inyectar este código que es básicamente un hechizo anti-zoom:

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

Con esto, le estás diciendo a WooCommerce: «Querido, necesitamos un espacio. Es hora de que el zoom y el lightbox encuentren otros sitios donde brillar».

Paso 3: Guarda, Verifica y Celebra

Recuerda que este cambio afectara a todos los productos, guarda tu código cuidadosamente al final del archivo, asegurándote de no alterar el código existente.

Ejemplo del código php para quitar el zoom y el lightroom en un producto de WooCommerce por medio del editor de temas de WordPress.
Ejemplo del código php para quitar el zoom y el lightroom en un producto de WooCommerce por medio del editor de temas de WordPress.

¡Presta atención! En esta imagen de ejemplo, no solo estamos haciendo magia para quitar el zoom de la imagen del producto con un poco de código, sino que también al lightbox. Más adelante, voy a revelarte cómo conseguir el mismo efecto usando solo CSS. ¡Así es, vamos a mantenerlo sencillo pero efectivo!

¿Cómo quitar el lightbox en un producto de WooCommerce?

Aquí también vamos a sumergirnos en el mundo del código para decirle ‘hasta nunca’ al lightbox en las imagenes de nuestras páginas de productos de WooCommerce. ¡Todo esto con un poco de magia CSS!

Paso 1: Accede a tu área de Personalización de CSS

Primero, vamos a navegar por la parte fácil. Dirígete a tu escritorio de WordPress y busca la opción de Apariencia > Personalizar. Una vez ahí, busca el apartado de CSS adicional. Este espacio mágico es donde vamos a escribir unas líneas de código que harán toda la diferencia.

Paso 2: Desactiva el Lightbox con CSS

Ahora, con la ventana de CSS adicional abierta, es hora de desplegar nuestro hechizo. Copia y pega el siguiente código:

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    pointer-events: none;
}

Este código CSS básicamente hace invisible el botón del lightbox y desactiva la interactividad con las imágenes de la galería. Esto significa que tus clientes aún pueden ver las imágenes de tus productos, pero sin la opción de abrir el lightbox.

Paso 3: Guarda y Verifica

Después de añadir tu código, no olvides hacer clic en Publicar para guardar tus cambios. Luego, ve a tu tienda y abre la página de cualquier producto para asegurarte de que el lightbox ha desaparecido.

¿Por Qué Decirle Adiós al Lightbox?

Puede que te preguntes, ¿por qué querría alguien desactivar el lightbox? Bueno, todo se reduce a la experiencia de usuario y la estética de tu tienda. Sin el lightbox, tus páginas de productos cargan un poco más rápido, ofreciendo una experiencia más directa y sencilla, especialmente si estás vendiendo artículos donde un zoom profundo en las imágenes no es crucial.

En Resumen

Desactivar el zoom y lightbox en la visualización de productos de WooCommerce no tiene por qué ser complicado ni requerir plugins adicionales que sobrecarguen tu sitio. Con unos simples pasos y algo de CSS, puedes lograr una presentación de imágenes de producto más limpia y rápida. ¡Espero que esta guía te haya sido de utilidad y que tu tienda luzca exactamente como la quieres!

Unos Tips Antes de Despedirnos