Come creare un sito Web di e-commerce utilizzando WordPress ed Elementor 2020

In questo tutorial, ti insegno come creare un sito Web di e-commerce utilizzando WordPress ed Elementor 2020 che puoi personalizzare completamente.

WordPress è la piattaforma CMS più utilizzata per la creazione di tutti i tipi di siti Web, inclusi i siti di eCommerce. Inoltre, imparerai a utilizzare il generatore di pagine Elementor per creare pagine Web straordinarie, che in questo momento è il generatore di pagine n. 1 e più popolare per WordPress. WordPress controlla più di 1/3 di Internet. La maggior parte delle grandi società di e-commerce come Sony, Bata, eBay e molte altre lo utilizzano per lo sviluppo e la manutenzione del proprio sito Web e la parte migliore dell'utilizzo di WordPress è che non è necessario imparare alcun tipo di linguaggio di programmazione o altro gergo tecnico per realizzare il tuo sito web. È una semplice piattaforma di trascinamento della selezione che offre molti modelli e layout integrati che aiutano a creare un sito Web attraente e intuitivo. Inoltre, fornirò modelli predefiniti che puoi facilmente importare e rendere operativo il tuo sito di e-commerce in pochi minuti.

L'esecuzione dell'intero tutorial ti renderà pronto per rendere operativo il tuo sito Web senza alcun aiuto esterno. Questo tutorial ha aiutato molte persone a creare il proprio sito Web e ha permesso alle loro attività di ottenere un vantaggio sulla concorrenza in questo brutale settore dell'e-commerce. Quindi segui questo tutorial facile e autoesplicativo e acquisisci un'abilità che ti aiuterà per tutta la tua vita. L'intero processo è stato insegnato passo dopo passo e tutte le informazioni grafiche e le rappresentazioni pittoriche sono fornite per renderlo il più facile possibile da capire.

Quindi iniziamo a creare un sito Web di eCommerce utilizzando WordPress ed Elementor 2020

Introduzione a un sito di e-commerce

L'immagine sopra è un esempio di home page o pagina di destinazione di un tipico sito di e-commerce. Le pagine di destinazione sono molto cruciali per le conversioni e le vendite sul sito di e-commerce. Quindi la landing page dovrebbe essere accattivante contenendo banner e notifiche di saldi e prezzi ridotti o di nuovi arrivi soprattutto per i siti di e-commerce. Per ottenere la conversione, devi enfatizzare i tuoi prodotti più vendibili sulla pagina di destinazione e fornire un facile collegamento a tali prodotti. Puoi visualizzare le categorie di prodotti sulla pagina di destinazione e fornire un collegamento ad esse.

In alto, abbiamo un'intestazione che contiene la nostra posizione, numero di telefono, i nostri numeri di contatto a sinistra ea destra, abbiamo le nostre icone delle pagine dei social media di Facebook, Twitter, YouTube, ecc. Sotto, abbiamo un negozio pulsante che rimanda alla pagina di acquisto dei prodotti del nostro sito web. Inoltre, abbiamo un pulsante Account, facendo clic su cui gli utenti possono accedere alla propria dashboard personale per accedere e gestire le proprie informazioni e acquisti. Abbiamo anche il logo della nostra attività sull'intestazione stessa. Nel mezzo, abbiamo il nostro collegamento alle nostre pagine vale a dire. Home, Chi siamo, Acquista, Il mio account e Contattaci.

Dopo di che hai tutti i tuoi prodotti e banner, che impareranno come creare in questo tutorial, mostrati in un modo molto attraente . Successivamente, abbiamo anche una sezione Newsletter, in cui gli utenti possono iscriversi al tuo sito Web e non notifiche e e-mail su prodotti, offerte, coupon, ecc. Di seguito abbiamo il nostro piè di pagina, che fornisce informazioni su di noi e un pulsante di iscrizione e-mail.

Come puoi vedere nell'immagine, la pagina del negozio elenca tutti i prodotti disponibili sul nostro sito Web, dove gli utenti possono controllare qualsiasi prodotto facendo clic su di essi. Nella barra laterale abbiamo un filtro Prezzo, elenco di categorie, recensioni e annunci video dei nostri prodotti. Sotto ogni prodotto, c'è anche un modulo di recensione e prodotti correlati. Successivamente abbiamo la pagina Chi siamo che mostra la descrizione della tua attività e le informazioni sul tuo team. E poi abbiamo una pagina Contatti in cui gli utenti possono contattarci utilizzando un modulo di contatto. Successivamente abbiamo una dashboard Il mio account che avrà una dashboard personale per ogni cliente che contiene le informazioni personali, di acquisto e di pagamento.

Puoi vedere la pagina del carrello dopo aver acquistato qualcosa come puoi vedere nell'immagine, dove puoi modificare i dettagli dell'acquisto, controllare l'importo totale e procedere al pagamento. Quindi i visitatori possono effettuare il check-out compilando i dettagli di spedizione e pagando l'acquisto. Impareremo a creare tutte queste pagine passo dopo passo in questo tutorial in modo che il tuo sito Web sia completamente pronto per iniziare l'attività.

Ottieni hosting e installa WordPress ed Elementor

• Acquisto del dominio NameHero

La prima cosa che dovremo fare per creare un sito web è ottenere un nome di dominio e un hosting per il tuo sito web. Devi selezionare un buon hosting poiché l'intero sito Web sarà basato e supportato sul tuo sito di hosting, quindi devi controllare e confrontare vari hosting sulla base di criteri come affidabilità, supporto tecnico, spazio, titoli, design, opportunità SEO ecc.

Esistono diversi provider di hosting sul mercato e la maggior parte di essi offre offerte diverse. Ne ho provati molti e alla fine ho optato per NameHero per tutti i miei siti web. Lo uso personalmente e lo ho confrontato con altri 22 hosting e li ho trovati i migliori. Come puoi vedere nell'immagine, hanno 4 diverse opzioni e consiglio l'opzione Plus Cloud per un sito di e-commerce. Puoi usare il mio link per ottenere uno sconto. www.namehero.com/darrelwilson

Dopo aver ordinato il tuo piano, potrai scegliere il tuo nome di dominio, ovvero il nome del tuo sito web. Puoi scegliere il nome che desideri. Puoi selezionare il tuo dominio in base alle tue esigenze per apprezzare .net, .biz ecc. Il passaggio successivo e finale è compilare le informazioni sull'account e sui dettagli di pagamento. Si consiglia vivamente di ottenere la protezione ID nella casella di controllo del componente aggiuntivo in quanto ti protegge dagli spammer. Completa l'acquisto facendo clic sulle pagine successive e passando alla procedura di pagamento.

• Installa WordPress

Per installare WordPress sul tuo hosting, vai alla tua 'Area Clienti' sulla tua pagina di hosting, clicca su 'Cloud Web Hosting'. Successivamente hai I miei prodotti e servizi, dove vedrai il pacchetto Plus Cloud con il tuo nome di dominio, fai clic sul pulsante Attivo accanto ad esso come puoi vedere nell'immagine. Successivamente a sinistra, vedrai il pulsante "Vai a cpanel" e fai clic su di esso. Nella pagina successiva, come puoi vedere nell'immagine, scorri verso il basso fino alla categoria software e fai clic su 'WordPress Manager di Softaculous'.

Si aprirà un programma di installazione di WordPress, fai clic sul pulsante Installa ora. Si aprirà una pagina di configurazione contenente la versione, il nome del tuo dominio e la directory come puoi vedere nell'immagine. SI PREGA DI RIMUOVERE QUALSIASI COSA SCRITTA NELLA RUBRICA. ANCHE SUL PROTOCOLLO SCEGLI 'https:/'. Nelle impostazioni del sito, puoi modificare il nome e la descrizione del tuo sito. Possiamo farlo anche più tardi. Inserisci i tuoi dettagli di amministratore come nome utente, password ed e-mail, che saranno i tuoi dettagli di accesso a WordPress. Nella pagina successiva, scorri verso il basso i modelli poiché non li stiamo utilizzando e fai clic su "Installa". Fai clic sul collegamento dell'URL di amministrazione fornito nella pagina successiva e il tuo nuovo WordPress è realizzato e live su Internet. Ora sei sulla dashboard di WordPress come nell'immagine in cui puoi modificare il tuo sito web.

• Impostazioni generali di WordPress

Prima di progettare il tuo sito web, impariamo a modificare le tue impostazioni sulla dashboard di WordPress. Sulla dashboard di WordPress, vedrai diverse schede a sinistra della pagina, come puoi vedere nell'immagine. Una delle più importanti è la scheda "Impostazioni" dove troverai le impostazioni generali di WordPress. Dovresti cambiare il tuo permalink da "Giorno e nome" a "Nome post" per rendere più facile la comprensione dell'indirizzo del tuo sito web. Questo è anche molto importante per il tuo SEO. Un'altra scheda nella dashboard di WordPress è "Utenti" in cui personalizzi il tuo profilo e l'aspetto della dashboard di WordPress. Fare clic su "Salva modifiche" per aggiornarlo.

Per accedere nuovamente a WordPress dopo esserti disconnesso, devi digitare il tuo URL nella barra degli indirizzi seguito da '/wp-admin' che ti porterà alla pagina di accesso di WordPress dove puoi inserire il tuo nome utente e password per accedere.

Creazione di pagine e Menu

Hai creato un sito web funzionale ora, non è ancora completo. Ora devi aggiungere pagine al tuo sito web. Nella dashboard di WordPress, fai clic sulla scheda "Pagine" e seleziona l'opzione "Aggiungi nuovo". Puoi farlo anche facendo clic sul pulsante "Aggiungi nuovo" nella parte superiore della pagina. Quando lo fai, la dashboard aprirà un editor di pagine, come mostrato nell'immagine qui sotto, dove puoi creare la tua nuova pagina. Qui puoi inserire il nome della pagina e progettare il layout della pagina. Fai clic sul pulsante "Pubblica" e la tua pagina web è creata. Qui in questo tutorial creeremo pagine di base come Home, Chi siamo e Contatti che sono richieste da ogni singolo sito web. Per ora non entriamo nei contenuti delle pagine che faremo in seguito. Puoi visualizzare queste pagine facendo clic su Visualizza sotto il nome della pagina nella dashboard di WordPress.

Dopo aver creato pagine separate, è necessario creare un menu per poter navigare tra queste pagine. Creare un menu è molto semplice utilizzando WordPress. Basta accedere alla dashboard, trovare la scheda "Aspetto" e fare clic su "Menu". Si aprirà un editor di menu, in cui puoi creare e nominare i tuoi menu come puoi vedere nell'immagine qui sotto. Una volta creato un menu, puoi assegnare diverse pagine del tuo sito Web al menu. Puoi sempre riassegnare la cronologia delle voci di menu e puoi creare un menu a discesa mettendo una voce sotto l'altra trascinandola.

Ora quello che dovresti fare è fare clic su "Personalizza" in alto a sinistra come mostrato nell'immagine e andare su "Impostazioni home page" e cambiare la tua home page in "Una pagina statica" e scegliere la tua home page come pagina statica, che devi selezionare dall'elenco a discesa. Fai in modo che ogni volta che qualcuno visita il tuo sito web, ci sia sempre indirizzato alla tua home page. Accedere direttamente a un'altra pagina come la tua pagina Chi siamo, la pagina dei contatti o i tuoi ultimi post non avrà senso per gli spettatori.

Scarica Elementor

Ora dobbiamo acquistare il nostro generatore di pagine Elementor pro che utilizzeremo per creare le pagine Web del nostro sito Web di e-commerce. Puoi acquistarlo utilizzando il mio link.www.darrelwilson.com/elementor.Dalla loro pagina, puoi controllare i vari pacchetti disponibili. Non possiamo utilizzare la versione gratuita poiché abbiamo bisogno del generatore di temi e dei servizi di creazione di Woocommerce. Una volta acquistato il pacchetto, si apre al tuo account come mostrato nell'immagine da dove devi fare clic su "Scarica plug-in" e verrà scaricato un file zip.

Quindi devi caricarlo sul tuo sito Web WordPress. Vai alla tua dashboard sul tuo WordPress, fai clic su "Plugin" sulla barra degli strumenti a sinistra, fai clic su "Aggiungi nuovo" e il tuo plug-in di aggiunta si aprirà come mostrato nell'immagine. Fai clic su "Carica plug-in" e seleziona il tuo file zip Elementor e installalo. Fai clic su "Attiva plug-in" e un nuovo pulsante "Elementor" verrà creato sulla barra degli strumenti di WordPress. Vai lì e fai clic su "Connetti e attiva".

Installa temi WordPress

Ora installiamo un tema WordPress sul nostro sito Web. WordPress offre tonnellate di temi pre-progettati tra cui scegliere, per l'aspetto del tuo sito web. Nella scheda "Aspetto" della dashboard di WordPress, troverai il pulsante "Tema" da cui puoi installare un tema. Puoi selezionare qualsiasi tema dalle scelte disponibili. Ai fini di questo tutorial, utilizzeremo il tema Astra che puoi trovare nel menu popolare. Fai clic su "Attiva" sotto il nome del tema. "La parte migliore dell'utilizzo di questo tema è che include tutte le impostazioni e le funzionalità di base necessarie per l'esecuzione di un sito Web ed è molto compatibile con il generatore di pagine Elementor.

