Come creare un fantastico negozio online con WooCommerce, Divi e SiteGround (2023)

Più di 74 milioni di siti dipendono dalla piattaforma WordPress per ospitare i loro blog, vendere i loro prodotti o semplicemente scrivere le loro riflessioni quotidiane per il mondo. Quando inizi a costruire il tuo sito di e-commerce hai sicuramente molte scelte da fare e WordPress si lega a questo.

Quale di standout piattaforme di e-commerce sceglierai? Stai pensando di prendere un tema per vendere i tuoi prodotti o c'è qualcuno che puoi pagare per costruire il sito da zero? Diamine, cosa pensi di vendere attraverso il tuo sito di e-commerce?

Nota del redattore: questo post è stato originariamente pubblicato il 15 gennaio 2015 ed è stato completamente rinnovato e aggiornato per accuratezza e completezza.

Ci sono da milioni a milioni di temi WordPress tra cui scegliere quando cerchi la struttura di frontend e backend per iniziare a vendere online. Quasi lo stesso con l'hosting (ma preferiamo SiteGround or Bluehost).

I temi migliori includono strumenti di gestione e-commerce facili e veloci in modo che tu possa caricare i prodotti e gestire cose come sconti, premi, pulsanti e pagine dei prodotti. Il tuo tema è anche la prima cosa che le persone vedranno quando visitano il tuo sito. Li guida attraverso il processo e porta davvero la differenza tra qualcuno che è soddisfatto dell'esperienza o meno.

In breve, i temi di WordPress sono fondamentali e il Divi Tema WordPress da temi eleganti è un'opzione piuttosto carina da considerare. Può essere utilizzato per un sito Web aziendale standard, ma include anche integrazioni per la vendita di e-commerce e processi di vendita rapidi. Impariamo come creare un negozio online con l'estensione Divi Tema WordPress.

Prendi il tuo dominio e l'hosting prima

💡Il primo passo in qualsiasi processo di creazione di siti Web è l'acquisizione di un account di hosting, il nome di dominio e l'installazione di WordPress sul sito. Divi non è diverso. Ci sono molti modi per ottenere hosting e nomi di dominio, ma personalmente penso SiteGround è una delle opzioni più sicure e affidabili. (Per maggiori dettagli consulta il nostro esauriente SiteGround recensioni).

Quello che è veramente bello è questo SiteGround offre un servizio specializzato gestito WooCommerce di hosting pacchetto di servizi con praticamente tutto il necessario per iniziare a vendere online. All'interno del pacchetto, puoi accontentarti di entrambi StartUp Pianifica per principianti, Piano GrowBig per aziende in crescita, o GoGeek per stabilito WooCommerce I negozi.

Ognuno di questi offre funzionalità avanzate per ottimizzare il tuo WooCommerce sito a un prezzo ragionevole.

Detto questo, un altro servizio di hosting che consigliamo vivamente Divi WooCommerce negozi è BlueHost. Sebbene le funzionalità qui non corrispondano a SiteGroundEcco, ottieni ancora WooCommerce-hosting focalizzato attraverso il suo pacchetto di e-commerce WordPress. I piani possono comodamente gestire un file Divi WooCommerce store, ma purtroppo non otterrai servizi gestiti.

👉 Ora, per motivi di chiarezza, procediamo con SiteGround...

Come si inizia?

Vai SiteGround Gestito WooCommerce Hosting pagina, selezionare un piano ideale e fare clic Ottieni piano.

Secondo me, il GoGeek Plan sembra l'opzione più adatta poiché supporta illimitato WooCommerce siti web con funzionalità di e-commerce avanzate. Oltre a una maggiore potenza del server, ottieni supporto prioritario, gestione temporanea di WordPress, backup su richiesta e risorse di super chacher, oltre a trasferimenti gratuiti di siti e CDN Cloudflare, tra le altre solide funzionalità.

👉 E per quanto riguarda le quote di risorse, questo piano prevede:

• Cassetta postale 6GB
• 1 GB Archiviazione database
• Archiviazione SSD
• Trasferimento dati illimitato
• 30GB spazio di archiviazione
• Fino a 100,000 visite mensili

