Come utilizzare il plugin Simplio3D WordPress in Elementor

Il plugin Simplio3D WordPress non dispone di widget Elementor separati e non ne ha bisogno. Ogni blocco Simplio3D è anche uno shortcode e puoi inserirlo con il widget Shortcode di Elementor, un widget per ogni blocco. Lo shortcode visualizza esattamente ciò che visualizza il blocco, quindi un configuratore di prodotti in Elementor funziona come uno creato nell’editor a blocchi WordPress: un’unica configurazione live condivisa da tutti i widget, la barra degli strumenti 3D, le dimensioni, AR, il prezzo in tempo reale, il riepilogo, le richieste di preventivo e il carrello WooCommerce.

Questa guida illustra il percorso più rapido: trova i tuoi ID, crea il layout, aggiungi al carrello e correggi gli errori più comuni. È scritta per la versione 2.0.3 del plugin e funziona con la versione gratuita di Elementor.

Prima di iniziare

• Il plugin Simplio3D, versione 2.0.3 o successiva, dalla directory dei plugin di WordPress.org, in esecuzione in modalità Simplio3D v3. Le nuove installazioni si avviano in questa modalità. Un sito aggiornato dalla versione 1.x rimane in modalità Legacy finché non effettui il passaggio in Simplio3D → Migrazione.
• Il tuo account Simplio3D collegato: in WordPress, vai a Simplio3D → Accedi a Simplio3D.
• Un progetto pubblicato: in Simplio3D, apri Condividi, attiva il link di condivisione e lascialo senza password. Se limiti i domini di incorporamento, aggiungi il dominio del tuo sito.
• Elementor. È sufficiente la versione gratuita.
• Per Aggiungi al carrello: WooCommerce e un prodotto semplice con un prezzo.

Aggiungi al carrello con WooCommerce

Nell’editor a blocchi, scegliere un prodotto nel blocco Aggiungi al carrello lo collega al tuo progetto. Uno shortcode non può farlo, quindi collega prima il prodotto manualmente:

1. In Prodotti, modifica un prodotto semplice con un prezzo di listino.
2. Apri Dati prodotto → Simplio3D, imposta progetto Simplio3D sul tuo progetto e Prezzo del carrello su prezzo calcolato Simplio3D (verificato lato server), oppure sul prezzo WooCommerce del prodotto. Fai clic su Aggiorna.
3. Annota l’ID del prodotto: passa il mouse sul prodotto nell’elenco Prodotti oppure leggi post=123 nella barra degli indirizzi della schermata di modifica.
4. Sostituisci il widget Invia con [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Aggiungi quantity_mode="selector" per consentire agli acquirenti di scegliere una quantità e after_add="cart" per portarli al carrello.

Il carrello, il checkout, le email dell’ordine e WooCommerce → Ordini mostreranno quindi la configurazione, un’immagine e il prezzo verificato.

Un prodotto collegato con il prezzo Simplio3D può essere acquistato solo tramite il configuratore, quindi il normale pulsante Aggiungi al carrello di WooCommerce nella pagina prodotto invita prima gli acquirenti a configurarlo. Con Elementor gratuito, mantieni il configuratore in una pagina dedicata e collegalo dalla pagina prodotto, ad esempio con un link “Configura il tuo” nella descrizione breve. Con Elementor Pro, puoi creare un template Prodotto singolo che utilizza i widget Shortcode Simplio3D anziché il widget Aggiungi al carrello di Elementor; visualizza un’anteprima di questa configurazione prima di pubblicarla.

Impostazioni che userai più spesso

Aggiungi le impostazioni all’interno dello shortcode, usando virgolette dritte e trattini bassi. Copiando da Word, Google Docs o Slack, le virgolette possono diventare curve e WordPress ignora quindi l’impostazione.

• height="620px" mobile_height="400px" nel Viewer ne imposta l’altezza su desktop e sugli schermi larghi fino a 781 px.
• loading="eager" in un Viewer nella parte superiore della pagina lo carica subito anziché quando scorre nella visualizzazione.
• layout="dropdown" in un widget Opzioni trasforma le scelte in un menu a discesa. Funzionano anche grid, list e buttons, a seconda del tipo di opzione.
• columns="4" thumbnails="small" inserisce più scelte in ogni riga.
• prefix="From" tax_display="exclude" in Prezzo aggiunge testo prima del prezzo e mostra il prezzo al netto delle imposte, in linea con il carrello WooCommerce.
• summary_mode="compact" hide_defaults="yes" in Riepilogo mette ogni opzione su una riga e omette quelle lasciate al valore predefinito.
• display="hosted" nel Viewer mostra l’intero configuratore Simplio3D, incluse le opzioni, in un unico widget, senza necessità di ID delle opzioni.
• instance="oak" in ogni widget di un insieme mantiene separati due configuratori sulla stessa pagina. I widget con la stessa istanza condividono una configurazione.

Abbina il design di Elementor

• La scheda Avanzato di ogni widget Shortcode gestisce margini, spaziatura interna, sfondo, bordo e visibilità responsive. Il viewer riempie la sua colonna, quindi imposta la larghezza della colonna o del contenitore per renderlo più largo o più stretto.
• I blocchi adottano il carattere e il colore del testo della pagina. Il colore di accento, ovvero la scelta selezionata, l’anello di focus e i pulsanti, sui temi classici come Hello Elementor torna quasi nero come valore predefinito; impostalo sul tuo accento Elementor in Aspetto → Personalizza → CSS aggiuntivo: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Altre proprietà includono --s3d-radius per gli angoli, --s3d-thumb per la dimensione delle miniature e --s3d-button-bg per il pulsante. Per applicare uno stile a un solo widget, aggiungi class="my-finish" al suo shortcode e seleziona .my-finish nel tuo CSS.