{"id":709,"date":"2026-05-17T05:54:03","date_gmt":"2026-05-17T04:54:03","guid":{"rendered":"https:\/\/yaxii.dev\/?yaxii_doc=shortcodes-and-page-builders"},"modified":"2026-05-19T16:36:11","modified_gmt":"2026-05-19T15:36:11","slug":"shortcodes-and-page-builders","status":"publish","type":"yaxii_doc","link":"https:\/\/yaxii.dev\/fr\/docs\/yaxii-smart-form\/shortcodes-and-page-builders\/","title":{"rendered":"Shortcodes et page builders"},"content":{"rendered":"<h2>Int\u00e9grer le formulaire n&rsquo;importe o\u00f9<\/h2>\n<p>Le formulaire Yaxii Smart Form peut \u00eatre plac\u00e9 sur n&rsquo;importe quelle page, article ou template \u2014 pas uniquement sur les pages produit WooCommerce. Trois m\u00e9thodes d&rsquo;int\u00e9gration sont disponibles, et toutes trois partagent le m\u00eame moteur de rendu, ce qui garantit un comportement identique quelle que soit la m\u00e9thode utilis\u00e9e.<\/p>\n<h2>Le shortcode<\/h2>\n<p>Collez  dans n&rsquo;importe quel article, page ou zone de widget supportant les shortcodes.<\/p>\n<p>Sans param\u00e8tres, le shortcode d\u00e9tecte automatiquement le produit lorsqu&rsquo;il est plac\u00e9 sur une page produit WooCommerce. Sur tout autre type de page, vous devez indiquer l&rsquo;ID du produit explicitement.<\/p>\n<h3>Param\u00e8tres<\/h3>\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))]\">Param\u00e8tre<\/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))]\">Valeurs accept\u00e9es<\/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))]\">D\u00e9faut<\/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\">id<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">ID produit, ou liste s\u00e9par\u00e9e par des virgules pour les bundles<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">D\u00e9tection auto<\/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\">layout<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">auto \u00b7 1col \u00b7 2col \u00b7 multi<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">auto<\/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\">theme<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">inherit \u00b7 light \u00b7 dark<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">inherit<\/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\">primary_color<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">N&rsquo;importe quelle couleur hexad\u00e9cimale, ex. #e11d48<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">D\u00e9faut du th\u00e8me<\/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\">button_text<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">N&rsquo;importe quelle cha\u00eene de texte<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">R\u00e9glage du plugin<\/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\">show_progress<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">yes \u00b7 no<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">R\u00e9glage du plugin<\/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\">enable_cart_buttons<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">yes \u00b7 no<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">R\u00e9glage du plugin<\/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\">validation<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">on_submit \u00b7 live \u00b7 on_blur<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">on_submit<\/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\">class<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">N&rsquo;importe quelle classe CSS<\/td><td class=\"px-4 py-2.5 text-[hsl(var(--docs-body))] align-top\">Aucun<\/td><\/tr><\/tbody><\/table><\/div><\/div>\n<h3>Exemples courants<\/h3>\n<p>Produit unique sur une page standard :<\/p>\n\n<p>Disposition deux colonnes avec un libell\u00e9 de bouton personnalis\u00e9 :<\/p>\n\n<p>Bundle multi-produits (IDs s\u00e9par\u00e9s par des virgules) :<\/p>\n\n<p>Th\u00e8me sombre avec couleur d&rsquo;accent personnalis\u00e9e et validation en temps r\u00e9el :<\/p>\n\n<h2>Widget Elementor<\/h2>\n<p>Si Elementor est actif, un widget <b>Yaxii Smart Form<\/b> appara\u00eet dans la section <b>Yaxii<\/b> de la biblioth\u00e8que de blocs Elementor.<\/p>\n<h3>Onglet Contenu<\/h3>\n<ul>\n<li><b>Mode du formulaire<\/b> \u2014 Choisissez <b>Auto (Produit actuel)<\/b> pour que le widget d\u00e9tecte le produit depuis le contexte de la page. Choisissez <b>S\u00e9lection manuelle du produit<\/b> pour choisir un produit sp\u00e9cifique dans le menu d\u00e9roulant.<\/li>\n<li><b>Produit<\/b> \u2014 Le s\u00e9lecteur de produit appara\u00eet uniquement lorsque le Mode du formulaire est r\u00e9gl\u00e9 sur Manuel.<\/li>\n<li><b>Support pour le Theme Builder<\/b> \u2014 Activez cette option lorsque vous placez le widget dans un template Theme Builder d&rsquo;Elementor pour les pages produit WooCommerce.<\/li>\n<\/ul>\n<h3>Onglet Style<\/h3>\n<ul>\n<li><b>Arri\u00e8re-plan du formulaire<\/b> \u2014 Remplacez la couleur de fond du conteneur du formulaire.<\/li>\n<li><b>Espacement int\u00e9rieur<\/b> \u2014 Contr\u00f4lez l&rsquo;espacement interne avec des valeurs adaptatives (px, em ou %).<\/li>\n<\/ul>\n<h3>Comportement dans l&rsquo;\u00e9diteur<\/h3>\n<p>Dans l&rsquo;\u00e9diteur Elementor, le widget affiche une carte de pr\u00e9visualisation avec le nom du produit s\u00e9lectionn\u00e9 entour\u00e9e d&rsquo;une bordure bleue en pointill\u00e9s \u2014 le formulaire complet ne se charge que sur la page publi\u00e9e en ligne. Cela \u00e9vite les conflits de scripts dans l&rsquo;interface d&rsquo;administration.<\/p>\n<p>[Screenshot: \u00c9diteur Elementor affichant la carte de pr\u00e9visualisation du widget Yaxii avec le nom du produit et une bordure bleue en pointill\u00e9s ; le panneau Contenu est visible \u00e0 droite avec le Mode du formulaire r\u00e9gl\u00e9 sur Auto]<\/p>\n<h2>Bloc Gutenberg<\/h2>\n<p>Un bloc <b>Yaxii Smart Form<\/b> est disponible dans la cat\u00e9gorie <b>Yaxii<\/b> de l&rsquo;inserteur de blocs Gutenberg. Recherchez \u00ab Yaxii \u00bb pour le trouver.<\/p>\n<h3>R\u00e9glages du bloc (panneau lat\u00e9ral)<\/h3>\n<ul>\n<li><b>ID du produit<\/b> \u2014 Le produit WooCommerce \u00e0 afficher. Laissez vide sur une page produit WooCommerce pour la d\u00e9tection automatique.<\/li>\n<li><b>Disposition<\/b> \u2014 Contr\u00f4le le nombre de colonnes (auto, 1 colonne ou 2 colonnes).<\/li>\n<li><b>Couleur principale<\/b> \u2014 Couleur d&rsquo;accent hexad\u00e9cimale personnalis\u00e9e.<\/li>\n<li><b>Afficher la barre de progression<\/b> \u2014 Active ou d\u00e9sactive l&rsquo;indicateur d&rsquo;avancement.<\/li>\n<li><b>Activer les boutons panier<\/b> \u2014 Active ou d\u00e9sactive le jeu de boutons d&rsquo;ajout au panier.<\/li>\n<li><b>Validation<\/b> \u2014 Choisissez le moment de la validation : on_submit, live (temps r\u00e9el) ou on_blur (\u00e0 la sortie du champ).<\/li>\n<\/ul>\n<p>Le bloc supporte \u00e9galement les contr\u00f4les d&rsquo;alignement Gutenberg standard (<b>Large<\/b> et <b>Pleine largeur<\/b>), les ancres ID et les classes CSS personnalis\u00e9es depuis la barre d&rsquo;outils du bloc.<\/p>\n<h2>Quelle est la prochaine \u00e9tape ?<\/h2>\n<p>\u2192 Lire : <a href=\"https:\/\/yaxii.dev\/fr\/docs\/article\/order-fulfillment-workflow\/\">Envoyer des commandes aux transporteurs<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Int\u00e9grer le formulaire n&rsquo;importe o\u00f9 Le formulaire Yaxii Smart Form peut \u00eatre plac\u00e9 sur n&rsquo;importe quelle page, article ou template \u2014 pas uniquement sur les pages produit WooCommerce. Trois m\u00e9thodes d&rsquo;int\u00e9gration sont disponibles, et toutes trois partagent le m\u00eame moteur de rendu, ce qui garantit un comportement identique quelle que soit la m\u00e9thode utilis\u00e9e. Le [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":3,"template":"","yaxii_doc_category":[164],"class_list":["post-709","yaxii_doc","type-yaxii_doc","status-publish","hentry","yaxii_doc_category-integrations-de-lecosysteme"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc\/709","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\/709\/revisions"}],"wp:attachment":[{"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/media?parent=709"}],"wp:term":[{"taxonomy":"yaxii_doc_category","embeddable":true,"href":"https:\/\/yaxii.dev\/fr\/wp-json\/wp\/v2\/yaxii_doc_category?post=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}