Tieni presente che questo servizio inizia a $ 11.95 al meseed è molto simile a come installeresti un normale sito WordPress su un account di hosting BlueHost.

Ma ricorda, questo è un prezzo speciale per i principianti. Aspettatevi che aumenti a $ 34.95 nei futuri rinnovi, il che è ancora un costo ragionevole se considerate tutte le funzionalità che otterrete nel lungo periodo.

Ora, dopo aver selezionato il tuo piano preferito, SiteGround ti indirizzerà alla pagina di registrazione del dominio. Se possiedi già un dominio, scegli la seconda opzione e inserisci i suoi dettagli. Altrimenti, procedi con la registrazione di un nuovo nome di dominio a $ 15.95 all'anno.

Il prossimo è la fase finale, in cui scegli le tue opzioni di hosting preferite, oltre a inserire le informazioni di pagamento e i dettagli personali, prima di creare l'account.

Bene, ovviamente, queste sono cose di base che hai gestito molte volte prima. Quindi, non dovresti avere difficoltà a inserire il tuo numero di telefono, paese, nome, email, password dell'account, ecc.

La parte di pagamento richiede l'inserimento dei dettagli della carta di credito. Puoi procedere con entrambi Scopri, MasterCard or Visa.

Tuttavia, e piuttosto interessante, SiteGround non elenca PayPal, nonostante la sua crescente popolarità tra i WooCommerce commercianti. Ma, per fortuna, si scopre che possono accettare pagamenti PayPal, anche se indirettamente.

Se questa è la tua modalità preferita, quindi, lascia i campi vuoti e contatta SiteGroundgli agenti di vendita di tramite lo strumento di chat dal vivo. Ti aiuteranno a completare il processo tramite PayPal.

L'ultima sezione contiene diverse opzioni per il tuo servizio di hosting, inclusa la posizione del tuo data center preferita, oltre al periodo di abbonamento.

Ora, per ridurre al minimo la distanza di trasferimento dei dati tra i file Sitegroundi server di e il tuo WooCommerce visitatori del sito, scegli la posizione del data center più vicina alla tua area di mercato di destinazione.

Quindi scegli eventuali servizi aggiuntivi aggiuntivi che desideri includere nel tuo pacchetto e voilà! Questo è tutto ciò che serve per creare un file Siteground conto.

Una volta terminato, accedi al tuo account e vai direttamente alla tua area cPanel. Troverai un programma di installazione automatica di WordPress predefinito. Quindi, selezionalo, inserisci i dettagli di accesso a WordPress e premi il pulsante di installazione.

Bene, noterai che il processo di installazione di WordPress richiede alcuni secondi poiché è tutto automatizzato. E dopo che tutto è stato impostato, SiteGround ti darà il nome di dominio corretto a cui accedere se desideri modificare le cose sul backend del tuo sito.

Crea il tuo negozio online con Divi

Cosa è Divi?

Ok, se non l'hai provato, scommetto che ne hai già sentito parlare. Divi non è ordinario WooCommerce tema. È, infatti, uno dei temi WordPress più popolari su Elegant Themes. E, cosa interessante, Divi is Tema eleganteprodotto di punta.

Allora, cosa c'è di così speciale in questo tema? E c'è qualcosa di eccezionale in merito Divi'S WooCommerce?

Bene, a differenza dei tipici temi di WordPress, Divi è più un pacchetto completo. Ciò significa che combina caratteristiche del tema standard con funzionalità extra utili per Divi WooCommerce I negozi.

Non fraintendermi però. Sebbene Divi'S WooCommerce il supporto è l'obiettivo principale qui, il tema è capace di molto di più. In sostanza, Divi può essere perfettamente integrato con qualsiasi tipo di sito, grazie alla sua vasta gamma di layout di siti web. Non solo ecommerce.

Quindi per finire, Divi viene fornito con il suo intuitivo generatore di pagine WordPress plugin. Puoi usarlo per personalizzare liberamente il tuo Divi WooCommerce memorizzare senza alcuna codifica.

Infatti, Divi è stato sviluppato per i principianti. Quindi, puoi aspettarti di trovare un pannello di controllo pulito con quasi nessuna curva di apprendimento. Ci vogliono solo pochi minuti per capire il tutto Divi ecosistema, configuralo e personalizzalo Divi'S WooCommerce layout.

