{"id":6090,"date":"2020-10-06T11:08:52","date_gmt":"2020-10-06T09:08:52","guid":{"rendered":"https:\/\/www.welaunch.io\/fr\/?post_type=faq&#038;p=6090"},"modified":"2024-05-14T13:46:39","modified_gmt":"2024-05-14T11:46:39","slug":"setup-woocommerce-gallery-images","status":"publish","type":"faq","link":"https:\/\/www.welaunch.io\/fr\/base-de-connaissances\/faq\/setup-woocommerce-gallery-images\/","title":{"rendered":"Configuration des images de la galerie WooCommerce"},"content":{"rendered":"<div class=\"row\"  id=\"row-1910958200\">\n\t<div id=\"col-1488875327\" 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>Lorsque vous avez correctement install\u00e9 notre plugin WooCommerce Attribute Gallery images, nous pouvons commencer \u00e0 le configurer. Ouvrez le panneau d&#8217;administration, que vous trouverez dans WooCommerce > Gallery Images. If you can not see that menu make sure our weLaunch Framework pluginis installed! Il est gratuit.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\t<div id=\"col-1825887953\" 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_2038483332\">\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\/fr\/wp-content\/uploads\/sites\/13\/2021\/03\/woocommerce-gallery-images-menu-item.png\" class=\"attachment-large size-large\" alt=\"woocommerce gallery images menu item\" srcset=\"https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2021\/03\/woocommerce-gallery-images-menu-item.png 646w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2021\/03\/woocommerce-gallery-images-menu-item-300x288.png 300w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2021\/03\/woocommerce-gallery-images-menu-item-247x237.png 247w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/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_2038483332 {\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-524328874\">\n\t<div id=\"col-1521628488\" 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>Param\u00e8tres g\u00e9n\u00e9raux du plugin<\/h2>\n<p>Dans les param\u00e8tres g\u00e9n\u00e9raux de notre plugin de variation des images additionnelles, vous pouvez l&#8217;activer ou le d\u00e9sactiver. Le plus important est que les s\u00e9lecteurs de conteneurs soient corrects \u00e0 100 %. Par d\u00e9faut, vous pouvez utiliser :<\/p>\n<ul>\n<li>S\u00e9lecteur de conteneur d&#8217;image Le s\u00e9lecteur d&#8217;image principal (classe css ou id). Exemple : .woocommerce-product-gallery__wrapper (flatsome) OU .woocommerce-product-gallery<\/li>\n<li>Galerie d&#8217;images S\u00e9lecteur de conteneurs Le s\u00e9lecteur d&#8217;images de la galerie (classe css ou id). Exemple : .vignettes de produits (flatsome) ou .woocommerce-product-gallery<\/li>\n<\/ul>\n<p>Si aucune des options ci-dessus ne fonctionne. Vous devez trouver vous-m\u00eame le conteneur qui l&#8217;entoure dans votre th\u00e8me.<\/p>\n<ol>\n<li>Visiter une page produit sur votre site.<\/li>\n<li>Cliquez avec le bouton droit de la souris sur l&#8217;image du produit et inspectez l&#8217;\u00e9l\u00e9ment<\/li>\n<li>Vous verrez un objet parent div sur lequel vous pouvez utiliser le s\u00e9lecteur de classe<\/li>\n<li>R\u00e9p\u00e9tez cela pour la galerie UNIQUEMENT si ce n&#8217;est pas la m\u00eame chose, si c&#8217;est le m\u00eame s\u00e9lecteur, mettez-les \u00e9galement dans le champ de l&#8217;image de la galerie.<\/li>\n<\/ol>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1523545301\">\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\/fr\/wp-content\/uploads\/sites\/13\/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\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-1024x524.png 1024w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-300x154.png 300w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-768x393.png 768w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-510x261.png 510w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/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_1523545301 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<p>En outre, vous pouvez<\/p>\n<ul>\n<li>Remplacer la galerie par d\u00e9faut de WooCommerce Par d\u00e9faut, notre plugin ne modifie la galerie que lorsqu&#8217;une variation est s\u00e9lectionn\u00e9e. Activez cette option pour toujours utiliser les fonctions de notre galerie.<\/li>\n<li>Afficher les images de la galerie des variations dans la galerie des produits variables Afficher toutes les images de la galerie de variation dans la galerie d&#8217;images de produits variables par d\u00e9faut.<\/li>\n<li>Arr\u00eat sur image Galerie d&#8217;images variable A c\u00f4t\u00e9 des images de la galerie de variation, les images de la galerie de variation sont toujours affich\u00e9es.<\/li>\n<li>Montrer les images de la galerie des variations dans les cat\u00e9gories Ajout de la prise en charge de l&#8217;affichage des images de la galerie dans les listes. Vous aurez besoin de notre plugin Single Variations et votre th\u00e8me doit supporter la 2e image dans les listes (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_1830174804\">\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\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/general-variation-images-options-1024x745.png\" class=\"attachment-large size-large\" alt=\"general variation images options\" srcset=\"https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/general-variation-images-options-1024x745.png 1024w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/general-variation-images-options-300x218.png 300w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/general-variation-images-options-768x559.png 768w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/general-variation-images-options-510x371.png 510w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/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_1830174804 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\t<div id=\"gap-1125571997\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1125571997 {\n  padding-top: 50px;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>Options de variations et d&#8217;images miniatures<\/h2>\n<p>L&#8217;image de variation et les images de la galerie de vignettes peuvent avoir les deux options totales s\u00e9par\u00e9es. Par exemple, par d\u00e9faut, la variable &#8220;produit principal&#8221; a une colonne et les vignettes de la galerie en ont quatre. Mais vous pouvez \u00e9galement passer \u00e0 6 colonnes si vous le souhaitez.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\t<div id=\"col-261474896\" 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>Colonnes<\/li>\n<li>Marge droite<\/li>\n<li>Alignement des cellules Alignement des cellules<\/li>\n<li>Plein \u00e9cran Permet d&#8217;afficher le carrousel en plein \u00e9cran. Ajout d&#8217;un bouton pour afficher et quitter le plein \u00e9cran. En mode plein \u00e9cran, une pression sur ESC permet de quitter le mode plein \u00e9cran.<\/li>\n<li>Accessibilit\u00e9 Activer la navigation au clavier, en appuyant sur les touches gauche et droite<\/li>\n<li>Hauteur adaptative Fixer la hauteur du carrousel \u00e0 la diapositive s\u00e9lectionn\u00e9e<\/li>\n<li>Lecture automatique passe \u00e0 la cellule suivante<\/li>\n<li>Contenir Contiendra des cellules dans le conteneur afin d&#8217;\u00e9viter un d\u00e9filement excessif au d\u00e9but ou \u00e0 la fin n&#8217;a pas d&#8217;effet si l&#8217;option &#8220;wrap around&#8221; est activ\u00e9e<\/li>\n<li>D\u00e9filement libre Permet de faire d\u00e9filer et de feuilleter librement le contenu sans aligner les cellules<\/li>\n<\/ul>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\t<div id=\"col-62959759\" 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>Chargement paresseux Activer le chargement paresseux des images<\/li>\n<li>Pourcentage Position d\u00e9finit le positionnement en pourcentage plut\u00f4t qu&#8217;en pixels<\/li>\n<li>Boutons Pr\u00e9c\u00e9dent \/ Suivant Cr\u00e9ation et activation de boutons permettant de cliquer sur les cellules pr\u00e9c\u00e9dentes et suivantes<\/li>\n<li>Page Dots Cr\u00e9er et activer des points de page<\/li>\n<li>Redimensionner \u00c9coute les \u00e9v\u00e9nements de redimensionnement de la fen\u00eatre pour ajuster sa taille et sa position<\/li>\n<li>De droite \u00e0 gauche Permet une mise en page de droite \u00e0 gauche<\/li>\n<li>Set Gallery Size D\u00e9finit la hauteur de la galerie d\u00e9sactiv\u00e9e si la galerie a d\u00e9j\u00e0 une hauteur d\u00e9finie avec CSS<\/li>\n<li>Regarder CSS Observe le contenu de :after de l&#8217;\u00e9l\u00e9ment<\/li>\n<li>Enveloppe \u00c0 la fin des cellules, retour \u00e0 la premi\u00e8re pour un d\u00e9filement infini<\/li>\n<\/ul>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\t<div id=\"col-2055182485\" 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_571740871\">\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\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/main-image-thumbnbail-settings-1024x547.png\" class=\"attachment-large size-large\" alt=\"main image &amp; thumbnbail settings\" srcset=\"https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/main-image-thumbnbail-settings-1024x547.png 1024w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/main-image-thumbnbail-settings-300x160.png 300w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/main-image-thumbnbail-settings-768x410.png 768w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/main-image-thumbnbail-settings-510x272.png 510w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/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_571740871 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>Stylisme<\/h2>\n<p>Vous pouvez modifier certains styles, afin que la galerie s&#8217;adapte mieux \u00e0 votre site web. Modifier la couleur de l&#8217;ic\u00f4ne de chargement, la couleur de la bordure de la vignette ou ajouter un faux temps de chargement.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_202143199\">\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\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/styling-options.png\" class=\"attachment-large size-large\" alt=\"variation images styling\" srcset=\"https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/styling-options.png 989w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/styling-options-300x134.png 300w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/2020\/10\/styling-options-768x342.png 768w, https:\/\/www.welaunch.io\/fr\/wp-content\/uploads\/sites\/13\/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_202143199 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>Comment ajouter des images aux Variations<\/h2>\n<p>Avec notre plugin, il est tr\u00e8s simple d&#8217;ajouter des images plus d\u00e9taill\u00e9es. Il suffit d&#8217;ouvrir un produit variable et de faire d\u00e9filer les variations. Lorsque vous ouvrez une variation unique, vous verrez en bas que vous pouvez ajouter d&#8217;autres images. Utilisez la fonction glisser-d\u00e9poser pour les trier ou survolez-les pour les supprimer. L&#8217;ajout d&#8217;une nouvelle image utilisera la biblioth\u00e8que de m\u00e9dias par d\u00e9faut de WP.<\/p>\n<p><iframe title=\"How to add more images to variations\" width=\"1020\" height=\"574\" src=\"https:\/\/www.youtube.com\/embed\/k99Z1YzIdSY?feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/www.welaunch.io\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/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\/fr\/wp-json\/wp\/v2\/faq\/6090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/types\/faq"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/comments?post=6090"}],"version-history":[{"count":9,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/faq\/6090\/revisions"}],"predecessor-version":[{"id":8714,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/faq\/6090\/revisions\/8714"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/media?parent=6090"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/product_cat?post=6090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}