WooCommerce aggiunge funzionalità di ecommerce a un sito WordPress, ma cosa succede quando si vuole qualcosa di più degli strumenti di progettazione integrati di WooCommerce?

Come avrete già scoperto, WooCommerce limita le possibilità di progettazione, soprattutto per quanto riguarda le pagine dei prodotti e l’area di pagamento.

È qui che entra in gioco l’integrazione di WooCommerce con Elementor, che offre funzionalità drag-and-drop, controllo creativo su tutte le pagine di WooCommerce e supporto per i temi e gli addon avanzati di Elementor per WooCommerce che altrimenti non potreste utilizzare.

In questa guida esploriamo le basi di WooCommerce ed Elementor, come funzionano insieme e come creare un bellissimo sito di ecommerce con la combinazione WooCommerce-Elementor. Continuate a leggere per iniziare.

Cos’è WooCommerce?

WooCommerce è un plugin per WordPress che trasforma qualsiasi installazione standard di WordPress in un sito di ecommerce.

Homepage di WooCommerce.
WooCommerce

È la soluzione più popolare per gestire un negozio online su WordPress grazie alla sua rapida integrazione nell’ecosistema WordPress, alla solida raccolta di temi ecommerce supportati e alla flessibilità di sviluppo avanzata.

Ecco alcune caratteristiche principali di WooCommerce:

  • Vendita di prodotti digitali e fisici: WooCommerce supporta anche un’ampia gamma di altri tipi di prodotti, tra cui abbonamenti, prodotti variabili, prodotti affiliati e prodotti raggruppati.
  • Gestione del negozio ecommerce: WooCommerce gestisce gli ordini, l’inventario dei prodotti e tutti i contatti all’interno della sua dashboard.
  • Creazione automatizzata di pagine ecommerce essenziali: Una volta attivato WooCommerce sul sito, avrete una pagina del negozio, una pagina del carrello, una pagina “il mio account” e molte altre.
  • Estendibilità e scalabilità: Esiste un vasto ecosistema di plugin, estensioni e componenti aggiuntivi per WooCommerce, che permette di incorporare nuove funzionalità non integrate. È anche facile scalare un’attività con WooCommerce grazie al suo supporto per grandi quantità di ordini, prodotti e altri dati.
  • Comunità e supporto: Anche se non c’è un supporto umano diretto, WooCommerce ha una grande comunità di sviluppatori e utenti attivi e internet è pieno di forum e tutorial per trovare soluzioni.
  • Pagamenti, spedizioni e tasse: È possibile scegliere tra centinaia di processori di pagamento e collegati al fornitore di spedizioni preferito. Si possono anche impostare le tasse in base alle zone.
  • Dati analitici: Poche piattaforme di ecommerce possono competere con il robusto set di report e analisi fornito da WooCommerce. È possibile tenere traccia delle prestazioni del negozio durante tutto l’anno e analizzare tutto, dalle azioni dei clienti alle entrate giornaliere.

Nel complesso, WooCommerce offre un’ampia gamma di funzionalità che lo rendono il plugin ecommerce ideale per WordPress. Detto questo, ci sono altri plugin per l’ecommerce da prendere in considerazione, che vi consigliamo prima di affidarvi completamente a WooCommerce.

A cosa serve Elementor?

Elementor serve a controllare facilmente il design di qualsiasi sito web WordPress. Si integra perfettamente con WooCommerce. In questo modo si possono personalizzare gli elementi del proprio negozio WooCommerce che normalmente non sono modificabili.

Creare un sito web e progettare il proprio futuro
Elementor

Ad esempio, Elementor aiuta a personalizzare:

  • La pagina del negozio WooCommerce
  • Le pagine dei prodotti
  • Le pagine Checkout e Carrello
  • La pagina Il mio account
  • La pagina del negozio

Elementor offre un’esperienza di editing drag-and-drop, che consente un’interfaccia di progettazione visiva che utilizza principalmente il mouse del computer, anziché il codice o delle impostazioni di sviluppo avanzate.

L’editor drag-and-drop non solo permette di personalizzare le pagine sopra elencate, ma offre un maggiore controllo sul design di ogni parte del sito web.

Ad esempio, è possibile personalizzare la homepage o aggiungere una pagina Coming Soon in pochi secondi, grazie ai template di pagina e di sezione forniti con Elementor.

Nel complesso, Elementor offre:

  • Un costruttore drag-and-drop con blocchi WooCommerce
  • Template già pronti per l’ecommerce
  • Uno strumento specifico per il WooCommerce Builder con widget e funzioni dedicate agli elementi di ecommerce
  • Stili avanzati per ogni blocco, sezione e pagina creata con WooCommerce