Modifica le pagine con Elementor

Ora impariamo come modificare le nostre pagine con Elementor. Vai alla home page del tuo sito Web WordPress e fai clic su "Modifica pagina" nella riga nera in alto che aprirà l'editor di pagina. Per prima cosa cambiamo le impostazioni della pagina sul lato destro come mostrato nell'immagine. Modifica il layout del contenuto in "Allunga larghezza totale" e seleziona "Disabilita titolo" poiché desideriamo quell'impostazione per la nostra home page.

Ora fai clic su "Modifica con Elementor" per aprire l'editor di Elementor come mostrato nell'immagine. Facciamo un breve tutorial dell'editor di Elementor qui. Per aggiungere una nuova sezione alla pagina, fai clic sul pulsante Più e seleziona il modello di colonna desiderato. Per aggiungere gli elementi, fai clic sui 9 punti sulla barra degli strumenti sul lato sinistro che ti darà un elenco di elementi come nell'immagine. Puoi trascinare e rilasciare uno qualsiasi di questi elementi che desideri sulla pagina e modificarli.

Dopo aver fatto clic su qualsiasi modulo della pagina, la relativa barra degli strumenti di modifica verrà visualizzata sulla sinistra. Qui nell'immagine, stiamo modificando l'intestazione, quindi è apparso "Modifica intestazione" che contiene 3 schede. Il 1 ^° è Contenuto che offre varie opzioni per il contenuto dell'elemento. 2 ^° è Stile dove puoi progettare lo stile come colore, dimensione, carattere ecc. dell'elemento. E il 3 ^° è Avanzato dove puoi inserire animazioni e altre cose. Allo stesso modo, puoi aggiungere, modificare e dare uno stile a una casella di testo allo stesso modo sotto l'intestazione.

Puoi aggiungere un pulsante e fornire un collegamento a qualsiasi altro sito Web che si aprirà facendo clic su di esso. Puoi modificare l'impostazione in "Apri una nuova finestra", in modo che gli utenti non lascino il nostro sito. Puoi anche selezionare un'icona per il tuo pulsante dalla Galleria delle icone. Tutto questo sarà nella barra degli strumenti "Pulsante Modifica" sulla sinistra come mostrato nell'immagine.

Ora invece di progettare ogni elemento separatamente, possiamo utilizzare i modelli predefiniti e bloccare facendo clic sull'icona della cartella su Elementor. Dalla libreria è possibile selezionare l'intera pagina o sezioni o blocchi specifici. Ci sono tutte le categorie di blocchi disponibili secondo le tue necessità. Per la pagina di destinazione, seleziona un blocco qualsiasi dalla categoria Eroe. Nell'esempio ho selezionato il suono del futuro.

Costruire la home page

Ora creiamo una pagina simile alla Homepage, che abbiamo visto nella sezione intro, usando questo blocco. Per prima cosa cambiamo lo sfondo per l'intera sezione. Per modificare l'intera sezione, fai clic sui sei punti nella parte superiore della sezione come mostrato nell'immagine. Ora vedrai la barra degli strumenti "Modifica sezione" da dove puoi usare Stile in scheda per cambiare lo sfondo. Ecco un LINK ALLE IMMAGINI DEMO GRATUITE che puoi utilizzare nel tuo sito e-commerce. Carica queste immagini in Elementor e seleziona l'immagine per lo sfondo. Puoi cambiare la sovrapposizione dello sfondo se sembra troppo scura.

Ora puoi modificare gli elementi del blocco come abbiamo fatto prima. Modifica il testo, il colore, il carattere, la topografia, ecc. Puoi utilizzare il duplicato facendo clic sul pulsante blu in alto a destra di un elemento. Puoi aggiungere un divisore tra le caselle di testo e modellarlo a tuo piacimento utilizzando 'Modifica divisore. Ora modifica il pulsante secondo il nostro design come aggiungere o ridurre il riempimento per modificare lo spazio attorno ad esso. Collegheremo questo pulsante alla nostra pagina Negozio in seguito, puoi anche aggiungere un'icona ad esso. Puoi cambiare lo stile e l'animazione per quando passi il mouse sopra tutto sotto la barra degli strumenti "Pulsante Modifica" come mostrato nell'immagine.

Quindi inserisci il titolo animato dalle sezioni di Pro Elements scorrendo verso il basso la barra degli strumenti dell'elemento. Puoi modificare lo stile, la forma, il colore, la topografia del titolo ecc. utilizzando la barra degli strumenti "Modifica titolo animato" come mostrato nell'immagine. Puoi controllare tutti gli elementi e gli stili e progettare le cose nel modo desiderato. Ci sono molti tentativi ed errori coinvolti nella ricerca del design perfetto. Fai clic sul pulsante "Aggiorna" per applicare queste modifiche al tuo sito web.

Successivamente, nella pagina di destinazione, dobbiamo creare sezioni che si colleghino a varie categorie come la sezione femminile, la sezione maschile e i nuovi arrivi. Aggiungi una nuova sezione di 3 colonne, aggiungi intestazione, testo e pulsante al loro interno. Puoi crearne uno e duplicarlo due volte per risparmiare tempo e fatica. Anche in questo caso dovrai modificare il testo, gli stili, lo sfondo, ecc. di questa sezione come abbiamo fatto per la sezione precedente. Puoi usare le immagini da me fornite come sfondo per tutte e 3 le categorie. Durante l'utilizzo dell'editor di testo, per terminare la riga e passare alla riga successiva, come in questo caso con la sezione Donne, utilizzare <br> come mostrato nell'immagine.

Qui non abbiamo alcun modello o blocco in questa sezione, quindi dovrai creare e modellare ogni sezione da zero, il che potrebbe sembrare un compito lungo per la ^prima volta, ma puoi usare tutto il trascinamento della selezione e i trucchi come la duplicazione come copia il pulsante "Acquista ora" creato nella sezione sopra e cambia semplicemente lo stile del pulsante o passa il mouse invece di creare da zero. Dovrai vedere tutte le opzioni nella barra degli strumenti Modifica per ogni elemento per scoprire quale si adatta meglio ai tuoi gusti. Questo sarà un ottimo esercizio per il tuo senso artistico. Per modificare la spaziatura dei contenuti all'interno di una colonna, fai clic sull'icona Modifica colonna in alto a sinistra della colonna per aprire la barra degli strumenti "Modifica colonna" dove puoi modificare il riempimento nella advancedsection come puoi vedere nell'immagine qui sotto.

