Come Aggiungere il Try-On Virtuale a WooCommerce

WooCommerce funziona su hook di WordPress, non su un modello fisso, il che significa che "aggiungere il try-on virtuale" è in realtà una questione di a quale hook ti agganci e quanto vicino quel trigger si trova al pulsante di aggiunta al carrello. Sbagliare il posizionamento significa che la funzione non viene usata; farlo bene la rende parte della decisione d'acquisto.

WooCommerce alimenta una quota significativa dei negozi di moda indipendenti, e la maggior parte di essi utilizza un child theme con hook woocommerce_single_product_summary personalizzati anziché un layout standard. Questa variabilità è la vera sfida delle integrazioni try-on — non la tecnologia del try-on in sé. Questa guida copre i due percorsi di installazione, dove deve stare il pulsante trigger rispetto all'aggiunta al carrello, gli hook specifici e i punti di contatto del tema da controllare, e come verificare che l'integrazione funzioni davvero prima di pubblicarla.

Installazione Plugin vs. Script Embed: Quale Percorso è Adatto al Tuo Negozio

Ci sono due modi realistici per portare un pulsante try-on su una pagina prodotto WooCommerce. Un plugin confezionato si aggancia automaticamente al sistema di azioni di WooCommerce — si registra su woocommerce_single_product_summary o un hook simile con un numero di priorità, e appare senza che tu debba toccare i file di modello. Questa è la via più veloce e la scelta predefinita corretta per negozi con un tema non modificato o leggermente modificato (Storefront, Astra, Flatsome con modelli prodotto predefiniti).

L'alternativa è uno script embed manuale inserito in functions.php o in un plugin di snippet, collegato a un hook e una priorità specifici scelti da te. Questa è la via migliore quando il tuo tema ha un content-single-product.php pesantemente personalizzato, quando usi un page builder (Elementor, Divi) che sovrascrive la gerarchia di modelli predefinita di WooCommerce, o quando il marketing vuole che il trigger sia dentro una galleria prodotto costruita su misura anziché nella colonna riepilogo. Nella nostra esperienza nel supportare i merchant WooCommerce, i negozi con pagine prodotto costruite tramite page builder hanno bisogno del percorso script embed più spesso, perché l'hook target predefinito del plugin potrebbe non essere nemmeno renderizzato su quei modelli.

Una regola pratica: se l'ispezione di wp_head negli strumenti per sviluppatori del tuo browser mostra che il tema usa i tag di modello WooCommerce standard, inizia con il plugin. Se il balisage della pagina prodotto sembra personalizzato o pesantemente filtrato, passa direttamente allo script embed e punta l'hook manualmente.

Dove Deve Stare il Trigger del Try-On sulla Pagina Prodotto

Il posizionamento è il fattore singolo più importante per determinare se un widget try-on venga cliccato. Il trigger deve stare sopra o immediatamente accanto al pulsante di aggiunta al carrello, dentro il percorso visivo naturale del cliente — non sepolto in una scheda, non sotto la piega, e senza competere con i menu a tendina del selettore di taglia per l'attenzione.

Nello stack di hook predefinito di WooCommerce, lo spazio rilevante è questo:

La posizione più forte è un'azione personalizzata registrata a priorità 26 — subito dopo che il modulo di aggiunta al carrello viene renderizzato (priorità 30) ma prima che i campi taglia/quantità perdano priorità visiva, oppure collegata come pulsante fratello accanto ad "Aggiungi al Carrello" stesso usando woocommerce_after_add_to_cart_button. Posizionare il trigger dopo che il cliente ha già selezionato una variazione significa che può passare il colore e la taglia selezionati nella sessione try-on, evitando un secondo passaggio di selezione dentro il widget.

Evita di mettere il trigger solo nella galleria di immagini del prodotto — alcuni negozi infilano una piccola icona "Prova" in un overlay di miniatura della galleria, il che appare ordinato ma riceve molti meno click rispetto a un pulsante etichettato vicino all'azione di acquisto. La rifinitura visiva conta meno qui della vicinanza al momento della decisione.

Agganciarsi alle Specificità del Tema e del Page Builder

Ogni tema gestisce il riepilogo prodotto in modo diverso, quindi testa il tuo hook target prima di dare per scontato che funzioni ovunque. Storefront e la maggior parte dei suoi child theme rispettano l'ordine standard dell'hook woocommerce_single_product_summary senza modifiche, quindi una registrazione a priorità 26 si comporta in modo prevedibile.

Flatsome, Astra e altri temi amichevoli con i builder a volte avvolgono il modulo di aggiunta al carrello nel proprio shortcode o componente basato su React, il che può spostare dove woocommerce_after_add_to_cart_button effettivamente si attiva — a volte si attiva ma viene renderizzato fuori dalla viewport visibile su mobile. Se usi il WooCommerce Builder di Elementor o i moduli WooCommerce di Divi, la pagina prodotto è spesso assemblata da widget anziché dal classico file di modello, e l'iniezione basata su hook potrebbe non apparire affatto; in quel caso, usa il widget "HTML personalizzato" o "shortcode" del builder stesso per inserire lo script embed esattamente dove vuoi, invece di lottare contro il sistema di hook.

Un modo rapido per confermare in quale situazione ti trovi: apri la pagina prodotto, visualizza il sorgente, e cerca add_to_cart_button o l'attributo name="add-to-cart" del modulo. Se lo trovi dentro un balisage di modulo WooCommerce riconoscibile, gli hook funzioneranno come documentato. Se il balisage sembra generato da uno shortcode di builder con nomi di classe offuscati, pianifica un posizionamento manuale tramite l'interfaccia del builder.

Testare l'Integrazione Prima del Lancio

