{"id":6090,"date":"2020-10-06T11:08:52","date_gmt":"2020-10-06T09:08:52","guid":{"rendered":"https:\/\/www.welaunch.io\/es\/?post_type=faq&#038;p=6090"},"modified":"2024-05-15T13:51:35","modified_gmt":"2024-05-15T11:51:35","slug":"setup-woocommerce-gallery-images","status":"publish","type":"faq","link":"https:\/\/www.welaunch.io\/es\/knowledge-base\/faq\/setup-woocommerce-gallery-images\/","title":{"rendered":"Configurar las im\u00e1genes de la galer\u00eda de WooCommerce"},"content":{"rendered":"<div class=\"row\"  id=\"row-1678929964\">\n\t<div id=\"col-631639682\" class=\"col medium-7 small-12 large-7\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>Cuando hayas instalado correctamente nuestro plugin WooCommerce Attribute Gallery images, podemos empezar a configurarlo. Abre el panel de administraci\u00f3n, que puedes encontrar en WooCommerce > Gallery Images. If you can not see that menu make sure our weLaunch Framework pluginis installed! Es gratuito.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\t<div id=\"col-991255940\" class=\"col medium-4 small-12 large-4\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1312332348\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"646\" height=\"620\" src=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2021\/03\/woocommerce-gallery-images-menu-item.png\" class=\"attachment-large size-large\" alt=\"woocommerce gallery images menu item\" srcset=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2021\/03\/woocommerce-gallery-images-menu-item.png 646w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2021\/03\/woocommerce-gallery-images-menu-item-300x288.png 300w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2021\/03\/woocommerce-gallery-images-menu-item-247x237.png 247w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2021\/03\/woocommerce-gallery-images-menu-item-510x489.png 510w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1312332348 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t<\/div><div class=\"row\"  id=\"row-984348781\">\n\t<div id=\"col-1375567100\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h2>Configuraci\u00f3n general del plugin<\/h2>\n<p>En la configuraci\u00f3n general del plugin de nuestra variaci\u00f3n de im\u00e1genes adicionales plugin que tiene puede activar o desactivar. Lo m\u00e1s importante es que los selectores de contenedores sean correctos al 100%. Por defecto se puede utilizar:<\/p>\n<ul>\n<li>Selector de contenedores de im\u00e1genes El selector de imagen principal (clase css o id). Ejemplo: .woocommerce-producto-galer\u00eda__wrapper (flatsome) O .woocommerce-producto-galer\u00eda<\/li>\n<li>Galer\u00eda de im\u00e1genes Selector de contenedores El selector de im\u00e1genes de la galer\u00eda (clase css o id). Ejemplo: .miniaturas de productos (flatsome) o .woocommerce-producto-galer\u00eda<\/li>\n<\/ul>\n<p>Si ninguna de las opciones anteriores funciona. Usted mismo debe encontrar el contenedor circundante en su tema.<\/p>\n<ol>\n<li>Visite la p\u00e1gina de un producto en su sitio web.<\/li>\n<li>Haga clic con el bot\u00f3n derecho en la imagen del producto e inspeccione el elemento<\/li>\n<li>Ver\u00e1s un objeto div padre del que puedes usar el selector de clase<\/li>\n<li>Repite eso para la galer\u00eda SOLO si no es el mismo, si es el mismo selector ponlos en el campo de imagen de la galer\u00eda tambi\u00e9n.<\/li>\n<\/ol>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_2069029068\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-2 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"522\" src=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-1024x524.png\" class=\"attachment-large size-large\" alt=\"how to find the woocommerce gallery images selector\" srcset=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-1024x524.png 1024w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-300x154.png 300w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-768x393.png 768w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-510x261.png 510w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector.png 1293w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_2069029068 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<p>Adem\u00e1s, puede<\/p>\n<ul>\n<li>Anular la Galer\u00eda WooCommerce por defecto Por defecto nuestro plugin s\u00f3lo cambia la galer\u00eda cuando se selecciona una variaci\u00f3n. Act\u00edvalo para utilizar siempre las funciones de nuestra galer\u00eda.<\/li>\n<li>Mostrar im\u00e1genes de la Galer\u00eda de variaciones en la Galer\u00eda de productos variables Mostrar todas las im\u00e1genes de la galer\u00eda de variaciones en la galer\u00eda de im\u00e1genes del producto variable por defecto.<\/li>\n<li>Galer\u00eda de im\u00e1genes variables Junto a las im\u00e1genes de la galer\u00eda de variaciones, sigue mostrando las im\u00e1genes de la galer\u00eda de variables.<\/li>\n<li>Mostrar im\u00e1genes de la Galer\u00eda de Variaciones en Categor\u00edas A\u00f1adir soporte para que las im\u00e1genes de la galer\u00eda se muestren en los listados. Necesitar\u00e1 nuestro Plugin de Variaciones Individuales y su tema debe admitir la 2\u00aa imagen en los listados (e.g. Flatsome).<\/li>\n<\/ul>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_685811985\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-2 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"742\" src=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/general-variation-images-options-1024x745.png\" class=\"attachment-large size-large\" alt=\"general variation images options\" srcset=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/general-variation-images-options-1024x745.png 1024w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/general-variation-images-options-300x218.png 300w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/general-variation-images-options-768x559.png 768w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/general-variation-images-options-510x371.png 510w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/general-variation-images-options.png 1123w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_685811985 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\t<div id=\"gap-1914115258\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1914115258 {\n  padding-top: 50px;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>Opciones de variaci\u00f3n e imagen en miniatura<\/h2>\n<p>La imagen de variaci\u00f3n y las im\u00e1genes en miniatura de la galer\u00eda pueden tener ambas opciones separadas en total. Por ejemplo por defecto la variable producto principal tiene 1 columna y la galer\u00eda miniaturas 4. Pero tambi\u00e9n se puede cambiar a 6 columnas si lo desea.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\t<div id=\"col-1730339911\" class=\"col medium-6 small-12 large-6\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<ul>\n<li>Columnas<\/li>\n<li>Margen derecho<\/li>\n<li>Alineaci\u00f3n de celdas Alineaci\u00f3n de celdas<\/li>\n<li>Pantalla completa Permite ver el carrusel a pantalla completa. A\u00f1ade un bot\u00f3n para ver y salir a pantalla completa. En la vista de pantalla completa, pulsando ESC saldr\u00e1s de la pantalla completa.<\/li>\n<li>Accesibilidad Activar la navegaci\u00f3n por teclado, pulsando las teclas izquierda y derecha<\/li>\n<li>Altura adaptable Ajustar la altura del carrusel a la diapositiva seleccionada<\/li>\n<li>Reproducci\u00f3n autom\u00e1tica avanza a la siguiente celda<\/li>\n<li>Contiene Contendr\u00e1 celdas al contenedor para que no haya exceso de scroll al principio o al final no tiene efecto si wrap Around est\u00e1 activado<\/li>\n<li>Desplazamiento gratuito Permite desplazarse libremente por el contenido sin alinear las celdas<\/li>\n<\/ul>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\t<div id=\"col-1229039764\" class=\"col medium-6 small-12 large-6\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<ul>\n<li>Carga perezosa Activar la carga perezosa de im\u00e1genes<\/li>\n<li>Porcentaje Posici\u00f3n establece el posicionamiento en valores porcentuales, en lugar de p\u00edxeles<\/li>\n<li>Botones Anterior \/ Siguiente Crea y activa botones para hacer clic en las celdas anterior y siguiente<\/li>\n<li>P\u00e1gina Puntos Crear y activar puntos de p\u00e1gina<\/li>\n<li>Cambie el tama\u00f1o de Escucha los eventos de cambio de tama\u00f1o de la ventana para ajustar el tama\u00f1o y las posiciones<\/li>\n<li>De derecha a izquierda Permite la disposici\u00f3n de derecha a izquierda<\/li>\n<li>Establecer tama\u00f1o de la galer\u00eda Establece la altura de la galer\u00eda desactivar si la galer\u00eda ya tiene altura establecido con CSS<\/li>\n<li>Ver CSS Observa el contenido de :after del elemento<\/li>\n<li>Envolvente Al final de las celdas, se vuelve a la primera para un desplazamiento infinito<\/li>\n<\/ul>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\t<div id=\"col-2019183684\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1911095935\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"545\" src=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/main-image-thumbnbail-settings-1024x547.png\" class=\"attachment-large size-large\" alt=\"main image &amp; thumbnbail settings\" srcset=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/main-image-thumbnbail-settings-1024x547.png 1024w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/main-image-thumbnbail-settings-300x160.png 300w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/main-image-thumbnbail-settings-768x410.png 768w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/main-image-thumbnbail-settings-510x272.png 510w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/main-image-thumbnbail-settings.png 1126w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1911095935 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>Estilismo<\/h2>\n<p>Puede cambiar algunos estilos para que la galer\u00eda se adapte mejor a su sitio web. Cambiar el color del icono de carga, el color del borde de la miniatura o a\u00f1adir un tiempo de carga falso.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1019891281\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"989\" height=\"441\" src=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/styling-options.png\" class=\"attachment-large size-large\" alt=\"variation images styling\" srcset=\"https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/styling-options.png 989w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/styling-options-300x134.png 300w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/styling-options-768x342.png 768w, https:\/\/www.welaunch.io\/es\/wp-content\/uploads\/sites\/12\/2020\/10\/styling-options-510x227.png 510w\" sizes=\"auto, (max-width: 989px) 100vw, 989px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1019891281 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>C\u00f3mo a\u00f1adir m\u00e1s im\u00e1genes a las Variaciones<\/h2>\n<p>Con o plugin es muy sencillo a\u00f1adir m\u00e1s im\u00e1genes de detalle de variaci\u00f3n. Basta con abrir un producto variable y desplazarse hasta las variaciones. Cuando abra una variaci\u00f3n, ver\u00e1 en la parte inferior que puede a\u00f1adir m\u00e1s im\u00e1genes. Arr\u00e1stralos y su\u00e9ltalos para ordenarlos o p\u00e1salos por encima para eliminarlos. Al a\u00f1adir una nueva imagen se utilizar\u00e1 la biblioteca multimedia predeterminada de WP.<\/p>\n<p>https:\/\/www.youtube.com\/ver?v=k99Z1YzIdSY<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t<\/div>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","product_cat":[],"class_list":["post-6090","faq","type-faq","status-publish","hentry","faq_topics-gallery-images"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/faq\/6090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/types\/faq"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/comments?post=6090"}],"version-history":[{"count":9,"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/faq\/6090\/revisions"}],"predecessor-version":[{"id":8837,"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/faq\/6090\/revisions\/8837"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/media?parent=6090"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.welaunch.io\/es\/wp-json\/wp\/v2\/product_cat?post=6090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}