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 ...

PobreRegularEstá bienMuy buenoExcelente (4 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

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD 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