Veteasabertu

Lightbox no funciona en WooCommerce después de actualizar

2 de julio 2017
Lightbox no funciona en WooCommerce después de actualizar

Si hace poco has actualizado tu tienda online montada 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.

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.

Publicado por Jesús Tovar

Categorías: PHP, Programación, WordPress

Etiquetas: ,

2 comentarios

  1. REWD dice:

    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.

    • Jesús Tovar dice:

      Hola REWD,

      Gracias por tu comentario, las opiniones siempre son bienvenidas. 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. Sin embargo ten en cuenta que se trata de un blog principalmente técnico sobre desarrollo web orientado a profesionales, por lo que en algunas cuestiones es imposible bajar más el nivel sin tener que explicar otras cosas básicas y que requerirían casi un monográfico.

      Un saludo.

Pingback

Deja un comentario

Este sitio web utiliza cookies para mejorar la experiencia de usuario, si continúas navegando estás dando tu consentimiento. Para más información pincha aquí.

ACEPTAR
Aviso de cookies