Cómo hacer que tu tema muestre la nueva galería de WooCommerce

,La próxima versión 3.0 de WooCommerce, denominada jocosamente como la mariposa biónica, viene con interesantes novedades, y una de las más visuales será el rediseño completo de la galería de imágenes de producto.

Novedades de la galería de producto de WooCommerce

Las novedades que encontrarás serán las siguientes:

  • Los visitantes ahora podrán ver las imágenes de la galería del producto tanto en formato emergente (la actual mesa de luz) como de magnificación (se amplían al pasar el cursor)
  • El comportamiento de la galería será más intuitivo pues al hacer clic en una miniatura se actualizará la imagen principal en vez de abrir la mesa de luz.
  • Tremendas mejoras en dispositivos móviles, como gestos, toques, deslizar para moverse por la galería, pulsar para hacer zoom, deslizar para acercar, etc.
  • Al abrir la mesa de luz en un móvil ahora muestra la imagen a su tamaño real en vez de dentro de la página.
  • Nueva vista de carrusel.

Por supuesto, nada de esto funcionará, una vez actualices a WooCommerce 3.0, si tu tema no está adaptado, si no es compatible con estas novedades.

Añadiendo compatibilidad con la nueva galería de WooCommerce

Para añadir la compatibilidad tendrás que incluir lo siguiente en el archivo functions.php del tema:

Añadiendo estilos

Además, si tu tema desactiva por defecto los estilos del núcleo de WooCommerce, también tendrás que crear una nueva estructura de estilos para la nueva galería. Las clases con las que tendrás que trabajar serán las siguientes:

  • .woocommerce-product-gallery – Este wrapper también incluye una clase que indica cuántas columnas de miniaturas deben mostrarse, por ejemplo: .woocommerce-product-gallery--columns-4
    • .woocommerce-product-gallery__wrapper – El wrapper del carrusel
      • .woocommerce-product-gallery__image – La figure que contiene la imagen en sí misma, que está envuelta en un anchor
  • .woocommerce-product-gallery__trigger – Este será el enlace que lanza la funcionalidad de la mesa de luz-
  • .flex-control-thumbs – Si usas la funcionalidad del carrusel entonces el script de Flexslider crea las miniaturas en un ol con esta clase.

Una nota adicional sobre la clase de columnas … Si vislumbras que tus usuarios querrán cambiar las columnas usando el filtro woocommerce_product_thumbnails_columns puede que también quieras incluir estilos para el resto de estructura de columnas además del principal.

Si quieres echar un vistazo a cómo están implementados estos estilos puedes ver en este enlace el código del tema StoreFront, que ya los tiene incluidos.

¿Cómo es la nueva galería de WooCommerce?

En este vídeo puedes verla en todo su esplendor…

Y si no quieres esperar a que esté disponible la nueva versión de WooCommerce, ya puedes descargar la versión RC en este enlace.


Nota: Habrás notado que hablo de WooCommerce 3.0 pero en el vídeo indica que es la versión 2.7. La realidad es que se ha decidido dar el salto desde la versión 2.6.x a la 3.0, en vez de a la 2.7, debido a los grandes cambios que incorpora y – supongo – también por cuestiones más comerciales.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (6 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.

Autor del libro WordPress – La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar