Comment utiliser le plugin Simplio3D WordPress dans Elementor

L’extension Simplio3D WordPress ne dispose pas de widgets Elementor distincts, et elle n’en a pas besoin. Chaque bloc Simplio3D est également un shortcode, que vous placez à l’aide du widget Shortcode d’Elementor, à raison d’un widget par bloc. Le shortcode affiche exactement la même chose que le bloc ; un configurateur de produit dans Elementor fonctionne donc comme un configurateur créé dans l’éditeur de blocs WordPress : une configuration en direct partagée par tous les widgets, la barre d’outils 3D, les dimensions, AR, le prix en direct, le récapitulatif, les demandes de devis et le panier WooCommerce.

Ce guide présente le parcours le plus simple : trouver vos identifiants, créer la mise en page, ajouter au panier et corriger les erreurs courantes. Il est rédigé pour la version 2.0.3 de l’extension et fonctionne avec la version gratuite d’Elementor.

Avant de commencer

• L’extension Simplio3D, version 2.0.3 ou ultérieure, disponible dans le répertoire d’extensions WordPress.org, exécutée en mode Simplio3D v3. Les nouvelles installations démarrent dans ce mode. Un site mis à jour depuis la version 1.x reste en mode Legacy jusqu’à ce que vous basculiez via Simplio3D → Migration.
• Votre compte Simplio3D connecté : dans WordPress, allez dans Simplio3D → Se connecter à Simplio3D.
• Un projet publié : dans Simplio3D, ouvrez Partager, activez le lien de partage et laissez-le sans mot de passe. Si vous limitez les domaines d’intégration, ajoutez le domaine de votre site.
• Elementor. La version gratuite suffit.
• Pour Ajouter au panier : WooCommerce et un produit simple avec un prix.

Ajouter au panier avec WooCommerce

Dans l’éditeur de blocs, le choix d’un produit dans le bloc Ajouter au panier le lie à votre projet. Un shortcode ne peut pas le faire ; liez donc d’abord le produit vous-même :

1. Dans Produits, modifiez un produit simple avec un prix normal.
2. Ouvrez Données produit → Simplio3D, définissez projet Simplio3D sur votre projet et Prix du panier sur prix calculé par Simplio3D (vérifié côté serveur), ou sur le prix WooCommerce du produit. Cliquez sur Mettre à jour.
3. Notez l’identifiant du produit : survolez le produit dans la liste des produits ou lisez post=123 dans la barre d’adresse de l’écran de modification.
4. Remplacez le widget Submit par [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Ajoutez quantity_mode="selector" pour permettre aux clients de choisir une quantité, et after_add="cart" pour les rediriger vers le panier.

Le panier, la page de commande, les e-mails de commande et WooCommerce → Commandes affichent alors la configuration, son image et le prix vérifié.

Un produit lié au prix Simplio3D ne peut être acheté que via le configurateur ; le bouton Ajouter au panier habituel de WooCommerce sur sa page produit demande donc d’abord aux clients de le configurer. Avec Elementor gratuit, conservez le configurateur sur sa propre page et créez un lien vers celle-ci depuis le produit, par exemple un lien « Configurez le vôtre » dans la description courte. Avec Elementor Pro, vous pouvez créer un modèle de produit unique qui utilise les widgets Shortcode Simplio3D à la place du widget Ajouter au panier d’Elementor ; prévisualisez cette configuration avant sa mise en ligne.

Réglages les plus utilisés

Ajoutez les réglages dans le shortcode, avec des guillemets droits et des traits de soulignement. Copier depuis Word, Google Docs ou Slack peut transformer les guillemets en guillemets typographiques, et WordPress ignore alors le réglage.

• height="620px" mobile_height="400px" sur le Viewer définit sa hauteur sur ordinateur et sur les écrans jusqu’à 781 px de large.
• loading="eager" sur un Viewer placé en haut de page le charge immédiatement au lieu d’attendre qu’il apparaisse à l’écran lors du défilement.
• layout="dropdown" sur un widget Options transforme ses choix en liste déroulante. grid, list et buttons fonctionnent également, selon le type d’option.
• columns="4" thumbnails="small" permet d’afficher davantage de choix sur chaque ligne.
• prefix="From" tax_display="exclude" sur le Prix ajoute un texte avant celui-ci et affiche le prix hors taxes, conformément au panier WooCommerce.
• summary_mode="compact" hide_defaults="yes" sur le Récapitulatif place chaque option sur une ligne et ignore celles laissées à leur valeur par défaut.
• display="hosted" sur le Viewer affiche le configurateur Simplio3D complet, options comprises, dans un seul widget, sans identifiants d’option nécessaires.
• instance="oak" sur chaque widget d’un ensemble maintient séparés deux configurateurs sur une même page. Les widgets ayant la même instance partagent une configuration.

Harmonisez avec votre design Elementor

• L’onglet Avancé de chaque widget Shortcode gère les marges, les espacements internes, l’arrière-plan, la bordure et la visibilité responsive. Le viewer remplit sa colonne ; définissez donc la largeur de la colonne ou du conteneur pour l’élargir ou le rétrécir.
• Les blocs reprennent la police et la couleur du texte de la page. La couleur d’accentuation (le choix sélectionné, l’anneau de focus et les boutons) utilise par défaut un noir presque noir sur les thèmes classiques tels que Hello Elementor ; définissez-la sur l’accent Elementor via Apparence → Personnaliser → CSS additionnel : .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Parmi les autres propriétés figurent --s3d-radius pour les coins, --s3d-thumb pour la taille des miniatures et --s3d-button-bg pour le bouton. Pour styliser un seul widget, ajoutez class="my-finish" à son shortcode et ciblez .my-finish dans votre CSS.