Grazie alla facilità di utilizzo di Elementor con WooCommerce, il plugin è utilizzato da sviluppatori e proprietari di siti di tutto il mondo per creare negozi online altamente personalizzati.

WooCommerce funziona con Elementor?

Sì, Elementor è stato progettato per funzionare con il plugin WooCommerce.

Infatti, Elementor viene venduto come prodotto che:

  • Riduce i plugin necessari per WooCommerce
  • Aumenta le conversioni (grazie a sezioni e temi WooCommerce preconfezionati e ottimizzati)
  • Aiuta a visualizzare lo sviluppo di un negozio online senza dover ricorrere al codice

Elementor viene fornito con diversi widget WooCommerce.

Ecco un elenco di alcuni widget WooCommerce Elementor:

  • Meta prodotto
  • Descrizione breve
  • Breadcrumb del prodotto
  • Il mio account
  • Carrello
  • Menu carrello
  • Stock dei prodotti
  • Aggiungi al carrello
  • Valutazione del prodotto
  • Molti altri

Per quanto riguarda il design personalizzato, Elementor aiuta a personalizzare aree di un negozio WooCommerce che prima non erano generalmente disponibili per la personalizzazione. Elementor permette di modificare il Checkout, il Riepilogo degli acquisti, la pagina Il mio account, le pagine dei prodotti, il carrello e altro ancora.

Oltre ai kit completi per siti web WooCommerce e alla funzione di configurazione in un’unica pagina per WooCommerce, si può dire che WooCommerce ed Elementor lavorano piuttosto bene insieme.

Perché usare Elementor per i siti WooCommerce?

Utilizzare WooCommerce senza Elementor va benissimo, resta comunque una potente piattaforma di ecommerce per la maggior parte delle aziende. Tuttavia, le opzioni di personalizzazione sono limitate senza Elementor e sarà necessario dedicare più tempo allo sviluppo del sito web.

Ecco i principali motivi per utilizzare Elementor con WooCommerce:

Design visivo migliorato

WordPress ha il suo costruttore di pagine Gutenberg, ma Elementor amplia questa funzionalità con un maggior numero di blocchi e sezioni precostituite.

Personalizzazione delle pagine WooCommerce non modificabili

Dalla pagina del carrello alla pagina Il mio account, Elementor permette di personalizzare diverse pagine di WooCommerce che di solito sono bloccate. Inoltre, permette di personalizzare quasi tutti gli aspetti delle pagine dei prodotti.

Design orientati alla conversione

Tutti gli elementi di Elementor sono responsive e molti widget e blocchi di WooCommerce sono stati creati appositamente per aumentare le vendite, come le tabelle dei prezzi, le testimonianze e i timer per il conto alla rovescia.

Integrazione perfetta con WooCommerce

Elementor funziona perfettamente con WooCommerce e questo svela un vasto ecosistema di temi e addon compatibili con WooCommerce realizzati appositamente per la creazione di pagine Elementor.

Risparmio di tempo e di costi

I modelli, i blocchi e le sezioni pre-progettati di Elementor eliminano la necessità di codifiche personalizzate e di noiose configurazioni manuali. Bastano pochi minuti per creare pagine ecommerce dall’aspetto professionale. Questo riduce i costi di sviluppo e il tempo dedicato alla creazione del negozio.

Con vantaggi come questi, vi consigliamo di utilizzare sempre Elementor (o un altro page builder che vi piace) quando costruite un sito con WooCommerce.

Come creare un sito ecommerce con Elementor e WooCommerce?

Elementor e WooCommerce sono la migliore combinazione di strumenti per creare un sito ecommerce su WordPress. In questa guida spieghiamo tutti i passaggi necessari per creare un negozio online con questi due strumenti.

1. Installare WooCommerce ed Elementor

Per iniziare, è necessario avere:

  1. WordPress
  2. Hosting (preferibilmente una soluzione di hosting potente e gestita come Kinsta)

Installate WordPress sul vostro hosting. Kinsta offre un’installazione di WordPress con un solo clic.

Digitare il titolo e la password del sito WordPress.
Aggiunta di un nuovo sito web WordPress in Kinsta

Una volta installati questi elementi, installate il plugin WooCommerce. Gli utenti dell’Hosting di Kinsta hanno il vantaggio di poter installare automaticamente WooCommerce al momento della creazione dell’account.

