Lightbox no funciona en WooCommerce después de actualizar

Lightbox no funciona en WooCommerce después de actualizar

Si hace poco has actualizado tu tienda online desarrollada con WooCommerce a la versión 3.0 probablemente te habrás topado con que el lightbox de la galería de productos no funciona. Mientras antes al hacer click sobre una de las miniaturas ésta se abría en grande por encima de la web, ahora sencillamente se carga dentro de la ventana del navegador como un enlace normal. Y no solo eso, sino que en los ajustes del panel de control de WordPress donde se configuran las dimensiones de las imágenes para la tienda ha desaparecido el checkbox con la opción que activaba lightbox. Pero que no cunda el pánico, aquí vamos a ver qué ocurre y cómo solucionarlo.

El motivo es que se ha hecho un rediseño completo de la galería y en consecuencia la anterior ya no tiene soporte quedando así obsoleta. Pero esto lejos de ser un problema es una gran noticia pues se ha mejorado significativamente la experiencia de usuario así como sus funciones y nuestras posibilidades a la hora de personalizar. La contra es que si usas una plantilla que esté preparada para una versión anterior de WooCommerce, tendrás que adaptarla. Pero antes de ver cómo implementamos la nueva galería, conviene aclarar un poco con qué nos vamos a encontrar.

Lo primero sería decir que por defecto viene desactivada y desde el backend no se puede controlar, algo que quizá te parezca desconcertante al principio pero cuyo trasfondo tiene mucho sentido. El objetivo que se ha querido alcanzar es permitir al desarrollador de la plantilla decidir si usará la galería por defecto o utilizará una de su elección, sea con una implementación propia o mediante un plugin. De este modo se evita cargar código que no será usado y también problemas de compatibilidad entre librerías.

En segundo lugar, la galería ahora es mucho más intuitiva para el usuario. Si antes había una foto destacada y después las miniaturas se abrían directamente en el lightbox, ahora se van cargando en el espacio de la destacada con una animación tipo slider y luego podemos decidir si queremos verla a tamaño completo en el lightbox. Pero además tenemos la posibilidad de hacer zoom para ver en detalle ciertas partes, lo cual es ideal para ver los acabados del producto.

Aclarado lo anterior, para activar la nueva galería incluiremos una nueva función en el archivo function.php del tema. WooCommerce nos va a permitir decidir qué características de las que comenté antes estarán disponibles.

add_action( 'after_setup_theme', 'galeria_woocommerce' );
 
function galeria_woocommerce() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}

Lo que hemos hecho en el ejemplo anterior es crear una función llamada galeria_woocommerce y dentro de ella registrar el soporte para zoom, lightbox y slider mediante add_theme_support(). Después usamos el hook after_setup_theme para llamar a nuestra función una vez se ha inicializado el tema.

La nueva galería ya se debería encontrar operativa después de añadir este script. Sin embargo, tanto si desactivaste los estilos por defecto de WooCommerce como si los quieres personalizar, tendrás que hacer los ajustes correspondientes en tu hoja de CSS. En el enlace anterior tienes más detalles sobre las clases que debes usar.

4 respuestas a «Lightbox no funciona en WooCommerce después de actualizar»

  1. Avatar de Ric
    Ric

    Excelente aporte. Muchas gracias, tenía justamente ese problema y funciono de maravilla el script.
    Me alivio un gran dolor de cabeza.

    Muchas gracias!!

    1. Avatar de Jesús Tovar

      Gracias a ti Ric por comentar tu experiencia, me alegra que te haya servido.

      ¡Un saludo!

  2. Avatar de REWD
    REWD

    No funciona, lo he puesto de diferentes maneras y nada…
    Sería bueno que hiciera un video explicando, mucha gente se confunde y/o no sabe de códigos.
    El video es más fácil de hacerlo paso a paso como se debe hacer.

    1. Avatar de Jesús Tovar

      Hola REWD,

      Gracias por tu comentario. Existen múltiples motivos por los cuales puede que a ti no te funcione, desde que estés usando una plantilla que no has hecho tú y sobreescriba la galería nativa o genere conflicto, hasta simplemente que comentas algún error sin darte cuenta a la hora de implementar el script. Estas cuestiones operan al margen de que lo explique por escrito o mediante un vídeo, sin conocer los detalles de tu problema es complicado saber qué ocurre así que te invito a que los compartas.

      Entiendo perfectamente lo que dices, es posible que algunas personas que no tengan conocimientos sobre programación encuentren confuso este artículo. Al tratarse de un blog más o menos técnico sobre diseño y desarrollo web, ocurre que en algunas entradas es imposible bajar más el nivel sin tener que explicar otras cosas básicas y que requerirían extenderme más. No descarto en un futuro usar los vídeos de manera conjunta como material explicativo, sin embargo ahora mismo no dispongo del tiempo necesario para abordar esa vía. Igualmente gracias por la sugerencia.

      Un saludo.

Deja una respuesta

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