Puoi duplicare le colonne delle righe e quindi modificare il testo e lo sfondo per le altre due categorie della sezione Uomo e Nuovi Arrivi in ​​modo da non doverli rimodellare. Dovresti modellare l'immagine di sfondo e il colore del testo di ciascuna sezione in modo diverso in modo che ogni categoria sia visibile distintamente. Se il primo ha un'immagine di sfondo scuro con un colore del testo chiaro, il successivo dovrebbe essere opposto. Tutte queste tecniche le imparerai quando inizierai a progettare e vedrai tu stesso questi effetti. Usa lo sfondo per enfatizzare il testo sopra l'immagine, inoltre regola la posizione del testo usando il trascinamento della selezione o l'opzione Allineamento in modo che non copra i volti nell'immagine di sfondo. Puoi anche cambiare la posizione dell'immagine di sfondo usando "Modifica colonna" come in precedenza. Fai clic sul pulsante blu nella parte superiore della sezione per aprire "Modifica sezione" e puoi allungare la larghezza della sezione fino al 100%.

Successivamente, aggiungeremo le icone. Per quello ancora prima aggiungi una nuova sezione e inserisci un Image Box dalla barra degli strumenti di Elementor. Scegli l'immagine dell'icona per le immagini che ho fornito come mostrato nell'immagine. Queste caselle con icone servono a incoraggiare l'acquisto a fornire titoli accattivanti come "Spedizione gratuita" e a scrivere la descrizione e le condizioni nel testo di seguito. Modella la finestra dell'immagine come desideri modificando la posizione dell'immagine, la dimensione, il colore del titolo e della descrizione e del testo, ecc. dalla barra degli strumenti "Modifica immagine". Duplicalo dopo aver progettato in modo da non dover progettare nuovamente tutte le icone. Successivamente puoi modificare il testo di ogni casella per lo scopo desiderato. Dalla sezione avanzata, puoi aggiungere margini usando Padding in modo che la pagina non sembri troppo congestionata.

Puoi aggiungere bordi alle colonne, per renderlo accattivante. Fai clic sul pulsante "Modifica colonna" e nella categoria "Stile" puoi aggiungere bordi e progettare i bordi. Puoi selezionare il tipo di bordo, la larghezza, il posizionamento, il raggio ecc. Puoi selezionare il bordo solo su uno o più lati specifici come qui abbiamo fatto il bordo destro. Controlla tutti gli strumenti di progettazione disponibili nella barra degli strumenti e seleziona te stesso. Più lo fai da solo, più ti abituerai a tutti gli strumenti e le funzioni e sarà più facile e veloce per te.

Successivamente, aggiungeremo la sezione "Nuovo arrivo". Ma prima aggiungeremo un divisore tra queste righe per farle sembrare chiare e distinguibili. Aggiungi nuovamente una nuova sezione, aggiungi "Divisore" dalla barra degli strumenti di Elementor e progettala utilizzando la barra degli strumenti "Modifica divisore" come mostrato nell'immagine. Aggiungi un testo "Nuovo arrivo" nel divisore che verrà utilizzato come intestazione per la sezione successiva, quindi cambia le dimensioni, il carattere, ecc. Come mostrato nell'immagine per renderlo attraente.

Creazione di prodotti

Ora dobbiamo creare prodotti da vendere sul nostro sito di e-commerce. I prodotti possono essere semplici o variabili, i prodotti semplici non hanno scelte di selezione come taglia, colore o stile mentre i prodotti variabili hanno varie scelte disponibili come taglia o colore nei vestiti. Impareremo a crearli entrambi.

Woocommercio

Per creare prodotti, dovremo aggiungere un nuovo plugin. Quindi andiamo alla dashboard di WordPress, fai clic su "Plugin" sulla barra degli strumenti e quindi su "Aggiungi nuovo" come abbiamo fatto in precedenza. Dalla libreria dei plugin, cerca "Woocommerce". Woocommerce è il miglior plug-in di e-commerce nella mia esperienza personale. Fare clic su "Installa" e fare clic su Attiva. Ora il plugin Woocommerce si aprirà come mostrato nell'immagine. Compila il form e clicca su 'Continua'. Quindi seleziona il tuo settore, in questo tutorial stiamo creando un sito Web di moda e abbigliamento. Successivamente abbiamo il tipo di prodotti in cui vengono fornite 2 opzioni: fisico e download, seleziona entrambi e fai clic su "continua". Quindi riceverai alcune domande, risponderai e fai nuovamente clic su "Continua".

Successivamente dovrai selezionare un tema per il tuo plug-in, selezionare il tema "Astra". Successivamente ti darà la possibilità di attivare i servizi Jetpack che ci saranno utili, quindi seleziona "Sì, per favore" che ti porterà alla pagina dell'account Jetpack, riempirà i tuoi dettagli e creerà un account. Verrai reindirizzato alla dashboard di WordPress ma un nuovo "Woocommerce" sarà disponibile sulla tua barra degli strumenti come mostrato nell'immagine. Tutte queste impostazioni fiscali, lo faremo in seguito.

Ora iniziamo a creare prodotti. Per prima cosa creeremo un semplice prodotto di Woman Green Shirt come mostrato nell'immagine.

Fai clic su "Prodotti" sulla barra degli strumenti che aprirà la pagina "Aggiungi nuovo prodotto" come mostrato nell'immagine qui sotto. Inserisci il nome e la descrizione del prodotto. Di seguito su Dati prodotto seleziona "Prodotto semplice" poiché prima creeremo un prodotto semplice. Inserisci il prezzo normale e il prezzo di vendita, che puoi programmare di seguito, come mostrato nell'immagine successiva. In queste date il prezzo di vendita sarà automaticamente applicato.

Quindi fai clic sulle impostazioni "Inventario" sotto il Generale in cui puoi inserire la disponibilità delle scorte. Puoi anche consentire o disabilitare gli ordini in arretrato qui, se metti "Non consentire", nessun ordine verrà preso se il prodotto è esaurito. Inserisci la "Soglia di scorte basse" per ricevere una notifica quando le scorte sono in esaurimento.

Successivamente, nella categoria "Spedizione", inserisci i dettagli di peso e dimensioni del prodotto ai fini della spedizione. Nei prodotti "Collegati", puoi "Upsells" che mostrerà i prodotti correlati e Cross-sell che mostreranno i prodotti correlati nel carrello dopo che l'utente avrà acquistato il prodotto originale. Aggiungi i prodotti correlati, che vuoi mostrare agli acquirenti, quando stanno acquistando questo particolare prodotto. Nella categoria "Avanzate", puoi dare una nota agli acquirenti e attivare le recensioni.

