Come creare un sito WooCommerce basato su Elementor

Non basta che la stessa piattaforma WordPress sia il Content Management System (CMS) più popolare al mondo. Abbiamo anche il page builder e le piattaforme di e-commerce più popolari in Elementor e WooCommerce. Pertanto, ha senso utilizzare tutti e tre per creare un negozio online dall'aspetto stellare e performante.

Se lo analizziamo, WordPress è l'ideale per organizzare i tuoi post, pagine e prodotti. WooCommerce offre una stretta integrazione con la piattaforma grazie ai suoi sviluppatori (Automatic). Inoltre, Elementor offre la creazione di pagine drag-and-drop potente e intuitiva. È una soluzione completa senza codice per costruire il tuo negozio.

In questo pezzo, vedremo come costruire un negozio utilizzando Elementor e WooCommerce. Durante tutto, esamineremo come entrambi si incastrano per offrirti la massima flessibilità per il tuo sito.

Perché WordPress, Elementor e WooCommerce funzionano bene insieme

Vale la pena dare un'occhiata più da vicino a come WordPress, Elementor e WooCommerce possono combinarsi per aiutarti a creare negozi online top di gamma.

Per cominciare, WordPress è il CMS più utilizzato sul mercato. Naturalmente, questo non è abbastanza per garantire una posizione così dominante tra gli utenti. In effetti, abbiamo dato un'occhiata a questo in un post precedente, quindi ti invitiamo a leggere ulteriormente quel post. In breve, è una piattaforma sicura, stabile e scalabile su cui puoi costruire.

A proposito, hai anche WooCommerce. Poiché Automattic sviluppa il plug-in, ha un'ottima integrazione con il core di WordPress, ma non è tutto.

È anche la piattaforma di eCommerce più popolare. All'interno dell'ecosistema WordPress, ha una quota di circa il 20%, che si traduce in circa l'8% di tutti i siti web. In confronto, Shopify ha una quota di mercato di circa il cinque o sei percento. Ancora una volta, i dati sull'utilizzo non sono tutto.

WooCommerce prende il processo di creazione di un negozio online e semplifica il processo. Puoi essere operativo in pochi minuti e avere una piattaforma di e-commerce solida, potente ed estensibile pronta per l'uso.

Per unirli insieme, hai Elementor. Ha anche una grande quota di mercato nel suo campo e un'enorme base di utenti.

È un generatore di pagine drag-and-drop con un approccio unico per aiutarti a costruire l'intero sito Web da zero. Questa è una soluzione allettante da usare, perché ci sono molte potenti funzionalità e funzionalità che altri strumenti non hanno. Il più rilevante qui è il WooCommerce Builder dedicato.

In breve, Elementor è un plug-in con molti pollici di colonna sul blog WPKube e dovresti esaminare i nostri archivi per vedere cosa può fare.

Di cosa ha bisogno un sito WooCommerce da un Page Builder

Il risultato implicito dell'ultima sezione è che Elementor può fornire la giusta combinazione di funzionalità e funzionalità di cui WooCommerce ha bisogno per portare il tuo sito al livello successivo. Tuttavia, è importante chiarire perché questo è e cosa offre.

In senso generale, un sito WooCommerce ha bisogno di quanto segue da un generatore di pagine:

• Stretta integrazione, in modo che non ci siano conflitti tra il generatore di pagine e WooCommerce.
• Molte opzioni di personalizzazione per aiutare a far risaltare i tuoi prodotti e le pagine del negozio.
• Un modo per modificare i singoli elementi che compongono una tipica pagina di prodotto.
• Funzionalità extra per far salire di livello il tuo negozio.

Dovresti (ovviamente) prendere nota anche delle tue esigenze individuali. Ad esempio, potresti scoprire che moduli e popup sono importanti per il tuo negozio e per la tua strategia di vendita. La buona notizia è che Elementor è più che in grado di soddisfare le tue esigenze.

Ad esempio, ha un ottimo Popup Builder che funziona a meraviglia per vendite, offerte a tempo limitato, coupon e molto altro:

Puoi crearli come faresti con altri modelli di pagina e applicarli in un lampo. Inoltre, puoi personalizzarli in quasi tutti i modi che preferisci. È perfetto se hai una campagna specifica da promuovere sul tuo sito.

Come scegliere un tema WooCommerce adatto

