Quitar lupa en las imágenes de los productos de Woocommerce

Este snippet de código para WordPress te permite desactivar la funcionalidad de lupa y lightbox en las imágenes de los productos de WooCommerce. Si consideras que estas características no son necesarias para tu tienda en línea o simplemente deseas simplificar la experiencia del usuario, este snippet es la solución perfecta.

¿Cómo Funciona?

Este snippet se compone de dos partes principales:

  1. Desactivar la Lupa: La primera parte del código utiliza el hook woocommerce_init para desactivar la funcionalidad de lupa en las imágenes de los productos.
  2. Desactivar el Lightbox: La segunda parte del código utiliza el hook after_setup_theme para desactivar la funcionalidad de lightbox.

Casos de Uso

  1. Simplificar la UX: Si tu tienda en línea se centra en productos donde el zoom y el lightbox no añaden valor, este snippet es útil para simplificar la experiencia del usuario.
  2. Mejorar el Rendimiento: Desactivar estas funcionalidades puede contribuir a una carga más rápida de la página.
  3. Personalización: Si planeas implementar tu propia funcionalidad de visualización de imágenes, este snippet te permite desactivar las opciones predeterminadas de WooCommerce.

Cómo Implementar el Snippet

  1. Accede al Panel de WordPress: Ve a tu panel de administración de WordPress.
  2. Editor de Temas: Navega a Apariencia > Editor de temas.
  3. Archivo functions.php: Encuentra y abre el archivo functions.php de tu tema activo.
  4. Pega el Código: Copia y pega el snippet en el archivo functions.php.
  5. Guarda los Cambios: Haz clic en «Actualizar archivo» para guardar los cambios.

 

// Quitar lupa en las imágenes de los productos de Woocommerce
add_action ('woocommerce_init', function () {
    remove_theme_support ('wc-product-gallery-zoom');
});

function remove_wc_gallery_lightbox() {
    remove_theme_support( 'wc-product-gallery-lightbox' );
}
add_action( 'after_setup_theme', 'remove_wc_gallery_lightbox', 100 );

 

Consideraciones

  • Asegúrate de hacer una copia de seguridad de tu sitio web antes de realizar cualquier cambio en los archivos del tema.
  • Este snippet ha sido diseñado para trabajar con WooCommerce. Si estás utilizando un plugin diferente para tu tienda en línea, este código puede no ser compatible.
  • Si deseas volver a habilitar estas funcionalidades en el futuro, simplemente elimina o comenta las líneas de código correspondientes en tu archivo functions.php.

Con este snippet, podrás desactivar fácilmente la lupa y el lightbox en las imágenes de los productos de tu tienda WooCommerce, ofreciendo una experiencia de usuario más simplificada y posiblemente un mejor rendimiento del sitio web.

 

¡Más Snippets, Más Opciones!

Al compartir, motivamos a más desarrolladores a contribuir. Ayúdanos a hacer de este directorio un punto de referencia en snippets.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

¿Necesitas un snippet? Pídenoslo

¿No encuentras el código que necesitas? Pídenoslo y te ayudamos. También puedes publicar tus snippets.

¿Cómo implementar este snippet en la web?

Tienes 2 opciones, una de ellas es mediante plugin y la otra pegando el código en tu web.

1. Añadir snippet con plugin

code-snippets

Code Snippets

Por Code Snippets Pro

  1. Descarga el plugin o búscalo en el repositorio de plugins de Wordpress e instálalo en tu web.
  2. En el menú lateral del Escritorio verás un nuevo enlace (Fragmetos de código). Ves a Fragmentos de código > Añadir nuevo.
  3. Se abrirá una página con un título, bloque de código, descripción y etiquetas, rellena el título con el que quieras guardarlo, ejemplo: Añadir Google Analytics.
  4. En la parte código verás que está activo PHP, ahí pega el código del snippet
  5. La descripción y las etiquetas solo son para tu información y para que luego encuentres más fácil los snippets.
  6. Publicar y activar el snippet.

2. Añadir snippet en el functions.php

Diseño web con WordPress

Accede al archivo functions.php de tu tema o tema hijo, pega el snippet y guarda el archivo.

Lo encontrarás en Apariencia > Editor de archivos de tema, pinchas sobre el enlace  functions.php y pegas el código al final del archivo.

condiciones de uso diseño web

¿Necesitas un snippet?

Cuéntanos que necesitas e intentaremos crear un snippet que lo realice. Si lo conseguimos, lo publicaremos y te avisaremos por correo.

¡Comparte tu snippet!

Si has creado un snippet y quieres compartirlo, envíanoslo y lo publicaremos enlazando tu web debajo de la publicación.

Relacionados:

Enviar contenido a mi correo

Guárdarte el contenido en tu correo para probarlo más tarde.