Sotto queste impostazioni, se scorri verso il basso, hai "Descrizione breve del prodotto" come nell'immagine. Qui scrivi la descrizione completa come per il nostro prodotto di esempio. Puoi anche progettare il carattere e lo stile della descrizione qui. Sul lato destro, se vedi l'immagine, c'è un'opzione "Immagine del prodotto". Fai clic su "Imposta immagine prodotto" che aprirà la pagina "Immagine prodotto" in cui puoi selezionare e caricare l'immagine del tuo prodotto. Sotto la "Immagine del prodotto", c'è la "Galleria del prodotto" dove puoi inserire altre immagini del tuo prodotto da diverse angolazioni per una migliore comprensione degli spettatori come mostrato nell'immagine.

Sopra hai "Categorie di prodotti" sulla barra degli strumenti sul lato destro, come mostrato nell'immagine. Qui puoi classificare i tuoi prodotti. Quindi creiamo una nuova categoria facendo clic su "Aggiungi nuova categoria". Digita il nome 'Donna' e clicca su Pubblica. Ora puoi visualizzare il tuo prodotto facendo clic sul pulsante "Visualizza prodotto". Mostrerà come il prodotto verrà visualizzato agli spettatori quando fanno clic su di esso. Si aprirà un nuovo popup del prodotto in cui è possibile visualizzare il prodotto e persino ingrandire le immagini per ottenere una visualizzazione migliore. Puoi modificare di nuovo tutto ciò che desideri.

Se non ti piace lo stile e il tema della pagina di visualizzazione, puoi cambiarlo con "Impostazioni Astra" sulla barra degli strumenti a destra come mostrato nell'immagine . Ad esempio, se desideri rimuovere la barra laterale, fai clic su "Barra laterale" e seleziona "Nessuna barra laterale". Fare clic su "Aggiorna" per salvare le modifiche e di nuovo fare clic su Visualizza prodotto per visualizzare le modifiche. Quindi questo è stato un esempio di come creare un prodotto semplice. Puoi aggiungere tutti i prodotti e le categorie che desideri utilizzando questa stessa procedura. Se si fa clic sul pulsante Categoria nella pagina Prodotto, si aprirà una Nuova Pagina della categoria in cui verranno visualizzati tutti i prodotti di questa categoria. A questo punto, questo sarà molto blando, ma in seguito progetteremo anche questa pagina.

Quindi impariamo come creare un prodotto variabile. Ancora una volta dobbiamo andare alla pagina "Aggiungi nuovo prodotto" come prima. Questa volta creiamo un prodotto variabile da uomo. Fornisci il titolo e la descrizione del prodotto come abbiamo fatto prima. Ricorda che questa non è la descrizione principale ma la piccola descrizione aggiuntiva che viene mostrata di seguito, la descrizione principale deve essere scritta in "Descrizione breve del prodotto". Qui cambieremo i "Dati del prodotto" in "Prodotto variabile". Tutte le altre impostazioni come Inventario, Spedizione, Prodotti collegati, ecc. sono simili al Prodotto semplice che abbiamo creato in precedenza, quindi puoi completare questi dettagli da solo.

Ora fai clic su "Attributi" dove aggiungeremo nuovi attributi o caratteristiche al nostro prodotto. Fare clic su "Aggiungi" per farlo. Successivamente, come mostrato nell'immagine, creeremo nuovi attributi del prodotto come taglia, colore, ecc. Per prima cosa, inseriamo Taglia nella casella "Nome". Nella casella "Valori", scrivi prima Small, seguito dal simbolo "|" (senza parentesi). Premere il tasto 'Maiusc' + il tasto sopra il pulsante Invio per scrivere questo simbolo come mostrato nell'immagine, quindi scrivere Medio e di nuovo lo stesso simbolo e poi Grande. Puoi aggiungere tutte le variabili che vuoi come S, M, L, XL ecc. Usando quel simbolo. Seleziona la casella di controllo "Utilizzato per tutte le varianti" e fai clic su "Salva attributo".

Successivamente aggiungeremo un altro attributo. Fare nuovamente clic sul pulsante 'Aggiungi', scrivere 'Colore' nella casella Nome e nella casella Valore, aggiungere i nomi dei colori desiderati separati dal simbolo che abbiamo utilizzato nell'attributo Dimensione. Qui stiamo scrivendo, 'Bianco|Blu' come le due opzioni disponibili. Ancora una volta seleziona la casella Usato per le variazioni e fai clic su "Salva attributi".

Ora applicheremo questi attributi ai nostri prodotti. Fai clic su "Variazioni" sotto "Attributi" e seleziona "Crea varianti da tutti gli attributi" e fai clic su "Vai". Fare clic su "Sì" nel popup per verificare questa opzione. Che aprirà le opzioni come mostrato nell'immagine. Puoi vedere che sono state aggiunte 6 varianti combinando 3 taglie con 2 colori cioè Small White, Small Blue, Medium White, Medium Blue, Large White e Large Blue.

Fare clic sul primo per aprire le sue impostazioni di modifica come mostrato nell'immagine. Innanzitutto, dobbiamo caricare l'immagine di questa variazione. Clicca su 'Carica immagine' e seleziona l'immagine dalla galleria. Quindi devi inserire il prezzo normale di questa variazione. Questo è un campo obbligatorio quindi anche se i prezzi sono gli stessi, devi scriverli qui. Anche in questo caso puoi aggiungere il prezzo di vendita e programmarlo come abbiamo fatto nel prodotto semplice. Puoi compilare i dettagli dello stock e dei dettagli di spedizione come abbiamo fatto nel prodotto semplice.

Anche in questo caso dovrai eseguire lo stesso processo anche per altre varianti. Quindi clicca su Variationname, carica l'immagine e metti il ​​prezzo Small Blue e chi più ne ha più ne metta. Qui stiamo mettendo solo l'immagine e il prezzo di tutte le variazioni richieste, ma puoi inserire tutti gli altri dettagli sul tuo sito web secondo i propri termini. Sopra il nome delle varianti, puoi vedere l'opzione per inserire "Valore modulo predefinito" in cui puoi selezionare quale variante verrà mostrata come predefinita nella casella del prodotto quando gli utenti visualizzano il prodotto.

Altre impostazioni come la breve descrizione del prodotto saranno simili al prodotto semplice che abbiamo fatto in precedenza, quindi inserisci i dettagli come per il tuo prodotto. Lo stesso per l'immagine del prodotto, dove dovresti inserire l'immagine per la variazione predefinita poiché questa verrà mostrata prima agli spettatori quando vedranno il prodotto. Dovresti mettere la tua variante più vendibile come prodotto predefinito. Non è necessario inserire una galleria di prodotti per i prodotti variabili poiché le visualizzazioni potranno vedere diverse immagini della variazione. Crea una nuova categoria "Uomo" e seleziona la sua casella di controllo come abbiamo fatto per il Prodotto Semplice. Fare clic su Pubblica per applicare queste modifiche al sito Web.

