Como activar la galería de imágenes de producto de WooCommerce 3.0.

[…]


por

Una de las novedades de la nueva versión de WooCommerce es la galería de fotografías en la ficha de producto.

 

Las nuevas características permiten una mejor visualización en móvil y un lightbox nativo.

Para activarlo, debemos añadir este código en nuestro archivo de funciones o en un snippet:

 

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' );
}
Ojo que si tu tema ya traía funciones de lightbox para tus productos y no se ha actualizado para la última versión de WooCommerce es posible que te de algún problema.
También es posible que se desajuste el estilo de la foto principal de producto y las miniaturas. Aunque dependerá del tema que utilices, yo he podido solucionarlo en la mayoría de casos añadiendo estos estilos:
.woocommerce ul.products li.last, .woocommerce-page ul.products li.last { margin-right:2%;}
.woocommerce div.product div.images .flex-control-thumbs li { margin:2% !important; }
.woocommerce-product-gallery__wrapper { margin:1em 0px; }
En este enlace tienes más información sobre esta nueva funcionalidad y sobre más estilos CSS que puedes utilizar para personalizarlo.

 

Comentarios

7 respuestas a «Como activar la galería de imágenes de producto de WooCommerce 3.0.»

  1. Avatar de Diego

    |

    Esther, gracias por estos aportes, si vieras cuanto busque esta solución,

    Un abrazo desde Colombia.

    1. Avatar de esther

      |

      Muchísimas gracias Diego! Un abrazo,

  2. Avatar de Jon Montoya

    |

    Hice lo que dice en el post y no me funciona, algo estoy haciendo mal?

    1. Avatar de esther

      |

      Hola Jon! Es difícil de saber, pero seguramente no es que estés haciendo nada mal, sino que en tu plantilla o en algún plugin utilizado hay alguna otra función que interfiere.

      Saludos!

      1. Avatar de Jon Montoya

        |

        Buen día, el tema que manejo es el que viene por defecto storefront, hago lo que dices y no me funciona, feliz dia.

  3. Avatar de Alan

    |

    Esther, estoy utilizando el tema de pago «OverALL WordPress Theme Versión: 1.3» con
    Versión de WooCommerce: 3.4.3 los productos no muestran la galería de imágenes aunque están ahí, lo se porque al poner el cursor en el espacio (en blanco) que corresponde a la imagen me muestra el titulo de la misma, ya intente arreglarlo con plugins como Force Regenerate y similares, también intente desactivando cada plugin, con el código que proporcionas y nada… ¿tienes una idea de que pueda ser y como arreglarlo?

    1. Avatar de esther

      |

      Hola Alan,
      Pues la verdad es que no se que puede ser… fíjate en que url está intentando cargar (mira en el inspector de código) y que la imagen realmente existe en esa url.
      Sino prueba de consultar al soporte del theme, a ver si saben cual puede ser el problema.

      Saludos!