Aggiungere WooCommerce all'hosting di Kinsta.
Opzione per installare WooCommerce con la creazione di un sito web Kinsta

Altrimenti, aggiungete il plugin gratuito WooCommerce al vostro sito WordPress.

Potete anche scoprire come configurare WooCommerce sul vostro sito con il minimo sforzo. Assicuratevi di attivare WooCommerce e di seguire le fasi di configurazione.

Una volta completata, vedrete una scheda di WooCommerce in WordPress e i link per aggiungere i prodotti, impostare i pagamenti, aggiungere le aliquote fiscali e altro ancora.

Cominciare aggiungendo i prodotti.
La dashboard di WooCommerce in WordPress

L’ultima parte di questa fase prevede l’installazione e l’attivazione del Page Builder Elementor. Installate la versione gratuita di Elementor oppure seguite i passi per acquistare e scaricare Elementor Pro.

2. Aggiungere un tema WooCommerce Elementor

WooCommerce è compatibile con la maggior parte dei temi di WordPress. Lo stesso vale per Elementor. Tuttavia, è meglio scegliere un tema multiuso (che permetta di creare qualsiasi tipo di sito web) o un tema orientato all’ecommerce. In questo modo, non vi ritroverete con un tema per il blogging quando cercherete di creare un vero e proprio negozio online.

Più avanti in questo articolo, troverete i nostri consigli sui migliori temi WooCommerce Elementor per iniziare. Potete anche cercare online altri temi WooCommerce Elementor.

Una volta trovato il tema perfetto per le vostre esigenze, installatelo sul vostro sito WordPress.

3. Creare una homepage WooCommerce

Per impostazione predefinita, non viene generata nessuna homepage per il negozio WooCommerce e dovrete quindi costruirla da zero. Per velocizzare questo processo, potete creare automaticamente una homepage andando su WooCommerce > Home in WordPress. Cliccate su Crea una pagina personalizzata e personalizzatela in base alle vostre esigenze.

Aggiungere homepage e logo.
Cliccare per creare una homepage personalizzata e caricare un logo

In questo modo viene aggiunta una Homepage-Front Page per la personalizzazione.

Selezionare la frontpage.
Cliccare sull’opzione Homepage

Infine, andate su Aspetto > Personalizza e selezionate Impostazioni homepage. Scegliete Una pagina statica in Visualizza la tua homepage. Selezionate Homepage nel menu a tendina Homepage.

Impostazioni della homepage per una homepage statica.
Rendere la propria homepage statica

In questo modo quella pagina sarà la vostra homepage globale e potrete personalizzarla con Elementor o con il Personalizza Tema di WordPress.

Il design della homepage (e dell’intero sito web in generale) dipende dal tema scelto. Ad esempio, il tema Astra offre dei modelli di partenza per creare un bellissimo negozio online in pochi secondi. Questi si trovano in Aspetto > Template Starter (se state usando Astra).

Cercare un template
Cercare i template di pagina specifici per settore in Astra

Vi consigliamo anche di esplorare il Theme Builder di Elementor. Per farlo, andate su Template > Theme Builder.

Usate l’opzione Pagina singola e cliccate su Aggiungi nuovo. Usate le schede Pagine e Blocchi per progettare rapidamente una homepage professionale o qualsiasi altra pagina del sito.

Scegliere un modello di pagina in Elementor.
Usare la scheda Pagine per creare homepage precostituite

4. Aggiungere prodotti a WooCommerce

Per aggiungere un prodotto a WooCommerce, andate su Prodotti > Aggiungi nuovo. Avete anche la possibilità di importare più prodotti con un file CSV.

Aggiungere un nuovo prodotto.
Cliccare per aggiungere un nuovo prodotto in WooCommerce

Inserite tutti i dati, dal nome del prodotto alla descrizione, dal prezzo alla categoria del prodotto. Cliccate sul pulsante Pubblica quando avete finito con il prodotto.

Pagina del prodotto con nome e descrizione.
Aggiungi dettagli come il nome del prodotto, il prezzo e i media

L’elenco dei prodotti è sempre disponibile in Prodotti > Tutti i prodotti di WordPress.

Scorrere tutti i prodotti in WordPress.
Elenco dei prodotti in WooCommerce

5. Configurare spedizione, gateway di pagamento e tasse

Prima di accettare gli acquisti da parte dei clienti, è importante configurare gli elementi essenziali come l’elaborazione dei pagamenti, le regole di spedizione e le tasse.

Tutti questi elementi si trovano nell’area WooCommerce > Impostazioni di WordPress.

Per le spedizioni, andate alla scheda Spedizioni. Cliccate su Aggiungi zona di spedizione. Questo permette di impostare tariffe di spedizione specifiche in base alle zone geografiche.

Fare clic su spedizione.
Aggiungere una zona di spedizione

In alternativa, potete scorrere fino in fondo alla pagina per configurare l’estensione WooCommerce Shipping, che offre etichette stampabili USPS e DHL.

Come iniziare con WooCommerce Shipping.
Cliccare sul pulsante Inizia per WooCommerce Shipping

Ci sono anche molti altri componenti aggiuntivi ed estensioni per le spedizioni di WooCommerce disponibili per diverse regioni, vettori e gestione delle spedizioni.

Per impostare l’elaborazione dei pagamenti, andate alla scheda Pagamenti nelle Impostazioni di WooCommerce. Installate il modulo WooCommerce Payments per accettare metodi di pagamento come carte di credito e Apple Pay.

Potreste anche prendere in considerazione un’altra soluzione di elaborazione dei pagamenti come Stripe, Alipay o Klarna. Seguite i passaggi presentati per attivare l’elaborazione dei pagamenti, come l’inserimento dell’indirizzo dell’attività e l’aggiunta di un conto corrente per ricevere i pagamenti.

Installare un pulsante per i pagamenti.
Installare WooCommerce Payments

Per le tasse, andate alla scheda Generale di WooCommerce. Assicuratevi di aver inserito l’indirizzo commerciale; le tasse e le tariffe di spedizione vengono calcolate in base a questo indirizzo.

Scorrete fino a selezionare la casella Abilita tasse per calcolarle in base al vostro indirizzo durante il checkout.

Spuntare per abilitare le aliquote fiscali.
Abilitazione del calcolo delle tasse in WooCommerce

Questo rivela una nuova scheda nelle Impostazioni di WooCommerce chiamata Tasse. Selezionatela per configurare le impostazioni come le classi di tasse aggiuntive, i prezzi inseriti con le tasse e le modalità di calcolo delle tasse.

Selezionare la scheda Tasse.
Aprire la nuova scheda Tasse

Come per le spedizioni, esistono diverse estensioni fiscali per WooCommerce che si possono attivare per ottenere funzioni più avanzate.

6. Creare una pagina del negozio in WooCommerce usando Elementor

Per impostazione predefinita, WooCommerce genera una pagina Shop/Store. Potete trovarla andando nella scheda Pagine di WordPress.

Scegliere la pagina negozio.
Fare clic sulla pagina Store – Shop per crearla

Cliccate su Modifica con Elementor. C’è anche un pulsante Template Kits di Elementor per aggiungere rapidamente un bel design alla pagina del negozio.

8 pagine di template.
Vari kit di template per le pagine di Elementor

Usate Elementor per modificare lo stile e la formattazione della pagina del negozio e prendete in considerazione l’inserimento di un kit di template per velocizzare il processo.

Una volta completata, avrete una pagina del negozio con una vetrina dei vostri prodotti, strumenti di filtraggio e una barra di ricerca.

Frontend del negozio.
Una pagina del negozio completata con filtri, barra di ricerca e articoli

7. Mostrare raccolte di prodotti con Elementor

Per creare una raccolta di prodotti, da visualizzare sulla homepage o come pagina di categoria separata, vi consigliamo di utilizzare il Theme Builder di Elementor o di aggiungere un semplice widget a una pagina esistente.

Utilizzando il Theme Builder, selezionate Product Archive, quindi selezionate e salvate uno dei layout previsti per le raccolte di prodotti.

Potete assegnare questi modelli alla pagina che preferite o creare una pagina completamente nuova.

Scegliere uno dei tre blocchi.
Scegliere un blocco Product Archive dal design accattivante per una raccolta

In alternativa, potreste andare su una pagina creata in precedenza, aprirla in Elementor e aggiungere il widget Prodotti a qualsiasi sezione per ottenere una raccolta di prodotti dall’aspetto gradevole.

Portare il blocco prodotti nel design.
Trascinare e rilasciare il widget Prodotti nell’editor

Successivamente, Elementor fornisce le impostazioni per regolare il numero di colonne, le righe e l’intero stile del widget.

8. Personalizzare le pagine dei prodotti con Elementor

Le pagine dei prodotti sono gestite in modo simile a qualsiasi altra pagina in Elementor.

Un’opzione è quella di aprire qualsiasi prodotto nell’inventario e cliccare sul pulsante Modifica con Elementor.

Pulsante di modifica con Elementor.
Modifica qualsiasi pagina di prodotto con Elementor

Per un controllo più granulare e per aggiungere un design realizzato in modo professionale, andate su Template > Theme Builder di WordPress. Selezionate la scheda Prodotto singolo e cliccate su Aggiungi nuovo.

Potete scegliere i blocchi o le pagine progettate appositamente per le pagine prodotto di WooCommerce.

Blocchi di prodotti singoli.
Blocchi pre-costruiti per singoli prodotti in Elementor

Questo vi collega alla libreria di template di Elementor. Dopodiché potrete inserire qualsiasi blocco o modello di pagina di prodotto a livello globale o per singole pagine di prodotto.

9. Personalizzare il carrello e il checkout di WooCommerce con Elementor

Le prossime sezioni riguardano la personalizzazione delle pagine ecommerce essenziali generate automaticamente da WooCommerce.

Per impostazione predefinita, queste pagine (come Checkout, Carrello e Il mio account) hanno un potenziale di modifica limitato. Con Elementor, invece, avrete il pieno controllo della formattazione, dello stile e dell’aspetto generale di ciascuna di esse.

Per modificare le pagine Checkout e Carrello, andate su Pagine in WordPress. Scorrete sulla pagina desiderata e cliccate su Modifica con Elementor.

Modificare il Carrello con Elementor.
Modificare la pagina del Carrello con Elementor per avere il massimo controllo

Elementor Pro fornisce widget sostitutivi per sostituire completamente il carrello/checkout predefinito di WooCommerce.

Individuate il widget Carrello sotto WooCommerce e aggiungetelo al progetto. Potrete così eliminare il carrello predefinito di WooCommerce.

Spostare il blocco Carrello.
Trascinare il modulo Carrello nella pagina del Carrello

A questo punto, potete modificare il contenuto, lo stile e le impostazioni avanzate del carrello in Elementor. Nella pagina del carrello, ad esempio, potete modificare i colori e i caratteri per adattarli meglio al vostro brand.

È anche possibile aggiungere widget per testi extra, prodotti consigliati o media mentre i clienti navigano nel loro carrello. Ci sono anche strumenti per modificare i coupon, i totali e il riepilogo dell’ordine.

Schede contenuto, stile e avanzate.
È possibile sbarazzarsi del vecchio modulo Carrello di WooCommerce e modificare tutto, dalle impostazioni dei coupon allo stile

La procedura per modificare l’area Checkout è simile: aprite la pagina Checkout in Elementor e trascinate il widget Elementor Checkout nell’editor. Questo sostituisce il modulo di checkout predefinito di WooCommerce, a patto che cancelliate quello vecchio.

Scegliere il widget checkout.
Aggiungere il widget Checkout a Elementor

Una volta inserito e selezionato, il widget Checkout offre schede per il contenuto, lo stile e le impostazioni avanzate.

Modificare gli strumenti di checkout.
Modificare la pagina del checkout in Elementor, dalle impostazioni dei coupon agli stili di pagamento

Queste schede consentono di personalizzare elementi come la sezione Il tuo ordine, i dettagli sui clienti che ritornano e le informazioni sul pagamento. È possibile modificare i colori, gli stili, le dimensioni e molto altro ancora.

10. Personalizzare la pagina Il mio account con WooCommerce ed Elementor

Per personalizzare la pagina predefinita Il mio account di WooCommerce, aprite Pagine in WordPress. Fate clic su Modifica con Elementor dopo aver navigato nella pagina Il mio account.

Eliminate il vecchio modulo Il mio account e aggiungete la versione di Elementor che si trova come widget sotto WooCommerce.

In questo modo avrete a disposizione le impostazioni dei contenuti per le schede e le opzioni aggiuntive, oltre allo stile e alle impostazioni avanzate.

Impostazioni di Il mio Account.
Modifica della pagina Il mio account con le opzioni per i contenuti, lo stile e le impostazioni avanzate

Ad esempio, potreste voler cambiare il tipo di bordo o il colore della pagina Il mio account per ottenere un’atmosfera più attinente al brand.

Ed ecco come creare un negozio online con l’integrazione di WooCommerce Elementor!

Di seguito, invece, troverete i migliori temi e addon per Elementor WooCommerce che vi aiuteranno nel processo di progettazione.

11 Migliori temi Elementor per WooCommerce 2024