Ora puoi fare clic su Visualizza prodotto per vedere come lo vedranno gli spettatori. Come puoi vedere nell'immagine, il prodotto si aprirà. Poiché si tratta di un prodotto variabile, avrai un elenco di attributi e i loro valori nella loro casella a discesa. È possibile fare clic su queste caselle per visualizzare le varie varianti di questo prodotto. Vedrai l'immagine e i prezzi impostati per la variazione quando fai clic su di essi. Anche in questo caso puoi cambiare il tema della pagina del prodotto se non ti piace usando le impostazioni di Astra. Modifichiamo le impostazioni e rimuoviamo la barra laterale e cambiamo il layout del contenuto in Larghezza intera come abbiamo fatto con il prodotto singolo per coerenza. Puoi realizzare tutti i prodotti variabili con tutte le varianti che desideri, ma dovrai compilare i dettagli di ogni variazione come abbiamo fatto qui. Quindi, con più attributi e più valori di essi, avrai molte più variazioni. Una cosa da notare è che il Prezzo del prodotto è mostrato come un intervallo perché mostra i prezzi della variazione con il prezzo più basso e la variazione più costosa come un intervallo. Quindi ora abbiamo imparato come creare prodotti sia semplici che variabili.

Ora aggiungiamo questi prodotti alla nostra Homepage. Vai alla tua home page e fai clic su "Modifica con Elementor". Scorri verso il basso fino alla fine in cui abbiamo creato il divisore Nuovi Arrivi. Sulla barra degli strumenti di Elementor a destra, fai clic sulla barra "Cerca widget" e digita prodotto. Seleziona l'elemento Prodotto e trascinalo nella casella nella tua pagina sotto il divisore Nuovi Arrivi e vedrai i prodotti lì.

Nella barra degli strumenti 'Modifica prodotti' come puoi vedere nell'immagine, hai il numero di colonne e righe di prodotto che vuoi mostrare qui in modo che non tutti i tuoi prodotti siano mostrati in questa pagina. Puoi anche utilizzare la categoria di stile per modificare lo spazio tra le colonne e le righe, gli allineamenti, il bordo dell'immagine. Puoi anche definire lo stile del titolo del nome del prodotto come colore, carattere, spaziatura, topografia, ecc. Stessa cosa per le stelle di valutazione, sia piene che vuote. Allo stesso modo anche per il prezzo, puoi modificare il carattere, il colore, la topografia, ecc. sia per il prezzo normale che per quello di vendita. Il prossimo è il pulsante, puoi progettare il pulsante come preferisci come il colore di sfondo, il colore del testo, il colore del bordo e così via. L'utilizzo di Elementor rende tutte queste modifiche così semplici. Devi solo usare tutti gli strumenti di editing disponibili e giocarci e tutti i risultati saranno davanti ai tuoi occhi.

Hai anche l'opzione "Sales flash" che puoi progettare per mostrare quando hai una vendita che mostrerà un banner flash sopra il tuo prodotto quando c'è una vendita sul prodotto. Usalo per attirare clienti sui tuoi prodotti quando visitano la tua home page. Tutte le opzioni di progettazione sono simili a quelle che abbiamo imparato fino ad ora, quindi puoi crescere attraverso tutte e selezionare il design più adatto a te.

Nell'opzione Query, puoi selezionare i prodotti che desideri vengano visualizzati in questa sezione. Ad esempio, se desideri visualizzare solo il prodotto da donna in questa sezione, nella casella Sorgente, seleziona "Ultimi prodotti", poiché si tratta di una sezione dei nuovi arrivi dalla casella a discesa e fai clic su "Includi". Quindi nella casella "includi per", scrivi termine e seleziona l'opzione Termine che sarà la casella del termine. Nella casella dei termini, scrivi "Donne" e seleziona "Categoria prodotto: Donna" come mostrato nell'immagine. Clicca su Aggiorna per dare effetto al tuo sito web. In questo modo puoi creare sezioni di visualizzazione dei prodotti in qualsiasi parte del tuo sito web.

Modello di e-commerce Elementor

Vi ho fornito il template del sito ecommerce che abbiamo preparato poco fa layout da noi preparato qui gratuitamente sul mio sito a questo linkhttps://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Plugin

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• Pagina del prodotto personalizzata

Ora personalizzeremo la nostra pagina Prodotto utilizzando la stessa tecnica. Se fai clic su qualsiasi prodotto ora, mostrerà la pagina del prodotto nel tema predefinito come abbiamo visto quando abbiamo creato i prodotti. Ancora una volta, vai al builder Elementortheme e aggiungi un nuovo tema per prodotto singolo facendo clic sull'icona + accanto ad esso. Puoi utilizzare i modelli forniti qui, ma ne creeremo uno da zero per questo tutorial. Quindi prima aggiungi una sezione in 2 parti e fai clic sulla scheda elementi. Qui puoi vedere tutti gli elementi realizzati appositamente per i Prodotti come mostrato nell'immagine che non vediamo durante la creazione di una pagina.

Per prima cosa aggiungi un pangrattato che è come la categorizzazione del prodotto. Ora puoi modificare lo stile del breadcrumb come colore, dimensione, riempimento ecc. utilizzando la barra degli strumenti come puoi vedere nell'immagine. Sulla destra, aggiungi l'elemento "Titolo del prodotto" dalla barra laterale e progetta lo stile anche di quello usando la barra degli strumenti come in precedenza. Quindi aggiungiamo l'immagine del prodotto allo stesso modo. Fare clic sull'elemento Immagine del prodotto e modificarne lo stile utilizzando la barra degli strumenti. Quindi aggiungi la descrizione breve in modo simile. Puoi aggiungere un divisore tra il titolo e la descrizione. Quindi dobbiamo inserire la categoria del prodotto. Per questo, seleziona l'elemento "Meta prodotto" e rilascialo sotto la descrizione e modellalo anche tu. Quindi aggiungi l'elemento "Prezzo" sotto di esso e puoi cambiarne di nuovo lo stile. Quindi metti un pulsante "Aggiungi al carrello" sotto il prezzo. Poiché si tratta di un prodotto variabile, fornirà automaticamente le opzioni di variazione. Successivamente puoi aggiungere icone social e moduli di revisione, informazioni aggiuntive ecc. Elementi che desideri. Fai clic su "Pubblica" dopo aver finito di aggiungere e progettare gli elementi che desideri nella pagina del tuo prodotto. Nella condizione sulla pagina di visualizzazione, includi 'Tutti i prodotti' per dare effetto di questo modello a tutti i prodotti che hai creato. Puoi creare temi diversi per diverse categorie di prodotti, se lo desideri, dovrai solo modificare la condizione per includerla solo in quella specifica categoria. Tutte le nostre pagine prodotto verranno aggiornate a questo modello quando lo abbiamo applicato a tutti i prodotti.

