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.»
|
Esther, gracias por estos aportes, si vieras cuanto busque esta solución,
Un abrazo desde Colombia.
|
Muchísimas gracias Diego! Un abrazo,
|
Hice lo que dice en el post y no me funciona, algo estoy haciendo mal?
|
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!
|
Buen día, el tema que manejo es el que viene por defecto storefront, hago lo que dices y no me funciona, feliz dia.
|
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?
|
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!