Un pulsante try-on che "sembra installato" non è la stessa cosa di uno che funziona end-to-end. Prima di pubblicare, controlla quattro cose sia su desktop che su mobile:

1. Il trigger viene renderizzato su ogni variante di modello prodotto usata dal negozio — prodotti semplici, prodotti variabili, e qualsiasi tipo di prodotto personalizzato aggiunto da plugin.
2. Selezionare una variazione (taglia, colore) prima di aprire il try-on passa correttamente quella selezione alla sessione, invece di tornare di default alla prima variante.
3. Il widget si carica correttamente all'interno della configurazione cache di WooCommerce — plugin come WP Rocket o LiteSpeed Cache possono rimuovere i tag script inline sulle pagine in cache, quindi testa con una sessione disconnessa dopo aver svuotato la cache, non solo come amministratore.
4. Comportamento sul viewport mobile: conferma che il trigger non venga tagliato dalle barre sticky di aggiunta al carrello che molti temi mobile WooCommerce aggiungono in fondo allo schermo.

Questo quarto punto cattura più bug di lancio di qualsiasi altro, perché le barre sticky di aggiunta al carrello su mobile sono una funzione di tema comune che molti merchant aggiungono successivamente, dopo che l'integrazione try-on era stata originariamente testata.

Dove si Inserisce YourSizer

Il widget di YourSizer è costruito per inserirsi esattamente in questo tipo di ambiente basato su hook: viene fornito come embed leggero che può essere registrato su woocommerce_after_add_to_cart_button (o uno slot equivalente a priorità 26), così che il trigger stia accanto all'azione di acquisto invece che in una scheda separata. Per i negozi dove gli hook non raggiungono il balisage renderizzato — pagine prodotto costruite con page builder, modelli pesantemente personalizzati — lo stesso embed può essere inserito tramite un blocco HTML personalizzato, senza richiedere una ricostruzione del modello prodotto.

Il widget legge anche gli attributi di taglia e colore già selezionati dal cliente dal modulo di variazione WooCommerce quando disponibili, così che la sessione try-on si apra pre-compilata invece di chiedere al cliente di scegliere di nuovo. Niente di tutto questo sostituisce il buon giudizio su dove il tuo tema specifico vuole il trigger — significa solo che le opzioni di posizionamento in questa guida sono tutti percorsi supportati, non soluzioni improvvisate.

Domande Frequenti

Il try-on virtuale rallenta il tempo di caricamento della mia pagina prodotto WooCommerce?

Un embed try-on ben costruito si carica in modo asincrono e rimanda i suoi asset più pesanti (rendering 3D, file dei modelli) fino a quando il cliente clicca effettivamente sul trigger, quindi il caricamento iniziale della pagina non dovrebbe essere influenzato in modo significativo. Il rischio maggiore da monitorare sono i plugin di cache che rimuovono o ritardano il tag script stesso, motivo per cui testare su una cache fresca e disconnessa fa parte della checklist di pre-lancio sopra, non un passaggio opzionale.

Posso mostrare il trigger try-on solo su determinate categorie di prodotto?

Sì — sia il percorso plugin che quello script embed supportano logica condizionale usando i controlli standard di categoria e tipo di prodotto di WooCommerce (has_term(), is_product_category()), quindi puoi limitare il trigger all'abbigliamento escludendo accessori o buoni regalo dove il try-on non si applica. Questa è una pratica comune per i negozi che vendono un catalogo misto e non vogliono che il pulsante appaia su SKU non indossabili.

Cosa succede se il browser di un cliente non supporta i requisiti di rendering del widget try-on?

Il pulsante trigger dovrebbe degradarsi con grazia invece di apparire rotto — un'integrazione configurata correttamente controlla la compatibilità del dispositivo e del browser prima di renderizzare l'interfaccia try-on, e ripiega nascondendo il trigger o mostrando invece un link standard alla tabella taglie. Vale la pena confermarlo durante i test su dispositivi Android più vecchi in particolare, poiché il supporto WebGL varia lì più che sull'hardware iOS recente.

Il try-on virtuale è diverso da un widget di raccomandazione taglia su WooCommerce?

Sì, e la distinzione conta per quale hook e posizionamento usare — uno strumento di raccomandazione taglia in genere chiede alcune misure e restituisce una taglia suggerita, mentre il try-on virtuale renderizza un'anteprima visiva del capo su un modello corporeo o una foto. Alcuni negozi fanno funzionare entrambi affiancati vicino all'aggiunta al carrello; per un confronto più approfondito su quando ciascuno ha senso, vedi try-on virtuale vs. raccomandazione taglia.

Conclusione

Aggiungere il try-on virtuale a WooCommerce riguarda meno il widget in sé e più un posizionamento disciplinato — scegliere il percorso plugin o embed in base al balisage effettivo del tuo tema, puntare a una priorità di hook che stia vicino alla decisione di aggiunta al carrello, e testare in condizioni di cache e mobile prima di considerarlo finito. I temi in stile Storefront rendono tutto semplice; i cataloghi con page builder richiedono un po' più di targeting manuale ma sono altrettanto realizzabili. Sistema il posizionamento dell'hook una volta correttamente, e lo stesso schema (trigger consapevole della variante, caricamento asincrono, fallback elegante) regge man mano che il tuo catalogo e il tuo tema evolvono — vedi come aggiungere un widget di raccomandazione taglia a Shopify per come si svolge la stessa logica di posizionamento su una piattaforma diversa. L'ecommerce moda in generale sta ancora assorbendo cosa significhi l'integrazione del try-on da parte di Google nella Ricerca per le aspettative dei clienti, e sistemare bene le basi sul sito ora posiziona bene un negozio WooCommerce per qualsiasi cosa arrivi dopo.