👉 Alla fine, quindi, sarai in grado di capitalizzare Divi'S:

• Matrice di layout personalizzabili per qualsiasi tipo di sito Web WordPress, inclusi WooCommerce negozi online.
• Page Builder facile da usare, che fornisce una serie di elementi del sito Web e funzionalità di progettazione.
• Processo di personalizzazione flessibile senza alcuna forma di codifica. Anche i principianti possono configurare e modificare comodamente in modo completamente funzionale Divi WooCommerce I negozi.
• Semplice integrazione con WordPress. Divi è uno dei pochi temi WordPress esterni che possono essere installati perfettamente senza modifiche complesse.
• Ottimizzato per l'e-commerce WooCommerce modelli.

Divi Trascina e rilascia Page Builder

Come abbiamo detto Divi è disponibile in due diversi gusti. Quando paghi l'abbonamento su Temi eleganti, troverai lo standard Divi Tema sul cruscotto, accompagnato dal Divi Page Builder di WordPress plugin.

Ma vale la pena notare che questo costruttore non è esclusivamente legato al Divi Tema. Viene come un ulteriore plugin ad ogni singolo tema acquisito da Elegant Themes.

Detto questo, il Divi WordPress Page Builder è un editor drag-and-drop con capacità di personalizzazione avanzate. Ti consente di spostare e definire elementi, colonne, righe e moduli senza alcuna esperienza di codifica. In altre parole, è il tipo di builder a Divi WooCommerce il principiante spera di ottenere.

Ma non fare errori. sebbene il Divi Page Builder si rivolge ai principianti, è un editor che facilita anche gli sviluppatori esperti. Possono combinare sistematicamente le sue caratteristiche visive con i controlli CSS per spingere il loro Divi WooCommerce siti web al livello successivo.

Vieni a pensarci, tuttavia, non hai bisogno di uno sviluppatore per progettare tutti gli elementi nel tuo Divi WooCommerce Tornare al suo account. Puoi fare affidamento solo sulle funzionalità visive.

E sai una cosa?

Divi tenta persino di rendere l'intero processo molto più semplice etichettando e codificando i colori nei suoi moduli di layout.

E a proposito di ciò, un'altra disposizione notevole qui è DiviLa semplificazione complessiva del processo di personalizzazione del layout. Se vuoi introdurre una nuova sezione, ad esempio, dovrebbe bastare un solo clic. Quindi duplicare, rimuovere e inserire moduli per il tuo file Divi WooCommerce store richiederà solo pochi clic del pulsante.

Nel frattempo, DiviLa finestra di modifica mostrerà le modifiche al layout del tuo sito in tempo reale. Sarai in grado di monitorare visivamente ogni singola regolazione e vedere come influisce sul design generale della tua Divi WooCommerce memorizzare.

Predefinito Divi WooCommerce Layout del sito Web

Per salvarti dal processo dolorosamente impegnativo di creare un sito web da zero, il Divi Il tema WordPress viene fornito con una serie di modelli di sito predefiniti. E poiché potresti aver bisogno di diverse opzioni di layout dello stesso modello, Divi offre i design dei suoi siti web come pacchetti completi. Di conseguenza, si ottengono diversi layout e colori dei modelli.

Beh, per essere più precisi, Divi fornisce circa 7-8 diversi layout predefiniti su ogni singolo pacchetto di siti web. Considerando che ognuno è completamente costruito, puoi facilmente adottare i layout senza rielaborare ampiamente la loro struttura sottostante. Hai solo un paio di modifiche qua e là.

Ora per trovarti uno perfetto per il tuo WooCommerce negozio online, è sufficiente scorrere le varie categorie del sito sul file Divi Tema. In alternativa, utilizza le parole chiave per cercare in tutte le opzioni contemporaneamente.

Bene, tutto sommato, non ci vuole molto per identificare un adatto Divi layout del negozio online. Hai solo bisogno di integrarlo con WooCommercee sarai sulla buona strada per creare un attraente sito di e-commerce WordPress.

Andando avanti, una cosa particolarmente eccezionale che noterai è quella Divi non si concentra solo sull'aspetto. Il WooCommerce layout forniti con Divi I temi sono stati costruiti pensando anche alla funzionalità.

Quindi, oltre alle tipiche pagine del negozio come checkout, prodotti e carrello, Divi include moduli di e-commerce per impostazione predefinita. Più specificamente, ottieni sezioni come prodotti in vetrina, articoli in saldo e molto altro.

Is Divi Adatto a WooCommerce?

Tutte le cose considerate, Divi è sempre più popolare perché è fondamentalmente una soluzione per temi WordPress all-in-one.

Combinato, il Divi Page Builder e Divi Tema l'offerta fornisce praticamente tutto ciò di cui hai bisogno per configurare qualsiasi tipo di sito WordPress. E questo include un completamente funzionale WooCommerce negozio con tutte le funzionalità di e-commerce principali.

👉 In poche parole, Divi è un'opzione che vale la pena considerare per il tuo WooCommerce sito perché:

• Puoi personalizzare il tuo WooCommerce sito web tramite un editor visuale drag-and-drop.
• Divi ti consente di salvare le tue modifiche come elementi globali in tutti i layout.
• Viene fornito con oltre 20 layout di siti Web predefiniti ben progettati.
• È possibile esportare facilmente i layout e, successivamente, sfruttarli su altri siti Web.
• Puoi progettare il tuo WooCommerce memorizzare con più colonne, righe ed elementi di contenuto.
• Tutto WooCommerce i layout sono stati ottimizzati per i dispositivi mobili.
• Proprio come MS Word, la modifica del contenuto del testo è semplice come fare clic e digitare.
• L'intero processo di personalizzazione del sito viene monitorato in tempo reale, fornendo di conseguenza un'anteprima in tempo reale di tutte le modifiche di progettazione.
• WooCommerce i layout vengono forniti con le pagine e i moduli del negozio online principale.

Passaggio 1: registrati con temi eleganti a cui accedere Divi

Inizia andando al Elegante pagina di prodotti tematici per l' Divi Tema WordPress. Questa pagina offre l'opzione per una demo del tema e un pulsante di download rapido. Elegant Themes vende i suoi temi utilizzando una struttura di pagamento annuale o una tantum, utile per gli sviluppatori con più siti client o per le persone che gestiscono numerosi siti di e-commerce. Non puoi davvero acquistare un solo tema, ma il file Piano Personal per $ 67 all'anno è simile a quello che potresti pagare per un tema normale e puoi interrompere i pagamenti annuali se non vuoi più il supporto. Sentiti libero di giocare con il tema prima di impegnarti per il pagamento.

Passo 2: installazione Divi sul tuo sito WordPress

Dopo esserti registrato, fai clic sul pulsante di download per il tema. Questo mette il tema come un file zip sul tuo computer. Vai alla scheda Aspetto sul back-end del tuo sito WordPress e fai clic sull'opzione Temi.

Passaggio 3: fare clic sul pulsante Aggiungi nuovo

Fai clic sul pulsante Carica tema. Trova e carica il file zip del tema. Passare attraverso il processo per attivare completamente il tema e quindi si dovrebbe essere in grado di vedere il tema sul frontend del tuo sito.

Passaggio 4: configura il tuo WooCommerce Negozio

Se vai al Divi Pagina di documentazione del tema troverai praticamente tutti gli strumenti e le funzionalità con cui puoi lavorare sul tema, ma ci concentreremo principalmente sulla creazione di un sito di e-commerce. Lo strumento Divi tema è pienamente compatibile con WooCommerce in modo da poter visualizzare tutti i tuoi prodotti da quello.

Ciò che è fantastico è che l'iniziale SiteGround registrazione già installata WooCommerce sul tuo sito Web WordPress, quindi non devi preoccuparti di installarlo o configurarlo. Dovrebbe essere già disponibile nella tua dashboard.

Passaggio 5: aggiungi i tuoi primi prodotti a WooCommerce

Tecnicamente hai già il sito di e-commerce tutto configurato, ma vogliamo effettivamente aggiungere alcuni prodotti per farlo sembrare un sito di e-commerce sul frontend. Vai alla dashboard di WordPress, fai clic sulla scheda Prodotti sotto WooCommerce e fare clic sulla voce Aggiungi prodotto.