Quando si cercano temi WooCommerce Elementor, è meglio puntare a temi con:

  • Supporto sia per WooCommerce che per Elementor
  • Un design reattivo
  • Velocità di caricamento della pagina
  • Compatibilità con tutti i principali browser
  • Le funzioni ecommerce essenziali di cui si ha bisogno (si possono colmare le lacune con Elementor e WooCommerce)
  • Un design che si adatta al proprio brand
  • Un’interfaccia pulita
  • Voti elevati e supporto/documentazione di alta qualità per i clienti

Potete consultare i nostri temi WooCommerce preferiti per vedere se ce n’è qualcuno adatto al vostro brand. Dovreste però verificare se questi temi supportano effettivamente Elementor.

Oppure, potreste scegliere i temi WooCommerce più veloci in assoluto, puntando sulla velocità prima di ogni altra cosa. La buona notizia è che la maggior parte dei temi funziona sia con WooCommerce che con Elementor.

Abbiamo un elenco dei migliori temi per Elementor; alcuni di questi sono eccellenti per WooCommerce, ma non tutti sono adatti ai negozi online.

Durante gli anni passati a studiare i temi per WooCommerce, abbiamo individuato i migliori temi WooCommerce Elementor:

1. Astra

Homepage di Astra.
Astra

Astra offre una perfetta integrazione con WooCommerce e, insieme a Elementor, funziona come tema multiuso per la creazione di qualsiasi tipo di sito web, compresi i negozi di ecommerce.

Ha una base leggera e veloce, potenti opzioni di personalizzazione e alcune delle funzioni più facili da usare per modificare font, header e footer.

2. Hello Elementor (con il costruttore WooCommerce Elementor)

Homepage del tema Hello.
Tema Hello

Hello Elementor è il tema ufficiale di Elementor. Il tema presenta un design elegante e semplice senza fronzoli, consentendo di costruire qualsiasi tipo di sito.

Vi consigliamo di combinarlo con Elementor WooCommerce Builder per realizzare siti web WooCommerce puliti e moderni, tra i più veloci in circolazione.

3. OceanWP

Pagina Home e di registrazione di OceanWP.
OceanWP

Come tema WordPress multiuso, OceanWP ha un’integrazione WooCommerce e un supporto diretto per il costruttore di pagine Elementor.

Riceverete un’assistenza clienti di alta qualità, aggiornamenti regolari e un’ampia documentazione per questo tema WordPress leggero e veloce.

È altamente personalizzabile per migliorare l’aspetto del vostro brand di ecommerce, con impostazioni rapide per modificare tutto, dai colori ai font, dai layout agli header.

4. Shopkeeper

Homepage di Shopkeeper.
Shopkeeper

Shopkeeper non è un tema multiuso, ma si rivolge direttamente ai proprietari di negozi di ecommerce. Gran parte dell’infrastruttura del sito ecommerce che ci aspettiamo è già costruita e pronta per essere utilizzata.

Ci sono modelli precostituiti per categorie specifiche di ecommerce e una profonda integrazione con WooCommerce. Anche Elementor funziona bene con il tema, permettendo di regolare i layout, modificare il carrello e personalizzare praticamente ogni aspetto del negozio online.

5. Zakra

Homepage di Zakra.
Zakra

Il tema Zakra offre demo di avvio per accelerare il processo di creazione del negozio. Si integra con Elementor e WooCommerce e offre demo di nicchia che puoi implementare con un solo clic.

È considerato uno dei temi multiuso più veloci sul mercato e potete controllare gli schemi di colore, i font e le variazioni di layout.

6. Storefront

Homepage del tema Storefront.
Storefront

Forse uno dei temi ecommerce gratuiti più versatili tra cui scegliere, Storefront include un’ampia gamma di funzioni per il negozio online.

Il tema è stato sviluppato dagli stessi addetti di WooCommerce, quindi sappiamo che è stato pensato per funzionare senza problemi con il plugin per l’ecommerce. Funziona bene anche con Elementor e offre una semplicità che non si trova in altri temi ecommerce.

7. ShopIsle Pro

Homepage di ShopIsle.
ShopIsle Pro

Il tema ShopIsle Pro è una soluzione premium con una tipografia avanzata, demo ecommerce precostituite e una profonda integrazione con Elementor e WooCommerce.

In combinazione con Elementor WooCommerce Builder, potete creare un design elegante per qualsiasi negozio online, personalizzare font e header e lanciare un negozio online in pochi minuti. Non solo, ma riceverete anche un’eccellente assistenza clienti e la documentazione del tema.

8. Neve

Homepage di Neve.
Neve

Il tema Neve offre feature multifunzionali con un’interfaccia veloce e leggera. Usandolo con Elementor, è possibile costruire un sito web per qualsiasi settore, in particolare per il mondo dell’ecommerce.

