Elementor e WooCommerce insieme formano una delle combinazioni più flessibili per costruire negozi online personalizzati su WordPress. Mentre WooCommerce gestisce la funzionalità e-commerce (prodotti, carrello, checkout, pagamenti), Elementor ti offre il controllo visivo su come appaiono e funzionano quelle pagine del negozio. In questa guida, esploreremo la creazione delle pagine chiave di WooCommerce con Elementor, comprese le pagine dei prodotti, gli archivi del negozio e l'esperienza del carrello.
Questo tutorial presuppone che tu abbia installato WordPress, WooCommerce e Elementor Pro. Elementor Pro è necessario per i widget di WooCommerce: la versione gratuita di Elementor non li include.
Cosa Ti Serve Prima di Iniziare
| Requisito | Perché È Necessario | Dove Ottenerlo |
|---|---|---|
| WordPress 6.x+ | Piattaforma CMS principale | wordpress.org |
| WooCommerce (gratuito) | Funzionalità e-commerce | Directory dei plugin di WordPress |
| Elementor Pro | Widget di WooCommerce e Theme Builder | PluginTheme.net |
| Tema compatibile | Fondamenta per il tuo negozio | Guida alla selezione del tema |
| Prodotti di esempio | Contenuto per progettare modelli | WooCommerce → Strumenti → Importa dati di esempio |
Comprendere il Costruttore WooCommerce di Elementor
Elementor Pro include un Costruttore WooCommerce dedicato all'interno del suo sistema Theme Builder. Questo ti consente di creare modelli personalizzati per:
- Pagina Prodotto Singolo: Controlla il layout delle singole pagine prodotto
- Archivio Prodotti: Personalizza la pagina del negozio e le pagine delle categorie
- Pagina Carrello: Progetta un layout del carrello personalizzato
- Pagina di Checkout: Personalizza il layout del modulo di checkout
- Pagina Il Mio Account: Ridisegna il dashboard dell'account cliente
Ogni modello utilizza widget specifici di WooCommerce che estraggono dati dinamici dai tuoi prodotti. Questo significa che progetti il layout una volta e si applica automaticamente a tutti i prodotti (o a categorie specifiche).
Creare una Pagina Prodotto Personalizzata
Passo 1: Crea il Modello
- Naviga su Modelli → Theme Builder nel tuo admin di WordPress
- Clicca su "Aggiungi Nuovo" e seleziona "Prodotto Singolo" come tipo di modello
- Scegli un modello di pagina prodotto predefinito o inizia da una tela vuota
- L'editor di Elementor si aprirà con i widget di WooCommerce disponibili nel pannello
Passo 2: Aggiungi Widget di WooCommerce
Widget chiave di WooCommerce per le pagine prodotto:
| Widget | Cosa Mostra | Opzioni di Personalizzazione |
|---|---|---|
| Immagini del Prodotto | Galleria con miniature e lightbox | Layout della galleria, posizione delle miniature, attivazione/disattivazione zoom |
| Nome del Prodotto | Nome del prodotto (H1) | Tipografia, colore, allineamento |
| Prezzo del Prodotto | Prezzo normale e prezzo scontato | Tipografia, colore del badge sconto, layout |
| Valutazione del Prodotto | Valutazione a stelle dalle recensioni | Colore delle stelle, dimensione, allineamento |
| Aggiungi al Carrello | Selettore di quantità + pulsante aggiungi al carrello | Stile del pulsante, colori, layout della quantità |
| Descrizione Breve del Prodotto | Breve riassunto del prodotto | Tipografia, spaziatura |
| Meta del Prodotto | SKU, categorie, tag | Layout, tipografia, separatore |
| Tab Dati Prodotto | Descrizione, recensioni, tab informazioni aggiuntive | Stile della tab, bordo, spaziatura |
| Prodotti Correlati | Prodotti della stessa categoria | Colonne, conteggio, ordine |
| Upsell | Upsell collegati manualmente |
Passaggio 3: Pratiche Migliori per il Layout
Una pagina prodotto ad alta conversione segue un modello di layout collaudato:
- Above the fold: Immagini del prodotto (sinistra, 50-60% di larghezza) + titolo, prezzo, valutazione, breve descrizione e pulsante "aggiungi al carrello" (destra, 40-50% di larghezza)
- Below the fold: Schede dei dati del prodotto (descrizione completa, specifiche, recensioni)
- Sezione inferiore: Prodotti correlati e upsell in una griglia (3-4 colonne)
- Elementi di fiducia: Informazioni sulla spedizione, politica di reso, badge di sicurezza vicino al pulsante "aggiungi al carrello"
Mantieni il pulsante "aggiungi al carrello" visibile senza scorrere sia su desktop che su mobile. Usa colori contrastanti per il pulsante per attirare l'attenzione.
Personalizzare la Pagina del Negozio (Archivio Prodotti)
Passaggio 1: Crea un Modello di Archivio
- Vai su Modelli → Costruttore di Temi → Archivio Prodotti
- Aggiungi un nuovo modello e seleziona "Archivio Prodotti" come tipo
- Assegna condizioni di visualizzazione (tutti gli archivi, categorie specifiche o pagine di tag)
Passaggio 2: Configura la Griglia dei Prodotti
Il widget Prodotti Archivio visualizza l'elenco dei tuoi prodotti con queste opzioni:
- Colonne: 2-6 colonne (3-4 funziona bene per la maggior parte dei negozi)
- Prodotti per pagina: 12-24 è standard per l'esperienza utente
- Paginazione: Pagine numerate, pulsante "carica di più" o scroll infinito
- Dropdown di ordinamento: Consenti ai clienti di ordinare per prezzo, popolarità o valutazione
- Badge di vendita: Personalizza la posizione, il colore e il testo del badge di vendita
Per i negozi con molti prodotti, aggiungi il filtro per categoria sopra la griglia. Puoi usare il widget Menu di Elementor o un plugin di filtro prodotti come JetWooBuilder per opzioni di filtraggio avanzate.
Progettare la Pagina del Carrello
Elementor Pro ti consente di personalizzare il layout della pagina del carrello. Una buona pagina del carrello dovrebbe:
- Visualizzare immagini, nomi, prezzi e quantità dei prodotti in una tabella pulita
- Mostrare il totale corrente in modo prominente
- Includere un pulsante "Continua a fare shopping" che ritorna alla pagina del negozio
- Visualizzare un calcolatore di spedizione in modo che i clienti possano stimare i costi di consegna
- Mostrare prodotti cross-sell sotto la tabella del carrello
Il widget Carrello di Elementor sostituisce il layout predefinito del carrello di WooCommerce con un editor visivo dove puoi stilizzare ogni elemento: bordi della tabella, colori dei pulsanti, tipografia e spaziatura.
Personalizzare la Pagina di Checkout
La pagina di checkout influisce direttamente sul tuo tasso di conversione. Il widget Checkout di Elementor Pro fornisce il controllo su:
- Layout del modulo: Modulo di fatturazione/spedizione a una colonna o a due colonne
- Posizione del riepilogo dell'ordine: Affiancato al modulo o sopra/sotto
- Stile del pulsante: Colore, dimensione e testo del pulsante per effettuare l'ordine
- Sezione di pagamento: Layout a pulsante radio o a schede per i metodi di pagamento
- Badge di fiducia: Aggiungi icone di sicurezza e testo di garanzia vicino al modulo di pagamento
Per suggerimenti sull'ottimizzazione della conversione del checkout, consulta la nostra guida all'ottimizzazione del checkout di WooCommerce.
Considerazioni sulle Prestazioni
Elementor aggiunge CSS e JavaScript alle tue pagine. Per un negozio WooCommerce, le prestazioni sono direttamente collegate alle conversioni. Tieni a mente questi suggerimenti:
- Usa contenitori Flexbox invece di sezioni/colonne per ridurre il numero di elementi DOM
- Ottimizza le immagini dei prodotti: Usa il formato WebP, dimensioni appropriate e caricamento lazy. Consulta la nostra guida all'ottimizzazione delle immagini
- Limita il numero di widget: Ogni widget aggiunge markup; utilizza solo ciò di cui hai bisogno
- Abilita le funzionalità di prestazione di Elementor: Caricamento migliorato delle risorse, caricamento migliorato del CSS
- Utilizza un plugin di caching: WP Rocket funziona bene con le configurazioni di Elementor WooCommerce
Addon Essenziali per Elementor WooCommerce
Questi addon di Elementor estendono le capacità di costruzione di WooCommerce:
| Addon | Caratteristiche Chiave di WooCommerce |
|---|---|
| JetWooBuilder | Griglie di prodotto avanzate, modelli di archivio personalizzati, layout di prodotto singolo con logica condizionale |
| Essential Addons Pro | Griglia di prodotto, carosello di prodotto, checkout di WooCommerce |
| Happy Elementor Addons | Griglia di categorie di prodotto, mini carrello, carosello di prodotto |
Domande Frequenti
Ho bisogno di Elementor Pro per WooCommerce, o funziona la versione gratuita?
Elementor Pro è necessario per i widget specifici di WooCommerce (Immagini prodotto, Aggiungi al carrello, Schede dati prodotto, Carrello, Checkout, ecc.). La versione gratuita di Elementor non include questi widget. Puoi utilizzare la versione gratuita per progettare pagine normali, ma i modelli WooCommerce personalizzati richiedono Elementor Pro.
Posso usare Elementor per la pagina di checkout?
Sì. Elementor Pro include un widget di Checkout che sostituisce il layout di checkout predefinito di WooCommerce. Puoi personalizzare i campi del modulo, il riepilogo dell'ordine, la sezione di pagamento e il layout generale. Tuttavia, fai attenzione a personalizzazioni pesanti che potrebbero compromettere le integrazioni con i gateway di pagamento: testa sempre il flusso di acquisto completo dopo aver apportato modifiche.
Come posso creare layout di pagina prodotto diversi per categorie diverse?
Nell'Theme Builder di Elementor, puoi assegnare condizioni di visualizzazione a ciascun modello. Crea un modello di pagina prodotto per abbigliamento (con selettori di taglia/colore), un altro per prodotti digitali (senza informazioni di spedizione), e così via. Ogni modello si applica solo ai prodotti nelle categorie specificate.
Elementor rallenta WooCommerce?
Elementor aggiunge un sovraccarico di CSS e JavaScript a qualsiasi pagina. Nelle pagine prodotto con molti widget, questo può aumentare i tempi di caricamento di 0,5-1,5 secondi rispetto ai modelli predefiniti di WooCommerce. Utilizzare le funzionalità di prestazione integrate di Elementor, ottimizzare le immagini e utilizzare un plugin di caching aiuta a mitigare questo impatto. Per negozi critici per le prestazioni, considera un tema più leggero come GeneratePress.
Posso usare i modelli WooCommerce di Elementor con qualsiasi tema?
La maggior parte dei modelli WooCommerce di Elementor funziona con qualsiasi tema che supporta WooCommerce. Tuttavia, alcuni temi potrebbero avere il proprio stile di pagina prodotto che confligge con i modelli di Elementor. Temi come Astra, GeneratePress e OceanWP sono progettati per funzionare senza problemi con Elementor e fornire la tela più pulita per modelli personalizzati.
Ottieni Elementor Pro per la Creazione di Negozi WooCommerce
Accedi a tutti i widget di WooCommerce, Theme Builder e oltre 100 modelli Pro. Crea pagine prodotto personalizzate, archivi di negozi e layout di checkout visivamente.
Esplora Elementor Pro →
