WooCommerce offre un negozio online funzionale fin da subito, ma le pagine predefinite hanno un aspetto generico che difficilmente rispecchia il brand aziendale. Grazie a Elementor Pro e al suo WooCommerce Builder, è possibile personalizzare ogni singola pagina del negozio — dalla vetrina dei prodotti al checkout — senza scrivere una riga di codice. In questa guida vedremo come sfruttare al massimo questa combinazione per creare un e-commerce professionale, performante e orientato alla conversione.
Elementor Pro e il WooCommerce Builder: Panoramica
Elementor nella versione gratuita consente di costruire pagine generiche con un editor visuale drag-and-drop, ma il WooCommerce Builder è disponibile esclusivamente nella versione Pro. Questa funzionalità aggiunge oltre 20 widget dedicati al commercio elettronico e la possibilità di creare template personalizzati per ogni tipo di pagina WooCommerce: shop, archivio categorie, singolo prodotto, carrello, checkout, area personale e pagina di ringraziamento.
Il vantaggio principale rispetto ai page builder concorrenti è la coerenza visiva: ogni modifica applicata tramite Elementor si riflette automaticamente su tutte le pagine che utilizzano quel template, garantendo uniformità grafica in tutto il negozio.
Personalizzare la Pagina Shop
La pagina shop è la vetrina principale del negozio e rappresenta spesso il primo punto di contatto tra il visitatore e il catalogo. Per personalizzarla con Elementor Pro, è necessario accedere a Template → Theme Builder → Product Archive e creare un nuovo template.
Il Widget Product Grid
Il widget Products (o Product Grid) è il cuore della pagina shop. Permette di configurare:
- Numero di colonne — da 1 a 6, con impostazioni separate per desktop, tablet e smartphone
- Prodotti per pagina — per controllare la paginazione e il caricamento
- Ordinamento predefinito — per data, prezzo, popolarità o valutazione
- Spaziatura tra le card — margini e padding personalizzabili
- Stile dei badge — “In offerta”, “Novità”, “Esaurito” con colori e tipografia custom
È fondamentale impostare la sorgente dei dati su “Current Query” affinché il widget rispetti la query nativa di WooCommerce, inclusi filtri, ordinamento e paginazione. Senza questa impostazione, il widget mostra sempre gli stessi prodotti indipendentemente dal contesto.
Il Widget Product Carousel
Per le sezioni in evidenza — come prodotti in offerta o nuovi arrivi — il widget Product Carousel aggiunge un effetto slider con autoplay, frecce di navigazione e dot indicators. È particolarmente efficace nella parte superiore della pagina shop per attirare attenzione sui prodotti strategici.
Progettare il Template del Singolo Prodotto
La pagina del singolo prodotto è dove avviene la decisione finale di acquisto. Un layout ben progettato riduce le frizioni e aumenta il tasso di conversione. Per creare un template personalizzato, accedere a Template → Theme Builder → Single Product.
Widget Essenziali per la Pagina Prodotto
Elementor Pro mette a disposizione widget specifici per ogni elemento della pagina prodotto:
- Product Images — galleria con zoom, lightbox e slider thumbnails
- Product Title — con controllo completo su tipografia, colore e spaziatura
- Product Price — prezzo regolare, prezzo in offerta e percentuale di sconto
- Product Rating — stelle e conteggio recensioni
- Product Stock — disponibilità con messaggi personalizzabili
- Add to Cart — pulsante con selettore quantità, varianti e stile custom
- Product Tabs — descrizione, informazioni aggiuntive e recensioni in formato tab
- Product Meta — SKU, categorie e tag
- Related Products — prodotti correlati basati su categoria e tag
- Upsells — prodotti consigliati come upgrade rispetto a quello visualizzato
La libertà di posizionamento offerta da Elementor consente layout non convenzionali: ad esempio, è possibile collocare il pulsante “Aggiungi al carrello” in una sidebar sticky che segue lo scroll, oppure creare una sezione a tutta larghezza per la galleria immagini con un layout affiancato per prezzo e descrizione breve.
Template Condizionali per Categoria
Una delle funzionalità avanzate del WooCommerce Builder è la possibilità di assegnare template diversi in base alla categoria del prodotto. Un negozio che vende sia abbigliamento che elettronica, ad esempio, necessita di layout differenti: il primo richiede un selettore taglia e colore ben visibile, mentre il secondo beneficia di una tabella specifiche tecniche prominente.
Per configurare questa funzionalità, è sufficiente creare template multipli in Theme Builder e impostare le condizioni di visualizzazione: “Mostra su Prodotti nella categoria Abbigliamento” per il primo template e “Mostra su Prodotti nella categoria Elettronica” per il secondo. Il template generico funge da fallback per le categorie senza un template dedicato.
Pagine Archivio e Categorie
Le pagine archivio (categorie, tag, attributi) seguono la stessa logica della pagina shop ma consentono personalizzazioni aggiuntive. Nel template Product Archive è possibile aggiungere:
- Archive Title — il nome della categoria con descrizione
- Immagine di categoria — un banner visivo in testa alla pagina
- Breadcrumb — per migliorare la navigazione e la SEO
- Filtri laterali — per prezzo, attributi e valutazione
Un suggerimento pratico: creare template archivio specifici per le categorie principali, con colori e immagini di sfondo coerenti con la tipologia di prodotto. Questo approccio rafforza la percezione di professionalità e aiuta il visitatore a orientarsi nel catalogo.
Personalizzare il Carrello
La pagina carrello predefinita di WooCommerce è funzionale ma essenziale. Con Elementor Pro è possibile trasformarla in uno strumento di conversione. I miglioramenti consigliati includono:
- Layout a due colonne — prodotti a sinistra, riepilogo e totale a destra (sticky)
- Cross-sell ben visibili — prodotti complementari sotto il carrello con layout carousel
- Indicatore di spedizione gratuita — “Aggiungi ancora 15€ per la spedizione gratuita!” con barra di avanzamento
- Badge di sicurezza — icone per pagamento sicuro, reso gratuito e assistenza
- Campo coupon ridisegnato — meno invasivo rispetto al blocco standard
Il widget Cart di Elementor Pro consente di personalizzare ogni aspetto visivo: colori delle celle della tabella, tipografia dei prezzi, stile del pulsante “Aggiorna carrello” e aspetto del pulsante “Procedi al checkout”.
Il Checkout: Ottimizzare la Conversione
Il checkout è il punto critico dove si concentra la maggior parte degli abbandoni. Un checkout ben progettato riduce le frizioni e trasmette fiducia. Elementor Pro offre un widget Checkout completamente personalizzabile.
Best Practice per il Checkout
- Layout a due colonne — campi di fatturazione a sinistra, riepilogo ordine a destra
- Campi ridotti al minimo — rimuovere i campi non necessari tramite i filtri WooCommerce
- Indicatore di progresso — mostrare in quale fase si trova il cliente (Carrello → Dati → Pagamento)
- Riepilogo ordine visibile — sempre in vista, possibilmente in una sidebar sticky
- Metodi di pagamento chiari — icone delle carte accettate e loghi dei gateway (PayPal, Stripe, Apple Pay)
- Rassicurazioni — certificato SSL, politica resi, assistenza clienti con numero di telefono
Un aspetto spesso trascurato è la versione mobile del checkout: su smartphone i campi devono essere sufficientemente grandi, il tastierino numerico deve attivarsi automaticamente per telefono e CAP, e il pulsante “Effettua ordine” deve essere ben visibile senza necessità di scorrimento eccessivo.
Area Personale (My Account)
La pagina “Il mio account” è il punto di riferimento per i clienti registrati. Con Elementor Pro è possibile personalizzare il template per rendere questa area coerente con il resto del sito. I widget disponibili consentono di:
- Ridisegnare la dashboard con card informative (ordini recenti, indirizzo, stato abbonamento)
- Personalizzare la lista ordini con colori di stato ben distinguibili
- Aggiungere sezioni custom come programma fedeltà, documenti scaricabili o ticket di assistenza
- Creare un menu laterale personalizzato con icone e stile coerente
Pagina di Ringraziamento (Thank You Page)
La pagina di conferma ordine è una delle meno curate nella maggior parte dei negozi online, ma rappresenta un momento in cui il cliente è altamente ricettivo. Oltre al riepilogo ordine standard, è consigliabile aggiungere:
- Un messaggio di ringraziamento personalizzato con il nome del cliente
- Prossimi passi — tempistiche di spedizione, come tracciare il pacco
- Prodotti consigliati — basati su quanto appena acquistato
- Invito a iscriversi alla newsletter — con un incentivo (sconto sul prossimo ordine)
- Condivisione social — pulsanti per condividere il proprio acquisto
Design Responsive per il Commercio Elettronico
Oltre il 60% degli acquisti online avviene da dispositivi mobili. Elementor Pro consente di configurare impostazioni specifiche per desktop, tablet e smartphone su ogni widget. Le aree critiche da verificare sono:
- Griglia prodotti — 4 colonne su desktop, 2 su tablet, 1 su smartphone
- Galleria prodotto — thumbnails sotto la foto principale su desktop, slider swipe su mobile
- Pulsante Add to Cart — dimensione minima 48px per il touch target su mobile
- Checkout — layout a colonna singola su smartphone con campi full-width
- Tabelle carrello — trasformazione in layout card su schermi piccoli
È fondamentale testare il negozio su dispositivi reali (non solo tramite il responsive mode del browser) per verificare che gesture come swipe, pinch-to-zoom e tap funzionino correttamente su ogni pagina.
Considerazioni sulle Prestazioni
Elementor aggiunge CSS e JavaScript aggiuntivi che possono rallentare il caricamento delle pagine. Per mantenere prestazioni ottimali in un negozio WooCommerce personalizzato con Elementor, è necessario adottare alcune precauzioni:
Ottimizzazioni Elementor
- Abilitare il caricamento ottimizzato degli asset — in Elementor → Impostazioni → Sperimentazioni, attivare “Improved Asset Loading” per caricare solo il CSS e il JS dei widget effettivamente utilizzati nella pagina
- Ridurre i widget per pagina — ogni widget aggiunge codice; preferire layout semplici con meno elementi nidificati
- Evitare animazioni pesanti — le animazioni di ingresso su decine di prodotti rallentano il rendering
- Utilizzare il Flexbox Container — il nuovo sistema di layout di Elementor genera meno markup HTML rispetto alle vecchie sezioni
Ottimizzazioni Generali
- Plugin di cache — WP Rocket o LiteSpeed Cache per il caching delle pagine (escludendo carrello, checkout e area personale)
- Lazy loading delle immagini — fondamentale sulle pagine con molti prodotti
- CDN — per servire immagini e asset statici da server distribuiti geograficamente
- Formato WebP/AVIF — conversione automatica delle immagini prodotto per ridurre il peso
- Preconnect ai gateway di pagamento — aggiungere
<link rel="preconnect">per Stripe, PayPal e altri servizi esterni
Un negozio WooCommerce con Elementor Pro ben ottimizzato dovrebbe raggiungere un punteggio Google PageSpeed superiore a 80 su mobile. Valori inferiori indicano la necessità di interventi tecnici mirati.
Errori Comuni da Evitare
Dalla nostra esperienza nella realizzazione di e-commerce professionali, gli errori ricorrenti quando si personalizza WooCommerce con Elementor sono:
- Non impostare “Current Query” — il widget Products mostra prodotti fissi invece di rispettare filtri e paginazione
- Dimenticare le condizioni del template — il template non viene applicato alle pagine giuste
- Ignorare il mobile — testare solo su desktop e scoprire problemi di layout dopo il lancio
- Sovraccaricare di widget — troppi elementi rendono le pagine lente e confuse
- Non aggiornare Elementor Pro — le versioni obsolete possono avere incompatibilità con WooCommerce
- Perdere le personalizzazioni durante gli aggiornamenti — è essenziale usare child theme e template Elementor (mai modificare file core)
Assistenza Professionale
Personalizzare un negozio WooCommerce con Elementor Pro richiede competenze sia grafiche che tecniche. Un layout esteticamente gradevole ma lento o poco usabile su mobile vanifica gli investimenti in marketing e advertising. Se desideri un e-commerce personalizzato che unisca design professionale e prestazioni ottimali, contatta il nostro team per una consulenza dedicata.
Guide correlate della serie WooCommerce
Migliora il Tuo Sito WordPress
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress: