{"id":743,"date":"2026-05-17T05:54:02","date_gmt":"2026-05-17T04:54:02","guid":{"rendered":"https:\/\/yaxii.dev\/?yaxii_doc=visual-product-swatches"},"modified":"2026-05-19T16:36:11","modified_gmt":"2026-05-19T15:36:11","slug":"visual-product-swatches","status":"publish","type":"yaxii_doc","link":"https:\/\/yaxii.dev\/fr\/docs\/yaxii-smart-form\/visual-product-swatches\/","title":{"rendered":"\u00c9chantillons visuels du produit"},"content":{"rendered":"<h2>Le probl\u00e8me que ce guide r\u00e9sout<\/h2>\n<p>Les menus d\u00e9roulants classiques pour choisir une taille ou une couleur sont peu intuitifs sur mobile et ralentissent la d\u00e9cision d&rsquo;achat. Ce guide vous montre comment remplacer ces listes par des boutons visuels cliquables, et comment ajuster les param\u00e8tres de quantit\u00e9 et les messages d&rsquo;information pour chaque produit individuel.<\/p>\n<aside class=\"rounded-lg border p-4 my-5 bg-[hsl(var(--callout-warning-bg))] border-[hsl(var(--callout-warning-border))] text-[hsl(var(--callout-warning-fg))]\" role=\"note\"><div class=\"flex items-start gap-3\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-4 h-4 mt-0.5 flex-shrink-0 text-[hsl(var(--callout-warning-icon))]\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"\/><path d=\"M12 9v4\"\/><path d=\"M12 17h.01\"\/><\/svg><div class=\"flex flex-col gap-1 flex-1 min-w-0\"><div class=\"text-[13px] font-semibold m-0 leading-none\">Fonctionnalit\u00e9 du niveau Business<\/div><div class=\"text-[14px] leading-6 [&_p]:m-0 [&_p]:leading-6 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0\">Les s\u00e9lecteurs visuels de variantes n\u00e9cessitent une licence <b>Business<\/b> ou <b>Agency<\/b> active. V\u00e9rifiez votre licence dans <b>Yaxii Smart Form &gt; Licence<\/b> avant de continuer.<\/div><\/div><\/div><\/aside>\n<h2>Activer les s\u00e9lecteurs visuels<\/h2>\n<p>Une fois votre licence du niveau Business active, les s\u00e9lecteurs visuels s&rsquo;activent automatiquement pour tous les produits variables de votre boutique. Aucune configuration produit par produit n&rsquo;est n\u00e9cessaire pour l&rsquo;activation de base.<\/p>\n<p>Pour contr\u00f4ler ce comportement globalement, allez dans <b>Yaxii Smart Form > Param\u00e8tres du formulaire<\/b>, ouvrez l&rsquo;onglet <b>Comportement<\/b>, et localisez la section <b>Variantes produit<\/b>.<\/p>\n<p>[Screenshot: Section \u00ab\u00a0Variantes produit\u00a0\u00bb dans l&rsquo;onglet Comportement avec l&rsquo;interrupteur \u00ab\u00a0S\u00e9lecteurs visuels\u00a0\u00bb activ\u00e9 et un aper\u00e7u des boutons de couleur\/taille]<\/p>\n<h2>Ce que voit votre client<\/h2>\n<p>Avec les s\u00e9lecteurs visuels activ\u00e9s, les attributs de vos produits variables (couleur, taille, mati\u00e8re\u2026) s&rsquo;affichent sous forme de boutons cliquables directement dans le formulaire de commande.<\/p>\n<div class=\"not-prose\"><div class=\"my-5 overflow-x-auto rounded-lg border border-[hsl(var(--docs-block-border))]\"><table class=\"w-full border-collapse m-0 text-[14px]\"><thead class=\"bg-[hsl(var(--docs-block-bg))]\"><tr><th class=\"text-start font-semibold text-[hsl(var(--docs-strong))] px-4 py-2.5 border-b border-[hsl(var(--docs-block-border))]\">Avant (Dropdown)<\/th><th class=\"text-start font-semibold text-[hsl(var(--docs-strong))] px-4 py-2.5 border-b border-[hsl(var(--docs-block-border))]\">Apr\u00e8s (S\u00e9lecteur visuel)<\/th><\/tr><\/thead><tbody><tr class=\"border-b last:border-b-0 border-[hsl(var(--docs-block-border))]\"><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Menu d\u00e9roulant texte difficile \u00e0 utiliser sur mobile<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Boutons larges, tactiles, avec le nom ou la couleur de la variante<\/td><\/tr><tr class=\"border-b last:border-b-0 border-[hsl(var(--docs-block-border))]\"><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Variante s\u00e9lectionn\u00e9e invisible sans ouvrir le menu<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Variante s\u00e9lectionn\u00e9e mise en \u00e9vidence visuellement en permanence<\/td><\/tr><tr class=\"border-b last:border-b-0 border-[hsl(var(--docs-block-border))]\"><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Risque d&rsquo;erreur de s\u00e9lection sur petit \u00e9cran<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Zone de clic large, pas d&rsquo;erreur possible<\/td><\/tr><\/tbody><\/table><\/div><\/div>\n<h2>Personnaliser les param\u00e8tres par produit<\/h2>\n<p>Chaque produit WooCommerce peut avoir ses propres r\u00e8gles de quantit\u00e9 et son propre message de formulaire, ind\u00e9pendamment des param\u00e8tres globaux.<\/p>\n<div class=\"not-prose\"><ol class=\"list-none marker:content-none [&_li::marker]:content-none [&_li::before]:hidden [&_li::before]:content-none my-5 space-y-4 relative border-l rtl:border-l-0 rtl:border-r border-[hsl(var(--docs-block-border))] p-0 pl-6 rtl:pl-0 rtl:pr-6 ml-3 rtl:ml-0 rtl:mr-3\"><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">1<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Ouvrir la fiche d&#039;\u00e9dition du produit<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Dans WordPress, allez dans <b>Produits &gt; Tous les produits<\/b>, puis cliquez sur le produit \u00e0 personnaliser pour ouvrir son \u00e9cran d&rsquo;\u00e9dition.<\/div><\/li><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">2<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Localiser le panneau Yaxii Smart Form<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Faites d\u00e9filer vers le bas de la page d&rsquo;\u00e9dition du produit jusqu&rsquo;au panneau intitul\u00e9 <b>Yaxii Smart Form \u2014 Param\u00e8tres du formulaire<\/b>. Ce panneau appara\u00eet sous la description du produit.<\/p>\n<p>[Screenshot: Panneau \u00ab\u00a0Yaxii Smart Form \u2014 Param\u00e8tres du formulaire\u00a0\u00bb en bas de la page d&rsquo;\u00e9dition d&rsquo;un produit WooCommerce, avec les sections Quantit\u00e9s et Banni\u00e8re visibles]<\/div><\/li><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">3<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">D\u00e9finir les limites de quantit\u00e9 du produit<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Saisissez une <b>quantit\u00e9 minimale<\/b> et une <b>quantit\u00e9 maximale<\/b> par commande pour ce produit sp\u00e9cifique. Ces valeurs \u00e9crasent les param\u00e8tres globaux d\u00e9finis dans les pr\u00e9f\u00e9rences du plugin.<\/div><\/li><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">4<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Ajouter un message personnalis\u00e9 pour ce produit<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Activez l&rsquo;option <b>Remplacer la banni\u00e8re globale<\/b> et saisissez un texte sp\u00e9cifique \u00e0 ce produit (ex. : \u00ab\u00a0Disponible en livraison express sous 24h\u00a0\u00bb). Choisissez une ic\u00f4ne et une couleur d&rsquo;accentuation pour cette banni\u00e8re.<\/p>\n<p>[Screenshot: Section \u00ab\u00a0Banni\u00e8re personnalis\u00e9e\u00a0\u00bb avec le texte \u00ab\u00a0Disponible en livraison express sous 24h\u00a0\u00bb saisi, une ic\u00f4ne camion s\u00e9lectionn\u00e9e et une couleur verte choisie]<\/div><\/li><li class=\"relative list-none m-0 p-0\"><span class=\"absolute -left-[34px] rtl:left-auto rtl:-right-[34px] flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-[11px] font-semibold\">5<\/span><div class=\"text-[15px] font-semibold text-[hsl(var(--docs-strong))] mb-1\">Enregistrer le produit<\/div><div class=\"text-[14px] leading-6 text-[hsl(var(--docs-body))] [&_p]:m-0 [&_p]:leading-6\">Cliquez sur <b>Mettre \u00e0 jour<\/b> en haut \u00e0 droite de la page du produit pour sauvegarder toutes les modifications.<\/div><\/li><\/ol><\/div>\n<h2>Et ensuite ?<\/h2>\n<p>\u2192 Lire : <a href=\"https:\/\/yaxii.dev\/fr\/docs\/article\/placing-the-form\/\">Placer le formulaire sur vos pages produit et pages personnalis\u00e9es<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le probl\u00e8me que ce guide r\u00e9sout Les menus d\u00e9roulants classiques pour choisir une taille ou une couleur sont peu intuitifs sur mobile et ralentissent la d\u00e9cision d&rsquo;achat. Ce guide vous montre comment remplacer ces listes par des boutons visuels cliquables, et comment ajuster les param\u00e8tres de quantit\u00e9 et les messages d&rsquo;information pour chaque produit individuel. [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":3,"template":"","yaxii_doc_category":[161],"class_list":["post-743","yaxii_doc","type-yaxii_doc","status-publish","hentry","yaxii_doc_category-personnalisation-du-formulaire"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc\/743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc"}],"about":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/types\/yaxii_doc"}],"version-history":[{"count":0,"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc\/743\/revisions"}],"wp:attachment":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/media?parent=743"}],"wp:term":[{"taxonomy":"yaxii_doc_category","embeddable":true,"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc_category?post=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}