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:

//Compatibilidad con galerías a partir de WooCommerce 3.0>
add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

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 Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(9 votos, promedio: 4.8)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

15 comentarios en “Cómo hacer que tu tema muestre la nueva galería de WooCommerce”

  1. Buenas Fernando, he actualizado Woocommerce 3.0, pero me interesa la antigua galería con lightbox. Sabes como puedo volver a la antigua y que funcione el lightbox?

    1. Las nuevas galerías también tienen lightbox, pero si quieres quitar las nuevas del todo quita de tu tema el soporte de las galerías. Busca el código que he puesto arriba y lo borras, sencillo

  2. Pingback: WooCommerce 3.0 - Todas las novedades

  3. Talismanes Amuletos

    Hola
    Yo acabo de actualizarme a la nueva actualización de Woocommerce 3.0 y sólo veo problemas. He corregido algunos, como la visibilidad de las imágenes, pero actualmente no puedo ver las imágenes de las variables de productos. Mis productos en venta tienen varias posibilidades y cuando el cliente la elegía aparecía la foto correcta de la elección. Eso ahora no funciona y no sé como arreglarlo…si me ayudas? Un saludo desde http://www.talismanesyamuletos.com y felicidades por tu trabajo, acudo aquí a menudo para encontrar soluciones.

  4. Luis Ariel Alvarez Dominguez

    Buenos días Fernando, una pregunta en que línea del código añado la compatibilidad de las galerías.
    Gracias y excelente información la que proporcionas.

      1. Luis Ariel Alvarez Dominguez

        Perdón pero soy nuevo en esto, si es posible que me ayudes por favor, te
        envío una parte del código de mi tema para que revises el nombre de
        tema y abajo el código que se tiene que añadir para que funcionen las
        galerias, pero no se si así es correcto o falta algo

        function layers_coffee_presets( $layers_preset_layouts ){
        $sunset_coffee_presets[ ‘sunset_coffee-home’ ] = array(
        ‘title’ => __( ‘Sunset Coffee – Home’, ‘layers-sunset-coffee’ ),
        ‘screenshot’ => ‘http://s.wordpress.com/mshots/v1/http%3A%2F%2Fsites.layerswp.com%2Fcoffee%2F?w=320&h=480’,
        ‘screenshot_type’ => ‘png’,

        add_action( ‘after_setup_theme’, ‘layers_coffee_setup’ );

        function layers_coffee_setup() {
        add_theme_support( ‘wc-product-gallery-zoom’ );
        add_theme_support( ‘wc-product-gallery-lightbox’ );
        add_theme_support( ‘wc-product-gallery-slider’ );
        }

        Muchas gracias

  5. Hola. He puesto esta galeria en mi web, y al cambiar de imagen me salen pixeladas, solo se me visualiza bien la que pongo como Imagen de producto. ¿Saben por qué o cómo solucionarlo? Gracias

  6. Antonio Pérez

    Hola Fernando. He llegado a este hilo de la conversación porque tengo problemas con la galería de productos de una tienda online. Antes se veían las imágenes secundarias de la galería debajo y en su correspondiente tamaño (más pequeñas), pero ahora tienen todas el mismo tamaño que a principal y en ajustes me dice «Los ajustes de este tamaños de imagen se han desactivado porque sus valores los ha sobreescrito un filtro.» ¿Qué puede haber pasado? Muchas gracias.

Deja un comentario

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

 

Ir arriba Ir al contenido