Elementor + WooCommerce: pagina prodotto custom
Personalizzare la pagina prodotto WooCommerce con Elementor Pro permette di valorizzare ogni articolo con layout su misura, recensioni, video, upsell e CTA strategici. Il Theme Builder offre il widget Single Product Builder per progettare il template visualmente.
Single Product Builder
Il Theme Builder di Elementor Pro include una sezione dedicata ai Single Product: qui puoi creare template che sostituiscono la pagina prodotto standard di WooCommerce. I widget WooCommerce dedicati includono Product Title, Product Price, Product Add to Cart, Product Images, Product Description, Product Tabs, Product Related, Product Upsell, Product Stock e Product Meta. Ognuno di questi puo essere stilizzato con padding, colori e tipografia.
Condizioni di visualizzazione
Puoi applicare lo stesso template a tutti i prodotti oppure differenziarli per categoria, tag o attributo. Ad esempio un template ricco con video e specifiche tecniche per la categoria Elettronica, e uno minimal per i prodotti digitali. Le condizioni si impostano nel pannello Publish del template.
UX e conversioni
Una buona pagina prodotto ha: galleria immagini con zoom, prezzo evidente, CTA Add to Cart sopra la piega, sticky aggiungi al carrello su mobile, recensioni clienti, FAQ e prodotti correlati. Elementor permette anche A/B test base alternando template tra categorie diverse.
Approfondimento tecnico
Quando si lavora con Elementor su progetti reali e fondamentale conoscere alcune sfumature spesso trascurate nei tutorial introduttivi. La prima riguarda la gestione della cache: ogni modifica significativa alla pagina richiede un refresh sia della cache server sia di quella browser; in ambienti con LiteSpeed, WP Rocket o Cloudflare APO occorre invalidare manualmente la URL modificata. La seconda sfumatura riguarda il conflitto con i Custom Post Type: i CPT registrati da plugin terzi non sempre supportano nativamente Elementor; per abilitarli vai su Elementor > Settings > General > Post Types e seleziona quelli che vuoi rendere editabili dal builder. Terza sfumatura: la gestione delle revisioni. Elementor sfrutta il sistema di revisioni nativo WordPress, quindi limita il numero di revisioni con la costante WP_POST_REVISIONS a 10 per evitare bloat del database, soprattutto su siti con tante pagine.
Consigli pratici per il workflow agency
Nel quotidiano di un'agenzia che gestisce decine di siti Elementor emergono alcune best practice trasversali. La prima e la standardizzazione: usa sempre lo stesso tema base (Hello Elementor o Astra), gli stessi widget plugin (es. Essential Addons o Happy Addons), e gli stessi plugin di caching su tutti i progetti. Così il team riconosce immediatamente l'ambiente e accelera il debug. La seconda e la creazione di una libreria interna di template: ogni volta che progetti una sezione efficace (hero, pricing, contatti) salvala come template globale. Avrai una libreria proprietaria che velocizza nuovi progetti. La terza riguarda la documentazione cliente: prepara un mini-manuale PDF di 4-5 pagine che spiega al cliente come modificare testi e immagini in autonomia, evitando ticket di supporto banali.
Considerazioni SEO e Core Web Vitals
Elementor e stato spesso accusato di generare codice pesante, ma negli ultimi due anni il team ha investito molto in performance. Gli Esperimenti attivati di default in versione 3.20+ riducono il CSS inutilizzato del 40-60%. Tuttavia per ottenere punteggi PageSpeed superiori a 90 occorre lavorare anche sul lato server (PHP 8.2+, OPcache attivo, Redis object cache se disponibile), sul lato immagini (WebP, lazy load, dimensioni corrette) e sul lato font (preload, subsetting, max 2 famiglie). Per i Core Web Vitals presta attenzione a tre metriche: LCP (mantienilo sotto 2,5 secondi: l'immagine hero deve essere ottimizzata e in eager loading), CLS (zero shift: imposta dimensioni esplicite a tutte le immagini e prenota spazio per banner dinamici), INP (interaction to next paint sotto 200ms: riduci JavaScript bloccante e widget pesanti above-the-fold).
Procedura passo-passo
- Vai su Templates > Theme Builder > Single Product.
- Clicca Aggiungi nuovo e parti da un template della libreria o da zero.
- Imposta una struttura a due colonne: galleria a sinistra, info prodotto a destra.
- Inserisci i widget WooCommerce: Product Images, Product Title, Product Price, Product Rating, Product Short Description, Product Add to Cart.
- Sotto, aggiungi una sezione full-width con Product Tabs (descrizione, recensioni, info aggiuntive).
- Aggiungi una sezione con Product Upsell e Product Related.
- Applica padding, colori e tipografia coerenti col brand.
- Su mobile, riorganizza l'ordine dei widget e attiva il pulsante sticky Add to Cart.
- Pubblica con condizione Tutti i Singoli Prodotti.
- Testa la pagina aprendo un prodotto dal frontend.
Errori comuni e come risolverli
- Template non si applica: non hai impostato la condizione di visualizzazione. Vai su Publish e aggiungi Tutti i Singoli Prodotti.
- Prezzo non aggiornato: se usi sconti dinamici verifica che il widget Product Price sia in modalita dinamica e non statica.
- Galleria non zoom: WooCommerce ha disabilitato il zoom: vai su Aspetto > Customizer > WooCommerce > Product Images e attiva Zoom on hover.
- Recensioni non mostrate: vai su WooCommerce > Impostazioni > Prodotti > Attiva recensioni dei prodotti.
Domande frequenti
D: Funziona con WooCommerce Subscriptions?
R: Si, il template Single Product gestisce anche prodotti subscription correttamente.
D: Posso usare un template diverso per i prodotti in offerta?
R: Si, crea una condizione basata su tag o categoria offerta.
D: Devo ricreare il template per ogni lingua WPML?
R: No, le condizioni si applicano in modo trasversale; assicurati solo di tradurre i widget di testo.
Hai bisogno di aiuto?
Se vuoi un sito Elementor performante realizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.