Il tema aiuta ad aggiungere una visualizzazione rapida dei prodotti, oltre ad avvisi sul carrello e filtri off-canvas per il negozio. Ci piace anche per adattare il layout del carrello di WooCommerce o per creare un carrello sticky.

Il tema Neve viene fornito con una miriade di siti di partenza creati appositamente per i negozi di ecommerce.

9. Customify

La homepage Customify.
Customify

L’idea alla base del tema Customify è quella di creare praticamente qualsiasi tipo di sito web, blog o negozio online, grazie alle profonde opzioni di personalizzazione per stili, font e aree widget.

Per quanto riguarda il negozio online, l’integrazione di WooCommerce Elementor permette di mostrare facilmente i prodotti e di modificare l’intera esperienza di pagamento senza alcuna conoscenza di codifica.

10. GeneratePress

Pagina home e di registrazione di GeneratePress.
GeneratePress

Il tema WordPress GeneratePress è una soluzione multifunzionale con supporto WooCommerce ed Elementor. Il suo principale vantaggio rispetto ad altri temi è la sua leggerezza, ma anche il suo design modulare.

Pertanto, potrete attivare e disattivare i moduli in base alle vostre esigenze e utilizzare il live customizer per avere il massimo controllo sui requisiti di design del brand.

11. Phlox

Homepage di Phlox.
Phlox

Il tema Phlox per WordPress è un altro tema multifunzionale che presenta una valida esperienza di costruzione di siti per gli sviluppatori di WooCommerce ed Elementor.

Tutte le demo con un solo clic si inseriscono direttamente nel design e offrono un aspetto moderno senza bisogno di molto lavoro da parte vostra. Potete anche personalizzare la maggior parte degli aspetti di un negozio online, dal carrello alla visualizzazione dei prodotti su un dispositivo mobile.

Vi invitiamo a esplorare questi temi e a provarli con WooCommerce ed Elementor. Al momento di prendere una decisione, potreste desiderare un controllo totale, quindi un tema multifunzionale potrebbe fare al caso vostro.

Altri utenti, invece, vogliono che il loro tema abbia l’aspetto e il comportamento di un sito di ecommerce fin dall’inizio. In questo caso, optate per un tema come Storefront o ShopIsle Pro per un’esperienza più orientata all’ecommerce.

Potete anche cercare i componenti aggiuntivi di WooCommerce per Elementor per ampliare il numero di widget e funzioni di Elementor. Date un’occhiata qui di seguito.

I 5 migliori addon WooCommerce per Elementor

Ci sono diversi plugin WooCommerce essenziali da aggiungere al vostro negozio fin dall’inizio. Tuttavia, vi raccomandiamo di esaminare anche componenti aggiuntivi e plugin più specifici che non solo si integrano con WooCommerce ma ampliano anche le funzionalità di Elementor.

Ecco i nostri componenti aggiuntivi preferiti per WooCommerce Elementor:

1. HappyAddons

Homepage e pagina di registrazione di HappyAddons.
HappyAddons

Il plugin HappyAddons è una raccolta di widget e componenti aggiuntivi realizzati appositamente per Elementor. Alcuni esempi di widget di HappyAddons includono un mega menu, una navigazione a una pagina, un carrello WooCommerce e un kit per i post del blog.

Alcuni widget specifici per WooCommerce sono caroselli di prodotti, griglie, checkout e mini-carrelli. Ci sono anche widget per migliorare altri aspetti del negozio online, come i post del blog, i grafici, il marketing e i social media.

2. PowerPack for Elementor

Pagina home e di registrazione di PowerPack.
PowerPack for Elementor

PowerPack for Elementor offre una vasta gamma di widget unici per i siti WooCommerce che utilizzano Elementor. Con oltre 70 widget Elementor, è possibile incorporare breadcrumb, testimonianze, pulsanti e molto altro.

C’è una libreria di modelli per aggiungere immediatamente design e widget speciali per WooCommerce come la pagina Il mio account, lo styler della pagina di checkout e il pulsante Aggiungi al carrello.

3. WooLentor

Pagina home e di registrazione di WooLentor.
WooLentor

WooLentor è un addon per il page builder di Elementor che migliora il costruttore di pagine di WooCommerce e offre funzioni per la personalizzazione delle e-mail.

Il componente aggiuntivo include un gestore di campi per il checkout e opzioni per accettare pagamenti parziali dai clienti. C’è anche un’opzione che permette di suggerire ai clienti i prezzi o di fare un’offerta speciale per un giorno.