Non entreremo nei dettagli qui, poiché lo tratteremo nel nostro tutorial e arrotoleremo anche alcuni temi in un articolo dedicato.

La considerazione principale di cui hai bisogno in questo caso è un tema compatibile con Elementor e WooCommerce. Anche una rapida occhiata ai siti di mercato premium ti mostrerà che molti temi lo pubblicizzano, quindi le tue scelte sono di ampia portata.

Anche così, ci sono alcuni temi straordinari che possiamo menzionare:

• Vetrina. Probabilmente avrà la minore compatibilità con Elementor in futuro, poiché Block Editor è una tecnologia nativa. Ancora,
• Ciao. Questo è il tema di partenza vuoto di Elementor ed è l'ideale per sviluppare un sito WooCommerce da zero. Naturalmente, se hai meno tempo a disposizione, potrebbe essere saggio scegliere un altro tema più completo.
• GeneraPress. Questo è un tema importante con un'infrastruttura flessibile. Ciò significa che indipendentemente dal fatto che utilizzi Block Editor, Elementor o qualcos'altro, il tuo negozio sarà fantastico.

Ti invitiamo a trovare il tema giusto prima di approfondire la creazione del tuo sito. Ricorda, i migliori risultati saranno con qualcosa di compatibile con Elementor e WooCommerce.

Come creare un sito WooCommerce basato su Elementor in 3 passaggi

Nel resto di questo articolo, ti mostreremo come utilizzare Elementor e WooCommerce insieme per creare un sito di e-commerce. Ci sono tre passaggi da notare:

• Installa e configura WooCommerce.
• Crea le tue linee di prodotti WooCommerce e usa Elementor per creare le pagine dei prodotti.
• Progetta una pagina Shop dedicata, sempre utilizzando Elementor.

Tuttavia, per questo tutorial daremo per scontato che Elementor Pro sia già installato e attivato. È qualcosa che ti guidiamo nel nostro articolo sulla creazione di un imbuto WordPress. Quel post ti aiuterà in caso di problemi.

1. Installa WooCommerce e configuralo

Ci sono due aspetti da considerare quando configuri un'installazione di WooCommerce: il plugin stesso e le impostazioni del tuo negozio. In effetti, l'installazione del plug-in richiede lo stesso processo di qualsiasi altro plug-in di WordPress.

Per quanto riguarda la configurazione stessa di WooCommerce, mentre puoi essere pronto per iniziare in un paio di minuti, vale la pena dedicare un po' più di tempo per eseguire l'installazione guidata.

Quando si arriva a questo punto della configurazione, ti abbiamo coperto. In effetti, abbiamo un post tutorial completo di WooCommerce che spiega passo dopo passo come iniziare con WooCommerce e creare il tuo primo prodotto. È un buon post da aprire in una scheda di riserva mentre esegui questa. Le informazioni all'interno saranno preziose per la prossima serie di passaggi.

2. Crea i tuoi prodotti WooCommerce

Una volta che hai un'installazione WooCommerce attiva e funzionante, dovresti esaminare la creazione di prodotti sul back-end. Ancora una volta, il nostro tutorial su WooCommerce spiega come farlo in dettaglio, ma ecco le note di Cliff:

• Vai alla scheda Prodotti > Aggiungi nuovo all'interno di WordPress.
• Inserisci il nome del tuo prodotto e una breve descrizione.
• Usa le meta box di WooCommerce per popolare i dati del tuo prodotto, come il prezzo.
• Aggiungi un'immagine.
• Pubblica il tuo prodotto.

Tuttavia, è qui che Elementor mostra la sua prima mossa di potere: WooCommerce Builder. Questo è un modo per utilizzare il generatore di pagine per creare il design delle pagine dei tuoi prodotti.

Per iniziare, fai clic su Modelli > Aggiungi nuovo in WordPress:

Da qui, seleziona Prodotto singolo dal menu a discesa Tipo di modello e inserisci un nome facoltativo:

Si aprirà la Libreria modelli per mostrare ogni blocco predefinito all'interno di:

Quando vedi un design che ti piace, fai clic sul pulsante Inserisci ed Elementor importerà il blocco:

Questo è un modo rapido per creare una pagina di prodotto dedicata. Puoi prendere questo ottimo inizio e aggiungerne anche altri. Elementor include una serie di widget dedicati per aiutarti a creare pagine specifiche per WooCommerce:

Una volta che hai un layout di pagina che ti piace, fai clic sul pulsante verde Pubblica nella parte inferiore dello schermo:

Verrà visualizzato un popup per aiutarti a impostare una condizione specifica per la visualizzazione del modello:

Quando sei pronto, fai clic su Salva e chiudi . Da qui, puoi aggiungere più prodotti al tuo negozio, lavorare su più modelli o iniziare a lavorare su una pagina Negozio dedicata.

3. Progetta la tua pagina del negozio dedicata utilizzando Elementor e WooCommerce

Una pratica User Experience (UX) di WooCommerce è il modo in cui genera la maggior parte delle pagine necessarie per il tuo negozio. La pagina del Negozio di primo livello è la più importante, in quanto questa è la tenda da sole che decora la porta.

Se utilizzi WordPress e WooCommerce con un tema specifico per WooCommerce come Storefront, il tuo principale punto di riferimento per la personalizzazione della pagina del negozio è tramite il Customizer. Tuttavia, il nostro obiettivo è Elementor. Il modo per farlo con il generatore di pagine è utilizzare una pagina Archivio prodotti .

Ciò ti consente di personalizzare il modo in cui i prodotti vengono visualizzati sul tuo sito, ma non gestisce il resto della tua pagina. In alcuni casi potrebbe essere difficile gestire due set di personalizzazioni e impostazioni, ma nella nostra esperienza finora non è stato un problema.

Come per i singoli prodotti, dovrai andare su Modelli > Aggiungi nuovo all'interno di WordPress, quindi scegliere Archivio prodotti dal menu a discesa:

Anche in questo caso, puoi scegliere un Blocco, modificare una pagina da zero o combinare entrambi per creare qualcosa di unico. Inoltre, come prima, puoi utilizzare uno qualsiasi dei widget specifici di WooCommerce per aiutarti a progettare una pagina a tuo piacimento.

Dopo aver fatto nuovamente clic sul pulsante Pubblica e essere arrivato alla finestra di dialogo Impostazioni di pubblicazione, puoi invocare la magia. Nella sua forma base, puoi includere il nuovo modello nella Pagina Negozio :

Tuttavia, non è tutto. Puoi aggiungere ulteriori condizioni di inclusione per utilizzare il modello in diversi punti del tuo sito. Questo è ottimo per la continuità e offre ai visitatori un motivo per visitare il tuo negozio.

Una breve nota sulle altre pagine generate di WooCommerce

Prima di concludere, vogliamo menzionare le altre pagine WooCommerce generate. La cattiva notizia è che non cadono sotto lo sguardo di Elementor. In altre parole, non puoi modificare pagine come le pagine Checkout o Thanks senza un'estensione WooCommerce aggiuntiva.

Questo è deludente, ma comprensibile. Anche così, puoi comunque utilizzare Elementor per sviluppare gli elementi circostanti, quindi rilasciare la funzionalità specifica della pagina con gli shortcode. Tuttavia, non è l'ideale.

Se la modifica completa di queste pagine è importante per te, ti consigliamo di esaminare l'editor del campo di pagamento ($ 49 all'anno) e l'estensione delle pagine di ringraziamento personalizzate (anch'essa $ 49 all'anno).

In conclusione

Cosa potrebbe andare storto quando si utilizzano tre degli strumenti più popolari per pubblicare un negozio di e-commerce? In questo caso non c'è molto. WordPress, Elementor e WooCommerce offrono tutti un'esperienza stellare. La loro combinazione può darti il ​​massimo nella creazione e nella gestione di un negozio online.

In questo post, abbiamo esaminato come utilizzare Elementor e WooCommerce insieme per costruire un negozio. Dopo aver installato e attivato entrambi i plug-in, il tuo primo compito è creare prodotti insieme alle pagine associate. Da lì, hai bisogno di una pagina Shop dedicata, qualcosa che Elementor è in grado di gestire. Inoltre, la funzionalità extra del plug-in per la creazione di pagine (come il generatore di pop-up e altro), può aiutare a portare il tuo negozio nella stratosfera.

Vuoi creare una combinazione Elementor e WooCommerce per il tuo prossimo negozio e, in tal caso, questo articolo ti aiuterà? Fatecelo sapere nella sezione commenti qui sotto!