Passo 6

Questo fa apparire una nuova pagina di prodotto da compilare. Sembra molto simile a qualsiasi editor di pagine di WordPress, tranne che puoi aggiungere un nome di prodotto, una descrizione e un'immagine in primo piano in modo che le persone possano vedere come appare il prodotto sul tuo sito web.

Passaggio 7: esplora il file WooCommerce Caratteristiche

Se scorri verso il basso sotto l'area della descrizione troverai tutto ciò che puoi WooCommerce caratteristica con cui giocare. Sentiti libero di modificare cose come numeri SKU, inventario, prezzi, spedizione e attributi. Le funzionalità sono troppo vaste per me per descriverle tutte qui, ma puoi andare al WooCommerce pagina di documentazione per capire tutto ciò che puoi impostare sul tuo sito di e-commerce.

Passaggio 8: creare la home page

Il punto centrale di questo è quello di crea una homepage o una pagina normale che presenta tutti i tuoi prodotti quando le persone si presentano al tuo sito. Pertanto, dovresti andare su Pagine> Aggiungi nuovo sul lato sinistro della dashboard di WordPress.

Passaggio 9: aggiungi un titolo per il tuo Divi Pagina

Crea un titolo per la tua pagina. Fai clic sul pulsante Usa il generatore di pagine nella parte superiore e tocca l'area Inserisci moduli per includere un'intestazione a larghezza intera. Non devi scegliere un'intestazione a larghezza intera, ma stiamo andando a questo tutorial.

Passo 10

Fare clic sul pulsante Intestazione larghezza completa.

Passo 11

Inserisci i dettagli per il titolo del sito, il testo della sottotitolo e il colore del testo. È anche possibile modificare l'etichetta amministrativa, che è principalmente per il proprio riferimento. Premi il pulsante Salva quando completato.

Passo 12

Toccare le tre barre a sinistra del modulo di intestazione Full Width per modificare altre impostazioni.

Passo 13

Qui puoi dare all'intestazione un bel colore di sfondo e persino includere un video per la tua azienda.

Passo 14

Ora che l'intestazione è completa, possiamo includere il modulo e-commerce facendo clic sull'area Inserisci colonne.

Passo 15

Scegli quante colonne vuoi, quindi fai clic sull'opzione Inserisci moduli che appare. Seleziona il pulsante Negozio in basso.

Passo 16

Sentiti libero di modificare il modo in cui desideri visualizzare i tuoi prodotti. Quindi potresti voler mostrare i tuoi prodotti recenti, insieme agli articoli 12 sulla pagina, alcune colonne e come vuoi che vengano ordinati. Fai clic sul pulsante Salva.

Passaggio 17: Anteprima e pubblicazione

Una volta completato, puoi premere il pulsante Anteprima o Pubblica per visualizzare le modifiche sul frontend. Come puoi vedere, i prodotti si presentano bene e puoi sempre tornare indietro per modificare i tuoi prodotti o le impostazioni del negozio sul backend di WordPress. Congratulazioni!

In caso di domande sulla configurazione di Divi Tema di WordPress, fatecelo sapere nella sezione commenti qui sotto.

Conclusione

E questo è tutto ciò che serve per ottenere il tuo Divi WooCommerce negozio online attivo e funzionante utilizzando un SiteGround account di hosting.

Andando avanti, puoi stare tranquillo SiteGround gestirà tutte le cose tecniche critiche come gli aggiornamenti di WordPress e WooCommerce sicurezza. Questa è la differenza fondamentale tra gestito WooCommerce hosting e soluzioni di hosting condiviso regolari. Quindi, ti dà il tempo e lo spazio tanto necessari per concentrarti sul tuo WooCommerce gestione del negozio.

E come abbiamo già visto, dovrebbe essere un gioco da ragazzi con Divi tema. Puoi sempre accedere al tuo Divi WooCommerce layout dal tuo backend WordPress per personalizzarlo ulteriormente. Se lo desideri, puoi anche cambiare l'intero design passando a un layout diverso che possa gestire un WooCommerce negozio pure. La scelta è tua.

In caso di domande sulla configurazione di Divi Tema WordPress, faccelo sapere nella sezione commenti qui sotto.