• Pagina di pagamento e carrello personalizzata

Ora progetteremo le pagine personalizzate di Checkout e Carrello. Le pagine di pagamento e carrello non sono con il generatore di temi, quindi le modificheremo con Elementor. Vai alla pagina Carrello e fai clic su Modifica con Elementor. Proprio come qualsiasi altra pagina, puoi modificarla e modellarla come desideri con gli elementi Elementor. Puoi modificare il testo, le icone, i pulsanti dei coupon ecc. e lo stile del carattere, del colore, della topografia ecc. da solo ormai. Ma per modificare la parte del tema reale come il titolo Carrello qui non è possibile con Elementor. Per modificarlo dovrai modificarlo in WordPress stesso, quindi fai clic su "Modifica pagina" e nell'angolo in basso a destra, seleziona la casella di controllo "Disabilita titolo" nella sezione disabilita come mostrato nell'immagine come abbiamo fatto in precedenza durante la progettazione del tema di wordpress.

È possibile modificare e progettare la pagina di pagamento e utilizzando allo stesso modo. Allo stesso modo, puoi progettare la pagina "Il mio account" dei tuoi clienti poiché il tema predefinito di quella pagina non è molto bello. Puoi modificarlo con Elementor. E ho anche fornito un link in precedenza in cui ho anche inserito il file zip per i modelli di tutte queste pagine affinché tu possa progettare rapidamente.

Impostazioni Woocommerce

Ormai hai imparato a creare pagine usando Elementor e Theme Builder e la costruzione del tuo sito web è completa. Ora dobbiamo conoscere le impostazioni di Woocommerce per far funzionare questo sito web. Vai alla dashboard di WordPress, fai clic su Woocommerce e seleziona "Impostazioni" che aprirà la scheda delle impostazioni generali di Woocommerce come mostrato nell'immagine.

• impostazioni generali

Qui puoi inserire il tuo indirizzo e selezionare i paesi in cui vuoi vendere, abilitare le tasse, abilitare i codici coupon. Seleziona tutte queste caselle per abilitarle. Di seguito puoi cambiare la tua valuta in base al tuo paese.

• Scheda Prodotto

La scheda successiva è la scheda Prodotto nella riga in alto delle Impostazioni dove troverai molte impostazioni, la maggior parte delle quali sono molto specifiche qui che non utilizzeremo ad eccezione della sezione delle recensioni in cui puoi abilitare le recensioni e le valutazioni a stelle sui prodotti, inoltre puoi mostrare il tag utente verificato agli acquirenti reali nelle recensioni come mostrato nell'immagine. Puoi anche inserire i dettagli di spedizione dei prodotti come peso, dimensione, ecc.

• Scheda Tasse

Successivamente nella scheda tasse, dove puoi abilitare o disabilitare il calcolo automatico delle tasse. Il calcolo delle tasse può essere molto complicato a seconda del tuo paese e della tua attività, quindi il calcolo automatico potrebbe non funzionare per te. Tuttavia hai la possibilità di impostare le tasse per indirizzi di spedizione diversi e in base all'articolo del carrello. Ho fornito un link a www.taxjar.com dove puoi ottenere servizi gratuiti ea pagamento per aiutarti con il calcolo delle tasse. Puoi anche selezionare di visualizzare i prezzi con o senza tasse in vari punti come nel negozio, dovresti mostrare il prezzo senza tasse e nel carrello e alla cassa, dovrebbe includere le tasse in generale.

• Scheda di spedizione

La scheda successiva è "Spedizione". Per prima cosa fai clic su "Aggiungi una zona di spedizione", aggiungi il nome della zona, le regioni specifiche della zona e imposta le tariffe di spedizione con vari metodi di spedizione come mostrato nell'immagine. Qui, abbiamo utilizzato un metodo a tariffa fissa in cui mettiamo una tariffa fissa di $ 5 e l'altro è il metodo di spedizione gratuito. Fare clic sul pulsante Modifica in basso per aggiungere una condizione relativa all'importo minimo dell'ordine o al requisito del coupon. Qui abbiamo selezionato un requisito di ordine minimo di $ 50. Puoi aggiungere più zone e più metodi e tariffe di spedizione per ognuna di esse. Hai anche un valore predefinito per le località non coperte da nessuna delle tue zone a cui non abbiamo fornito tariffe specifiche. Quindi qui abbiamo inserito un tasso predefinito di $ 10 per quelle zone per impostazione predefinita.

• Scheda Account e Privacy

Scheda "Account e privacy" in cui è possibile selezionare l'opzione per creare un account dei clienti prima di acquistare o consentire loro di acquistare prima senza account e successivamente creare un account al momento del checkout e anche varie altre opzioni nella creazione di account come nome utente, password, ecc. che puoi controllare da solo in quanto sono molto autoesplicativi. Inoltre puoi aggiungere una politica sulla privacy come richiesto dalla legge qui. Hai anche opzioni sul tempo in cui i dati personali degli utenti verranno eliminati in Conservazione dei dati personali.

• Scheda E-mail

Inoltre abbiamo la scheda "E-mail" in cui le impostazioni su tutte le e-mail automatizzate che riceverai e invierai ai clienti dal sito Web, ad esempio su un nuovo ordine o su un ordine annullato. Puoi modificare il formato dell'e-mail che riceverai o invierai al cliente in tutte queste situazioni qui. È possibile aggiungere un plug-in a questo scopo per ricevere e-mail di qualità migliore. Vai su Plugin e installa "Kadence Woocommerce Email designer" e. Usando questo plugin, puoi progettare il contenuto dell'e-mail, l'intestazione, il piè di pagina, il testo ecc. Usando i loro stili personalizzati che sono modificabili qui andando al plugin nella barra laterale di Woocommerce come mostrato nell'immagine.

• Pagamenti

Ora andremo alla scheda "Pagamenti" dove possiamo selezionare i metodi di pagamento consentiti ai nostri clienti. Ci sono molte opzioni disponibili per selezionare, ma abiliteremo "Stripes" e "PayPal" qui facendo clic sul pulsante di abilitazione come mostrato nell'immagine qui sotto.

1. PayPal

Ora impostiamo prima le impostazioni di pagamento per PayPal, quindi fai clic su "Configura" per aprire la pagina delle impostazioni di PayPal in cui puoi inserire il titolo, la descrizione per la casella di pagamento e il tuo account e-mail PayPal e fai clic su "Salva modifiche ' per integrare il tuo sito web con PayPal. Se non hai un PayPal, puoi crearne uno andando sul loro sito web e iscrivendoti gratuitamente. Dovrai solo registrarti con un indirizzo email che inserirai nella casella email di PayPal come mostrato nell'immagine. È uno dei metodi di pagamento più popolari disponibili.