4. Essential Addons per Elementor

Homepage di Essential Addons.
Essential Addons

La soluzione Essential Addons ha una versione gratuita e una premium. Questo componente aggiuntivo migliora l’esperienza di costruzione delle pagine in Elementor con widget per tabelle di prezzi, griglie di prodotti, call to action e altro ancora.

Alcuni degli elementi premium includono una Google Map avanzata, un feed Instagram e disegni in parallasse.

5. JetWooBuilder

Pagina di download JetWooBuilder.
JetWooBuilder

JetWooBuilder è un addon per WooCommerce Elementor di Crocoblock, un altro addon per Elementor che vale la pena di esaminare. L’opzione JetWooBuilder offre la possibilità di combinare elementi come modelli personalizzati, layout switcher e pagine specifiche per il negozio.

È possibile configurare facilmente tipi di carosello e schede di categoria e creare pagine di prodotti singoli da un modello elegante.

Forse l’aspetto più importante è che l’addon JetWooBuilder offre un controllo assoluto sulla pagina del negozio, aiutando a configurare filtri intelligenti avanzati.

Quando considerare Elementor Pro vs Elementor?

Vi starete chiedendo: “qual è la differenza tra Elementor e Elementor Pro?”

Fortunatamente, la versione gratuita di Elementor è piuttosto potente e include la maggior parte delle funzioni che servono per costruire un sito web o un negozio online con funzionalità drag-and-drop. Detto questo, gli strumenti di WooCommerce migliorano drasticamente quando si passa a Elementor Pro.

Per prima cosa, diamo un’occhiata alla differenza di prezzo tra Elementor e Elementor Pro:

  • Elementor: Gratuito
  • Elementor Pro: A partire da 59 dollari all’anno. Altri piani a $99, $199 e $399 all’anno

Gli aggiornamenti servono generalmente per supportare altri siti web con lo stesso abbonamento Elementor, non per ottenere maggiori funzionalità.

Tuttavia, il passaggio da Elementor a Elementor Pro offre nuove funzionalità.

Elementor (gratuito) offre:

  • Personalizzazione di base del theme builder
  • Modelli e blocchi limitati
  • Esportazione e importazione di modelli
  • Modifica per dispositivi mobili
  • 40+ elementi di design come testimonianze, pulsanti, caselle di icone, editor di testo e altro ancora

Ecco cosa si ottiene con Elementor Pro (che non è incluso in Elementor Basic):

  • Personalizzazione di ogni parte del tema
  • Progettazione e integrazione di moduli
  • Tutti i blocchi e i modelli professionali
  • Tutti i widget professionali
  • Un costruttore di popup
  • Effetti di scorrimento
  • Costruttore di header e footer
  • Circa 30+ altri widget ed elementi di design come le citazioni in blocco, la paginazione del blog, il conto alla rovescia e il layout masonry
  • Elementi di design specifici per WooCommerce come Categorie WC, Prodotti WC e Aggiungi al carrello WC

Quando passare da Elementor a Elementor Pro?

La risposta è semplice. Passate a Elementor Pro:

  • Se desiderate la maggior parte delle funzionalità del WooCommerce Builder, come la modifica e i modelli per la sezione Aggiungi al carrello, le categorie e i prodotti
  • Se volete avere un controllo completo sulla personalizzazione del negozio online
  • Se volete iniziare a utilizzare elementi aggiuntivi come l’effetto Ken Burns, il widget per il login o il flipbox

Gli utenti di WooCommerce dovrebbero passare alla versione Pro di Elementor per avere un’esperienza migliore.

Riepilogo

In questo articolo abbiamo evidenziato quali sono le caratteristiche che rendono WooCommerce ed Elementor speciali e vi abbiamo mostrato come si migliorano a vicenda quando vengono combinati. Abbiamo anche illustrato un tutorial passo dopo passo su come creare un negozio di ecommerce con l’integrazione di WooCommerce con Elementor.

Quando costruite il vostro shop, ricordate di dare un’occhiata alla nostra lista dei migliori addon e temi Elementor. In questo modo, avrete un vantaggio rispetto a chi progetta il proprio negozio da zero.

Tenete presente che è fondamentale scegliere una soluzione di hosting veloce e sicura come Kinsta per qualsiasi operazione di ecommerce. Kinsta offre anche l’hosting di Elementor, che è alimentato dalle macchine C2 di Google Cloud per offrire le migliori prestazioni possibili.

Cos’altro vorreste sapere su WooCommerce ed Elementor? Fatecelo sapere nella sezione commenti qui sotto.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).