La creazione di un e-commerce utilizzando WooCommerce ed Elementor offre un’opportunità straordinaria per personalizzare ogni dettaglio del tuo shop online.
Il potente strumento di progettazione di Elementor WooCommerce Builder ti permette di personalizzare al massimo ogni aspetto.
Dalla configurazione delle pagine di categoria, alla visualizzazione del carrello, fino alla creazione della pagina dell’account utente: sarà un gioco da ragazzi.
Per te che sei alla ricerca di un secondo lavoro online da casa o di una nuova fonte di reddito, questa guida sarà molto interessante.
Ti spiegherò in maniera semplice come sfruttare la combo Elementor+WooCommerce per avere un e-commerce accessibile e facile da navigare.
Grazie a Elementor WooCommerce puoi creare un design unico e attraente per il sito web.
Sfruttando poi la versione Elementor PRO WooCommerce Builder avrai la possibiligà di realizzare anche layout più avanzati e personalizzati al 100%.
Entrare in questo mondo significa scoprire un potente strumento capace di trasformare radicalmente il tuo business online.
I vantaggi di costruire un ecommerce con Elementor + WooCommerce
Prima di proseguire, ti invito a leggere la guida a Elementor e WordPress, così da avere le basi e da capire in che modo si può creare un sito user friendly e personalizzato.
Quando si parla di e-commerce, infatti, questi due aspetti sono estremamente importanti.
Se sei qui, saprai che Elementor è ad oggi uno dei più potenti page builder sul mercato.
Questo strumento ti permette di creare contenuti web in modo intuitivo, soprattutto grazie all’editor di tipo drag and drop molto semplice da utilizzare.
Elementor è lo strumento più afatto per realizzare popup, menu di navigazione, header e altro ancora.
Per poter sfruttare l’integrazione Elementor WooCommerce è necessario acquistare la versione PRO del page builder, che è ancora più potente.
Elementor PRO offre la possibilità di creare e gestire tutte le pagine e le schede prodotto che sono i capisaldi per un e-commerce.
Non solo. L’alto grado di personalizzazione permetterà di avere a disposizione una soluzione completa per ogni tua esigenza.
Dal canto suo, WooCommerce è senza dubbio il plugin più avanzato e competitivo per la creazione di e-commerce su WordPress.
Trattandosi di un plugin open-source, il suo codice è pienamente accessibile e questo permette la continua implementazione di nuove funzionalità, di componenti aggiuntive e così via.
Chi vuole creare un e-commerce personalizzato e semplice da utilizzare può sfruttare questa possibilità.
Oggi più che mai l’e-commerce vive un periodo di grazia e crearlo in maniera così semplice e veloce è di certo un vantaggio di non poco conto.
Volendo fare una breve carrellata dei vantaggi di WooCommerce possiamo dire che quest’ultimo dà la possibilità di creare vetrine virtuali con grafica accattivante, grazie a dei temi adatti all’immagine di ogni brand,
Inoltre, permette di personalizzare la pagina dello shop online con immagini e opzioni di vario tipo come, ad esempio, l’integrazione del checkout in tutte le pagine.
WooCommerce ti dà anche la possibilità di stabilire come ordinare le tipologie di prodotti, come gestire il carrello, gli ordini e i dati del cliente.
Facilita i pagamenti, i calcoli delle spese di spedizione e le eventuali imposte, i processi di rimborso e reso e molto altro ancora.
Si tratta di un plugin estremamente completo, che quando viene integrato a Elementor diventa ancora più intuitivo.
Potrai vendere i tuoi prodotti anche se non conosci la scrittura dei codici e se hai poche esperienze con la grafica.
Vedi anche l’approfondimento sulle migliori piattaforme ecommerce.
Come creare un negozio online con Elementor e WooCommerce
Quando si pensa alla creazione di un e-commerce c’è chi inizia a pensare a codici da scrivere, pagine da creare, prodotti da inserire. Insomma, per alcuni potrebbe trattarsi di un vero e proprio incubo.
Con WooCommerce il problema è risolto alla radice. Scopriamo insieme come creare un negozio online con Elementor e WooCommerce.
In linea di massima, il procedimento da seguire è il seguente:
- Installazione di WordPress: installa WordPress sul tuo hosting, poiché questa è la piattaforma su cui costruirai il tuo sito web.
- Installazione di WooCommerce: il secondo step è quello di installare il plugin WooCommerce. Puoi farlo cercando nei plugin WordPress, tramite la funzione Aggiungi Nuovo, WooCommerce. Clicca su ‘Installa Ora’ e attiva il plugin.
- Installazione di Elementor: dovrai fare un processo simile per installare Elementor. Vai su ‘Plugins > Aggiungi Nuovo’, cerca “Elementor”, e installa e attiva il plugin.
- Selezione del tema: scegli un tema compatibile con Elementor e WooCommerce. Puoi scegliere tra molti temi gratuiti o a pagamento. Installa e attiva il tuo tema preferito.
- Configurazione di WooCommerce: segui le istruzioni di configurazione iniziale di WooCommerce e imposta quelle che sono le tue preferenze di negozio, spedizione, pagamento e tasse.
- Creazione delle pagine del negozio: WooCommerce crea automaticamente le pagine fondamentali del negozio come Carrello, Checkout e Negozio. Puoi personalizzarle utilizzando Elementor.
- Aggiunta dei prodotti: per aggiungere i prodotti vai su WordPress e nella dashboard cerca ‘Prodotti > Aggiungi Nuovo’ per iniziare ad aggiungere prodotti. Completa tutti i dettagli richiesti, come nome del prodotto, descrizione, prezzo, immagine del prodotto, ecc.
- Personalizzazione del negozio con Elementor: Ora che hai i tuoi prodotti, è il momento di utilizzare Elementor per personalizzare il tuo negozio. Puoi modificare l’aspetto delle tue pagine di prodotto, la pagina del negozio, aggiungere nuovi elementi con i widget di Elementor, ecc. Se hai accesso a Elementor PRO, hai anche accesso al WooCommerce Builder che ti permette di personalizzare ogni minimo dettaglio.
- Configurazione delle impostazioni del negozio: Ritorna alle impostazioni di WooCommerce per configurare ulteriori dettagli, come le opzioni di spedizione, le impostazioni di pagamento, le imposte, ecc.
Dopo aver completato tutto potrai lanciare il tuo shop online, assicurandoti di testare tutte le funzionalità.
Le categorie
Entrando nel dettaglio, vediamo come creare le categorie con Elementor+WooCommerce.
La prima cosa da dire è che si tratta di un processo abbastanza semplice che può aiutare a organizzare meglio il tuo negozio online.
Le categorie sono fondamentali per un e-commerce e questo per svariati motivi. Innanzitutto, permettono di organizzare i prodotti in modo logico, rendendo più facile per i clienti trovare ciò che cercano.
Se un cliente è interessato a un particolare tipo di prodotto, può cliccare sulla categoria corrispondente per vedere tutti i prodotti correlati.
Questo migliora l’esperienza dell’utente, che sarà motivato a ricercare tutto ciò che desidera spinto dalla facilità di navigazione.
Le categorie, inoltre, aiutano anche l’ottimizzazione del sito. Utilizzando delle parole chiave pertinenti nei tuoi titoli di categoria e nelle descrizioni, aiuterai i motori di ricerca a definire al meglio il contenuto del tuo sito web e a posizionarlo più in alto nelle SERP.
Un altro vantaggio delle categorie è che possono essere utilizzate per promuovere l’upselling e il cross-selling.
Un valido esempio è quello in cui si mostrano prodotti correlati nella stessa categoria per spingere i clienti a considerare più articoli e aumentare il valore medio del carrello.
Ma entriamo nel dettaglio e cerchiamo di capire come sfuttare Elementor e WooCommerce per creare le categorie di un e-commerce.
Nella tua dashboard WordPress devi trovare la dicitura Prodotti > Categorie. Da qui, puoi creare nuove categorie di prodotti inserendo il nome della categoria, lo slug (la versione URL-friendly del nome) e se lo desideri una descrizione e una immagine di categoria.
Assegna i prodotti alle categorie. Un’azione molto semplice da fare, grazie alla sezione ‘Categorie di prodotti‘ sulla destra della pagina di modifica del prodotto.
L’ultimo step è quello di visualizzare le categorie con Elementor PRO. In questo caso c’è un widget, chiamato ‘Archive Products’, che mostra i prodotti anche in base alle categorie di prodotti.
Per utilizzare il widget non dovrai fare altro che aprire la pagina in cui vuoi visualizzare le categorie di prodotti con l’editor di Elementor.
Trascina il widget ‘Archive Products’ nel tuo layout. Nella sezione ‘Query’ delle impostazioni del widget, imposta ‘Source’ su ‘Product Category’ e scegli le categorie di prodotti che desideri visualizzare. Il gioco è fatto.
Ricorda anche che con Elementor puoi controllare ogni dettaglio dell’aspetto delle tue categorie di prodotti. Puoi personalizzare il layout, le immagini, i colori, i tipi di carattere e così via.
Le pagine prodotto
Passiamo, poi, alla personalizzazione delle pagine prodotto. Anche questo è uno step fondamentale per un e-commerce.
L’utente si soffermerà senza dubbio a leggere quello che c’è scritto in una singola pagina prodotto, soprattutto per capirne le caratteristiche, i modi d’uso, i vantaggi e così via.
Utilizzando Elementor e i suoi template sarà possibile progettare modelli personalizzati per la visualizzazione dei singoli prodotti.
Questi modelli possono includere immagini, descrizioni, specifiche tecniche, prezzo, quantità disponibili. Non sottovalutare l’importanza delle informazioni sulla spedizione.
Tutti questi dettagli possono essere aggiunti tramite i widget Elementor. Per iniziare la creazione di un nuovo modello, dall’interfaccia di WordPress seleziona ‘Templates > Aggiungi Nuovo’.
Dopo aver assegnato un nome al tuo modello, dovrai selezionare ‘Prodotto Singolo’ come tipo di modello.
A questo punto, hai la possibilità di scegliere se utilizzare un template preesistente, caricare un modello acquistato o costruire un design completamente nuovo e personalizzato in base alle tue esigenze.
Entra nell’editor di Elementor e qui troverai nella colonna di sinistra tutti i widget necessari per personalizzare la tua pagina del prodotto.
Le pagine shop
Ora ti dirò come creare le pagine shop con Elementor+Woocommerce.
Dopo aver creato i primi prodotti che andrai a vendere, lo step successivo sarà quello di creare la pagina shop.
Attenzione, qui ti sto parlando del vero fulcro del tuo e-commerce dato che è proprio qui che i clienti potranno visualizzare i tuoi prodotti e procedere all’acquisto.
Se utilizzi il plugin WooCommerce avrai visto che durante l’installazione si generano in modo automativo alcune pagine, che sono esse stesse elementi essenziali per il tuo e-commerce.
Le pagine create di default da WooCommerce sono checkout, shop, pagina account. Questa è la base su cui costruire il tuo negozio virtuale.
Nello specifico, la pagina Shop contiene l’intera gamma di prodotti che vendi e può essere personalizzata in maniera molto facile, grazie a Elementor.
In questo modo potrai adattarla perfettamente al tuo brand, migliorando l’esperienza di acquisto dei tuoi clienti.
Il consiglio è quello di decidere sin da subito se impostare la pagina shop come homepage del sito o meno. Si tratta di una scelta che dovresti fare in maniera attenta e oculata, ma è comunque una decisione libera.
Il primo passaggio è quello di creare un template di riferimento che potresti rinominare Product Archive, così da avere un chiaro rimando ai prodotti.
Come per la pagina Prodotto, hai la possibilità di scegliere varie opzioni per il tuo template.
Se preferisci, puoi utilizzare un template predefinito e sviluppato dal team Elementor oppure caricare un template acquistato o, ancora, dare libero sfogo alla tua creatività, costruendo il template da zero.
Una volta definito questo aspetto, passa all’ideazione del layout della pagina e l’inserimento dei contenuti. Potrai farlo sfruttando tutti i widget Elementor che trovi nel pannello laterale sinistro. Tra questi:
- Titolo archivio
- Descrizione archivio
- Prodotti
- Categorie prodotti
- WooCommerce Breadcrumbs
- Pagine di WooCommerce
- Categorie di prodotti
- Personalizzazione “Aggiungi al carrello”
- Carrello del menu
Ricorda che il tuo obiettivo è quello di rendere accattivante la pagina Shop così da dare risalto ai prodotti.
Carrello e checkout
Con Elementor+WooCommerce potrai anche modificare le pagine Carrello e Checkout.
Si tratta di due tra le pagine più importanti in assoluto per il tuo business. Nella pagina Carrello il cliente può visualizzare ciò che ha scelto di acquistare, nella pagina checkout può finalizzare il pagamento e procedere all’ordine.
Per gestire le pagine Checkout e Carrello puoi decidere di creare un template specifico da assegnare a ciascuna delle pagine.
In questo template devi includere il widget WooCommerce Pages, e nelle opzioni devi selezionare la pagina di riferimento, sia essa Checkout o Carrello.
Il secondo approccio è più veloce. Apri le le pagine Checkout e Carrello nell’editor di Elementor, apri widget Shortcode e inserisci rispettivamente i seguenti shortcode: [{woocommerce_checkout}] per la Pagina Checkout e [{woocommerce_cart}] per la Pagina Carrello senza parentesi graffe.
Configura in WooCommerce queste pagine rispettivamente come Checkout e Carrello.
Vedi anche la guida a CartFlows.
L’account page
La creazione della pagina dell’account, conosciuta anche come Account Page, è un passo essenziale quando si configura un negozio online con WooCommerce e Elementor.
Questa pagina offre ai tuoi clienti uno spazio personale in cui gestire le loro informazioni, tracciare lo stato degli ordini, gestire indirizzi di spedizione e fatturazione e molto altro.
Quando crei un e-commerce non puoi non tenere in considerazione questa pagina, che è fondamentale.
Il primo step lo farai andando seguendo questo percorso Elementor > Modelli > Aggiungi Nuovo.
Seleziona “Pagina” come tipo di modello e rinominalo Account Page. A questo punto, Elementor ti dà la possibilità di scegliere tra una serie di layout predefiniti o di partire da zero.
Puoi personalizzare il design dell’Account Page utilizzando i widget disponibili. Anche in questo caso deve essere aperto il WooCommerce Pagese, che deve essere impostato per visualizzare la pagina dell’account.
A questo punto puoi personalizzare l’aspetto della pagina in base al tuo brand. Elementor offre molte opzioni di stile, tra cui colori, tipi di carattere, dimensioni, spaziatura, e altro ancora.
Home e resto del sito
Personalizzare un e-commerce con Elementor+WooCommerce è senza dubbio un’esperienza affascinante.
Con un po’ di tempo e dedizione a disposizione i risultati possono essere molto gratificanti.
Ti ho mostrato come personalizzare tutte le pagine più importanti per un shop online, ma come creare e personalizzare una Homepage con Elementor+WooCommerce?
Inizia con la creazione entrando nel pannello di controllo WordPress. Seleziona l’opzione per aggiungere una nuova pagina e avvia l’editor di Elementor.
Ricorda sempre che Elementor ti offre l’opportunità di utilizzare uno dei modelli predefiniti o, se preferisci, puoi partire da zero e costruire la tua pagina completamente personalizzata.
Hai a tua disposizione una serie di widget utili, che possono essere facilmente trascinati e rilasciati sulla pagina.
Troverai particolarmente utili widget come Products, Product Categories, Add to Cart e WooCommerce Pages. Ogni widget ha le sue opzioni di personalizzazione che permettono di modificare vari attributi per adattarsi al meglio al tuo stile.
Naturalmente, oltre alla homepage dovrai personalizzare anche le altre pagine del tuo sito come indicato in precedenza.
Ricorda, ad esempio, di personalizzare la pagina Contatti per mostrare ai tuoi clienti gli strumenti a loro disposizione per mettersi in contatto con il brand.
Personalizzare questa pagina ti permette non solo di offrire un modulo di contatto e una mappa di localizzazione, ma anche di riprendere la grafica del tuo brand.
Se il tuo sito include un blog o altre pagine informative, cerca di mantenere un design coerente su tutto il sito.
Vedi anche la guida alle landing page con Elementor.
Elementor, WooCommerce e la SEO
Elementor e WooCommerce sono strumenti incredibilmente potenti, che ti possono aiutare a costruire e gestire un e-commerce efficace e bello dal punto di vista grafico.
A volte, però, questo non è sufficiente. Infatti, non importa quanto sia ben progettato e funzionale il tuo sito, se non viene trovato dai motori di ricerca, non raggiungerà il successo desiderato.
Qui entra in gioco l’ottimizzazione dei motori di ricerca, o SEO. Si tratta di una serie di pratiche che puntano a migliorare la visibilità del tuo sito web sui motori di ricerca.
Ricorda che ottenere un buon posizionamento SEO può portare più traffico al tuo sito e, di conseguenza, potenzialmente più vendite.
Elementor e WooCommerce possono svolgere un ruolo significativo da questo punto di vista.
Elementor, infatti, è stato costruito tenendo in considerazione la SEO. Per questo offre una struttura di codice pulita e ottimizzata, che facilita l’indicizzazione da parte dei motori di ricerca.
Inoltre, puoi avere il controllo completo sul contenuto della tua pagina e ciò ti permette di inserire facilmente parole chiave rilevanti e meta tag, che sono elementi imprescindibili per la SEO.
Devo sottolineare anche la funzionalità per creare una mappa del sito XML, che aiuta i motori di ricerca a comprendere la struttura del tuo sito e supporta lo schema markup.
Tutto questo, come puoi immaginare, può aiutare a migliorare i risultati dei motori di ricerca.
Per quanto riguarda WooCommerce, la sua integrazione con WordPress, una piattaforma amica della SEO, lo rende uno strumento prezioso per la tua strategia di ottimizzazione e posizionamento.
WooCommerce ti permette di aggiungere facilmente meta descrizioni, titoli e parole chiave ai tuoi prodotti, così da migliorare la loro visibilità nei risultati dei motori di ricerca.
Un altro aspetto importante della SEO è la velocità del sito. Siti più veloci sono favoriti dai motori di ricerca e offrono una migliore esperienza utente, il che può portare a tassi di conversione più elevati.
Elementor e WooCommerce, se usati correttamente, possono contribuire a mantenere il tuo sito veloce e reattivo.