2. Banda

Successivamente imposteremo i pagamenti con le strisce. Quindi fai clic sul pulsante "Gestisci" accanto ad esso. Allo stesso modo per le impostazioni di PayPal, inserisci prima il titolo, la descrizione per la casella di pagamento. Successivamente hai la chiave pubblicabile di prova e la chiave segreta di prova. Puoi andare su www.stripe.com e creare un account gratuito lì, devi solo avere un conto bancario per creare un account. Puoi integrare il tuo account stripe sul tuo sito web dopo averlo creato, che è un servizio gratuito. Per questo, dopo aver effettuato l'accesso al tuo account stripe, fai clic su "Sviluppatori" e seleziona "Chiavi API" come mostrato nell'immagine. Copia la chiave pubblicabile che compare qui sul tuo sito web nella casella della chiave pubblicabile e la chiave segreta nella casella della chiave segreta. Fai clic su "Salva modifiche" e ora il tuo sito Web è pronto per accettare pagamenti con carta di credito da qualsiasi parte del mondo con una commissione di transazione molto bassa. Qui lo stiamo facendo abbiamo ancora abilitato il pulsante Visualizzazione dei dati di test sul nostro account stripe e nella pagina delle impostazioni di Woocommerce abbiamo selezionato la casella 'Abilita modalità test' ma quando sei pronto per andare in diretta con il tuo sistema di pagamento, disabilitalo .

Ora puoi testare il tuo sito Web effettuando un ordine e acquistando qualcosa e puoi anche effettuare un pagamento per verificare che tutto sia in ordine. Nella pagina Il mio account, i clienti avranno la propria dashboard personale in cui possono controllare, modificare o annullare il loro ordini, modificare il loro indirizzo di spedizione e fatturazione, impostare i loro metodi di pagamento e i dettagli del loro account. Tutti i loro ordini passati vengono visualizzati anche nell'elenco degli ordini con il loro stato.

Ottimizzazione per dispositivi mobili

Ottimizzazione mobile significa rendere il sito Web user friendly per i dispositivi mobili. L'ottimizzazione per dispositivi mobili è molto importante nello scenario odierno perché a) molte persone utilizzano dispositivi mobili per navigare in Internet e b) Secondo il nuovo algoritmo di Google, se il tuo sito Web non è ottimizzato per dispositivi mobili, diminuirà il tuo posizionamento, il che può essere catastrofico per il tuo traffico del sito web e SEO.

L'ottimizzazione per dispositivi mobili è abbastanza semplice utilizzando l'editor Elementor. Torniamo di nuovo alla dashboard di Elementor. Nella parte inferiore della barra degli strumenti troverai il pulsante 'Modalità reattiva', facendo clic su di esso si aprirà un elenco a discesa che mostra 3 opzioni vale a dire. Desktop, Tablet e Mobile. Fino ad ora, stavamo progettando il nostro sito Web basandolo su come sarebbe apparso per i visualizzatori desktop. Ora fai clic su "Tablet" per avere un'anteprima di come apparirebbe su un browser tablet. Allo stesso modo puoi verificarlo anche per la modalità "Mobile". Puoi modificare la pagina web se qualcosa sembra fuori servizio o se non ti sembra visivamente attraente.

Qui come puoi vedere nell'immagine, il primo titolo è troppo grande per la modalità tablet e lo "SCONTO del 50%" è troppo piccolo, quindi dovrai regolarlo. Dai un'occhiata a tutti gli elementi delle pagine per vedere se qualcosa deve essere riprogettato. Tutte queste modifiche saranno applicabili alla modalità Tablet quando si fa clic su Aggiorna. Lo stesso sarà applicabile alla modalità mobile. Regola la dimensione dei testi delle intestazioni, l'allineamento dei pulsanti, dei banner e delle intestazioni.

Puoi disabilitare alcune delle sezioni di cui hai bisogno sulla versione mobile o tablet, se ritieni che non sia importante per loro. Per questo, seleziona la sezione che vuoi nascondere, vai alla categoria avanzata sulla barra degli strumenti "Modifica sezione", fai clic su "Responsive" e in Visibilità, puoi scegliere di nascondere la sezione su desktop, tablet o versione mobile come mostrato in l'immagine. Stessa cosa che puoi fare con altre sezioni o elementi. Puoi progettare tutto in modo diverso per tablet o modalità mobile come immagini di sfondo, dimensione del carattere o altro.

Modulo di Contatto

Ora andiamo avanti e impariamo come creare una pagina "Contatto" in cui i visitatori possono compilare le informazioni di contatto lì e andranno direttamente alla tua e-mail. Puoi eseguire il design di base della pagina da solo utilizzando l'editor Elementor o il Customizer del tema. L'unica cosa importante è il modulo di contatto come mostrato nell'immagine. Quindi cerchi il modulo sulla barra degli strumenti di Elementor e trascinalo sulla sezione e puoi modificare il testo e il design del modulo utilizzando la barra degli strumenti "Modifica modulo" che ormai penso che potresti fare da solo. Ci sono molte impostazioni avanzate nella barra degli strumenti Modifica modulo che non vengono visualizzate qui, ma il modulo di base che puoi creare.

Buoni

Per aggiungere coupon al tuo sito, fai clic su "+ Nuovo" nella barra in alto accanto al pulsante Personalizza e seleziona Coupon. I coupon sulla barra degli strumenti laterale di WordPress si trovano nella sezione "Marketing" come mostrato nell'immagine. Qui puoi aggiungere un nuovo codice coupon, selezionare il tipo di sconto come sconto percentuale, sconto carrello fisso o sconto prodotto fisso, inserire l'importo o la percentuale dello sconto e la data di scadenza del coupon. Sotto le "Restrizioni d'uso", puoi inserire condizioni come la spesa minima, l'uso individuale o la combinazione con altri coupon, includere o escludere prodotti o categorie di prodotti dal coupon. Sotto il limite di utilizzo, puoi selezionare il numero di volte in cui questo coupon può essere utilizzato o limitarlo per un prodotto specifico e limitare l'utilizzo da parte del singolo cliente. Fai clic su Pubblica per applicare questo coupon sul sito Web e provalo nella pagina Carrello applicando il codice coupon durante l'acquisto.

Spero davvero che questi tutorial siano stati utili ai lettori e ora puoi creare un sito Web da zero da solo. Se hai bisogno di aiuto, puoi visitare il mio sito Web e la mia pagina Facebook e lasciare un commento. Ho un sacco di altre risorse sulla creazione di siti Web e sull'utilizzo di Elementor che puoi controllare. Grazie per aver letto questo tutorial e i tuoi feedback e domande sono sempre i benvenuti.