Cum să faci un site de comerț electronic folosind WordPress și Elementor 2020

În acest tutorial, vă învăț Cum să creați un site web de comerț electronic folosind WordPress și Elementor 2020, pe care îl puteți personaliza complet.

WordPress este cea mai folosită platformă CMS pentru construirea de toate tipurile de site-uri web, inclusiv site-uri de comerț electronic. De asemenea, veți învăța să utilizați generatorul de pagini Elementor pentru a crea pagini web uimitoare, care este chiar acum numărul 1 și cel mai popular generator de pagini pentru WordPress. WordPress controlează mai mult de 1/3 din internet. Majoritatea companiilor mari de comerț electronic, cum ar fi Sony, Bata, eBay și multe altele, folosesc if pentru dezvoltarea și întreținerea site-ului lor, iar cea mai bună parte a utilizării unui WordPress este că nu trebuie să înveți niciun tip de limbaj de codare sau orice alt limbaj. jargon tehnic pentru a vă crea site-ul. Este o platformă simplă de glisare și plasare, care oferă o mulțime de șabloane și machete încorporate, care ajută la crearea unui site web atractiv și ușor de utilizat. De asemenea, vă voi oferi șabloane prefabricate pe care le puteți importa cu ușurință și puteți face site-ul dvs. de comerț electronic să funcționeze în câteva minute.

Doar parcurgerea întregului tutorial vă va face gata să vă creați propriul site web și să funcționeze fără ajutor extern. Acest tutorial a ajutat mulți oameni să-și creeze site-ul web și a făcut ca afacerile lor să aibă un avantaj față de concurența lor în această industrie brutală de comerț electronic. Așa că parcurgeți acest tutorial ușor și care se explică de la sine și dobândiți o abilitate care vă va ajuta toată viața. Întregul proces a fost predat într-o abordare pas cu pas și toate info-graficele și reprezentările picturale sunt oferite pentru a fi cât mai ușor de înțeles.

Deci, să începem să facem un site de comerț electronic folosind WordPress și Elementor 2020

Introducere într-un site de comerț electronic

Imaginea de mai sus este un exemplu de pagină de pornire sau de pagină de destinație a unui site web tipic de comerț electronic. Paginile de destinație sunt foarte importante pentru conversii și pentru realizarea de vânzări pe site-ul de comerț electronic. Așadar, pagina de destinație ar trebui să fie atractivă, conținând bannere și notificări de vânzări și prețuri reduse sau de noi sosiri, în special pentru site-urile de comerț electronic. Pentru a obține conversie, trebuie să puneți accent pe cele mai vândute produse pe pagina de destinație și să oferiți o legătură ușoară către acele produse. Puteți afișa categoriile de produse pe pagina de destinație și puteți furniza link către ele.

În partea de sus, avem un antet care conține locația noastră, numărul de telefon, numerele noastre de contact în stânga și în dreapta, avem pictogramele paginilor noastre de socializare Facebook, Twitter, YouTube etc. Mai jos avem un magazin butonul care face legătura către pagina de cumpărături de produse de pe site-ul nostru. De asemenea, avem un buton Cont, făcând clic pe care utilizatorii pot accesa propriul tablou de bord personal pentru a-și accesa și gestiona informațiile și achizițiile. Avem, de asemenea, sigla afacerii noastre pe antet. În mijloc, avem link-ul nostru către paginile noastre, adică. Acasă, Despre noi, Magazin, Contul meu și Contactați-ne.

După aceea ai toate produsele și bannerele tale, care vor învăța cum să creeze în acest tutorial, prezentate într-un mod foarte atractiv . După aceea, avem și o secțiune Newsletter, unde utilizatorii se pot abona la site-ul dvs. și nu notificări și e-mailuri despre produse, oferte, cupoane, etc. Mai jos avem subsolul nostru, care oferă informații despre noi și un buton de abonare prin e-mail.

După cum puteți vedea în imagine, pagina magazinului prezintă toate produsele disponibile pe site-ul nostru, unde utilizatorii pot verifica orice produs dând clic pe ele. Pe bara laterală, avem un filtru de preț, o listă de categorii, recenzii și anunțuri video ale produselor noastre. Sub fiecare produs, există, de asemenea, formularul de recenzie și produsele aferente. În continuare avem pagina Despre noi care afișează descrierea afacerii și informații despre echipa ta. Și apoi avem o pagină de contact unde utilizatorii ne pot contacta folosind un formular de contact. În continuare avem un tablou de bord Contul meu care va avea un tablou de bord personal pentru fiecare client, care conține informațiile personale, de achiziție și de plată.

Puteți vedea pagina coșului de cumpărături după ce cumpărați ceva, așa cum puteți vedea în imagine, unde puteți modifica detaliile de cumpărare, puteți verifica suma totală și puteți continua să plătiți. Apoi, vizitatorii pot verifica completând detaliile de livrare și plătind pentru achiziție. Vom învăța să creăm toate aceste pagini pas cu pas în acest tutorial, astfel încât site-ul dvs. să fie complet pregătit pentru a începe afacerea.

Obțineți găzduire și instalați WordPress și Elementor

• Achiziționarea domeniului NameHero

Primul lucru pe care trebuie să-l facem pentru a crea un site web este să obținem un nume de domeniu și găzduire pentru site-ul dvs. Trebuie să selectați o găzduire bună, deoarece întregul site web va fi bazat și susținut pe site-ul dvs. de găzduire, așa că trebuie să verificați și să comparați diverse găzduire pe baza unor criterii precum fiabilitate, suport tehnic, spațiu, valori mobiliare, design, oportunități SEO etc.

Există mai mulți furnizori de găzduire pe piață și majoritatea dintre ei au oferte diferite. Am încercat multe dintre ele și, în sfârșit, m-am stabilit pe NameHero pentru toate site-urile mele. Îl folosesc personal și l-am comparat cu alte 22 de găzduire și le-am găsit cele mai bune. După cum puteți vedea în imagine, au 4 opțiuni diferite și vă recomand opțiunea Plus Cloud pentru un site de comerț electronic. Puteți folosi linkul meu pentru a obține o reducere. www.namehero.com/darrelwilson

După ce ați comandat planul, veți putea să vă alegeți numele de domeniu, adică numele site-ului dvs. web. Puteți alege orice nume doriți. Vă puteți selecta domeniul în funcție de nevoia dvs. de a aprecia .net, .biz etc. Următorul și ultimul pas este să vă completați informațiile despre detaliile de cont și de plată. Este foarte recomandat să obțineți ID Protection în caseta de selectare a suplimentului, deoarece vă protejează de spammeri. Finalizați achiziția făcând clic pe paginile următoare și accesând procesul de plată.

• Instalați WordPress

Pentru a instala WordPress pe găzduire, accesați „Zona client” de pe pagina dvs. de găzduire, faceți clic pe „Cloud Web Hosting”. Apoi aveți Produsele și Serviciile mele, unde veți vedea pachetul Plus Cloud cu numele domeniului dvs., faceți clic pe butonul Activ de lângă acesta, așa cum puteți vedea în imagine. În partea stângă, veți vedea butonul „Mergeți la cpanel” și faceți clic pe el. Pe pagina următoare, după cum puteți vedea în imagine, derulați în jos la categoria software și faceți clic pe „WordPress Manager by Softaculous”.

Aceasta va deschide un program de instalare WordPress, faceți clic pe butonul Instalați acum. Se va deschide o pagină de configurare care conține versiunea, numele domeniului și directorul, așa cum puteți vedea în imagine. VĂ RUGĂM SĂ ELIMINAȚI ORICE SCRIS ÎN DIRECTOR. ȘI PE PROTOCOL ALEGEȚI „https:/”. În setările site-ului, puteți modifica numele și descrierea site-ului. Putem face asta și mai târziu. Introduceți detaliile dvs. de administrator, cum ar fi numele de utilizator, parola și e-mailul, care vor fi detaliile dvs. de conectare la WordPress. Pe pagina următoare, derulați în jos șabloanele, deoarece nu le folosim și faceți clic pe „Instalare”. Faceți clic pe linkul URL admin dat pe pagina următoare și noul dvs. WordPress este creat și live pe internet. Acum vă aflați pe tabloul de bord WordPress ca în imaginea în care vă puteți edita site-ul.

• Setări generale WordPress

Înainte de a vă proiecta site-ul web, permiteți-ne să învățăm să vă modificăm setările pe tabloul de bord WordPress. Pe tabloul de bord WordPress, veți vedea mai multe file în partea stângă a paginii, așa cum puteți vedea în imagine. Una dintre cele mai importante este fila „Setări”, unde veți găsi setările generale WordPress. Ar trebui să vă schimbați permalinkul de la „Ziua și numele” la „Numele postării” pentru a face adresa site-ului web mai ușor de înțeles. Acest lucru este, de asemenea, foarte important pentru SEO. O altă filă din tabloul de bord WordPress este „Utilizatori”, unde vă personalizați profilul și aspectul tabloului de bord WordPress. Faceți clic pe „Salvați modificările” pentru a-l actualiza.

Pentru a vă autentifica din nou la WordPress după ce v-ați deconectat, trebuie să introduceți adresa URL în bara de adrese, urmată de „/wp-admin”, care vă va duce la pagina de conectare WordPress unde vă puteți pune numele de utilizator și parola pentru a vă autentifica.

Crearea paginilor și meniului

Ați creat un site web funcțional acum, încă nu este unul complet. Acum trebuie să adăugați pagini pe site-ul dvs. Pe tabloul de bord WordPress, faceți clic pe fila „Pagini” și selectați opțiunea „Adăugați nou”. De asemenea, puteți face acest lucru făcând clic pe butonul „Adăugați nou” din partea de sus a paginii. Când faceți acest lucru, tabloul de bord va deschide un editor de pagini, așa cum se arată în imaginea de mai jos, unde vă puteți crea noua pagină. Aici, puteți pune numele paginii și puteți proiecta aspectul paginii. Faceți clic pe butonul „Publicare” și pagina dvs. web este creată. Aici, în acest tutorial, vom crea pagini de bază, cum ar fi Acasă, Despre noi și Contact, care sunt solicitate de fiecare site web. Deocamdată, nu intrăm în conținutul paginilor pe care le vom face mai târziu. Puteți vizualiza aceste pagini făcând clic pe vizualizare sub numele paginii în tabloul de bord WordPress.

După ce ați creat pagini separate, trebuie să creați un meniu pentru a vă putea naviga prin aceste pagini. Crearea unui meniu este foarte ușoară folosind WordPress. Doar navigați la tabloul de bord, găsiți fila „Aspect” și faceți clic pe „Meniuri”. Aceasta va deschide un editor de meniuri, unde vă puteți crea și denumi meniurile, așa cum puteți vedea în imaginea de mai jos. Odată ce creați un meniu, puteți aloca meniului diferite pagini ale site-ului dvs. Puteți oricând reatribui cronologia elementelor de meniu și puteți crea un meniu drop-down punând un element sub celălalt prin glisare și plasare.

Acum, ceea ce ar trebui să faceți este să faceți clic pe „Personalizați” din stânga sus, așa cum se arată în imagine și să mergeți la „Setări pentru pagina de pornire” și să schimbați pagina de pornire la „O pagină statică” și să alegeți pagina dvs. de pornire ca pagină statică, pe care trebuie să o faceți. selectați din lista verticală. Faceți acest lucru astfel încât de fiecare dată când cineva vă vizitează site-ul web, acesta este întotdeauna direcționat către pagina dvs. de pornire. Accesul direct pe altă pagină, cum ar fi Despre noi, pagina de contact sau cele mai recente postări, nu va avea sens pentru spectatori.

Descărcați Elementor

Acum trebuie să cumpărăm generatorul de pagini Elementor pro pe care îl vom folosi pentru a construi paginile web ale site-ului nostru de comerț electronic. Îl puteți cumpăra folosind link-ul meu.www.darrelwilson.com/elementor.De pe pagina lor, puteți verifica diverse pachete disponibile. Nu putem folosi versiunea gratuită, deoarece avem nevoie de generatorul de teme și serviciile Woocommerce builder. Odată ce achiziționați pachetul, acesta se deschide în contul dvs., așa cum se arată în imagine, de unde trebuie să faceți clic pe „Descărcați pluginul” și un zip va fi descărcat.

Apoi, trebuie să-l încărcați pe site-ul dvs. WordPress. Accesați tabloul de bord de pe WordPress, faceți clic pe „Plugins” din bara de instrumente din stânga, faceți clic pe „Adăugați nou” și adăugați pluginul se va deschide așa cum se arată în imagine. Faceți clic pe „Încărcați pluginul” și selectați fișierul zip Elementor și instalați-l. Faceți clic pe „Activați pluginul” și un nou buton „Elementor” va fi creat în bara de instrumente WordPress. Mergeți acolo și faceți clic pe „Conectați și activați”.

Instalați teme WordPress

Acum haideți să instalăm o temă WordPress pe site-ul nostru web. WordPress oferă o mulțime de teme pre-proiectate din care să alegeți, pentru aspectul site-ului dvs. În fila „Aspect” din tabloul de bord WordPress, veți găsi butonul „Temă” de pe care puteți instala o temă. Puteți selecta orice temă din opțiunile disponibile. În scopul acestui tutorial, vom folosi tema Astra pe care o puteți găsi în meniul popular. Faceți clic pe „Activați” sub numele temei. „Cea mai bună parte a utilizării acestei teme este că include toate configurațiile și funcționalitățile de bază necesare pentru ca un site web să ruleze și este foarte compatibilă cu generatorul de pagini Elementor.

Editați pagini cu Elementor

Acum să învățăm cum să ne edităm paginile cu Elementor. Accesați pagina de pornire a site-ului dvs. WordPress și faceți clic pe „Editați pagina” pe rândul negru de sus, care va deschide editorul de pagini. Mai întâi, permiteți-ne să schimbăm setările paginii din partea dreaptă, așa cum se arată în imagine. Schimbați aspectul conținutului la „Full Width Stretch” și selectați „Dezactivați titlul”, deoarece dorim acea setare pentru pagina noastră de pornire.

Acum faceți clic pe „Editați cu Elementor” pentru a deschide Editorul Elementor, așa cum se arată în imagine. Să avem un tutorial rapid al editorului Elementor aici. Pentru a adăuga o nouă secțiune la pagină, faceți clic pe butonul Plus și selectați modelul de coloană dorit. Pentru a adăuga elemente, faceți clic pe cele 9 puncte din bara de instrumente din partea stângă, care vă va oferi o listă de elemente ca în imagine. Puteți să trageți și să plasați oricare dintre aceste elemente pe care le doriți pe pagină și să le editați.

Odată ce faceți clic pe orice modul din pagină, bara de instrumente de editare va apărea în partea stângă. Aici, în imagine, edităm titlul, așa că a apărut „Edit Heading” care conține 3 file. ^Primul este Conținut care oferă diverse opțiuni pentru conținutul elementului. ^{Al doilea} este Stil unde puteți proiecta stilul, cum ar fi culoarea, dimensiunea, fontul etc. al elementului. Iar al 3 ^-lea este Advanced, unde poți pune animații și alte chestii. În mod similar, puteți adăuga, edita și stila o casetă de text în același mod sub titlu.

Puteți adăuga un buton și oferi un link către orice alt site web care se va deschide la clic pe el. Puteți modifica setarea la „Deschide o fereastră nouă”, astfel încât utilizatorii să nu părăsească site-ul nostru. De asemenea, puteți selecta o pictogramă pentru butonul dvs. din Galeria de pictograme. Toate acestea vor fi în bara de instrumente „Butonul Editare” din stânga, așa cum se arată în imagine.

Acum, în loc să proiectăm fiecare element separat, putem folosi șabloanele prefabricate și blocăm făcând clic pe pictograma folderului de pe Elementor. Din bibliotecă, puteți selecta întreaga pagină sau anumite secțiuni sau blocuri. Există toate categoriile de blocuri disponibile în funcție de nevoile dvs. Pentru pagina de destinație, selectați orice bloc din categoria Erou. Am selectat Sunetul viitorului în exemplu.

Construirea paginii de pornire

Acum să creăm o pagină similară cu Pagina de pornire, pe care am văzut-o în secțiunea de introducere, folosind acest bloc. Mai întâi, să schimbăm fundalul întregii secțiuni. Pentru a edita întreaga secțiune, faceți clic pe cele șase puncte din partea de sus a secțiunii, așa cum se arată în imagine. Acum veți vedea bara de instrumente „Editare secțiune” de unde puteți utiliza Stil pentru a schimba fundalul. Iată un LINK CĂTRE IMAGINI DEMO GRATUITE pe care le puteți utiliza pe site-ul dvs. de comerț electronic. Încărcați următoarele imagini în Elementor și selectați imaginea pentru fundal. Puteți modifica suprapunerea de fundal dacă pare întunecată.

Acum puteți edita elementele blocului așa cum am făcut mai devreme. Schimbați textul, culoarea, fontul, topografia etc. Puteți utiliza duplicat făcând clic pe butonul albastru din colțul din dreapta sus al unui element. Puteți adăuga separator între casetele de text și îl puteți stila așa cum doriți, utilizând „Edit Divider”. Acum editați butonul conform designului nostru, cum ar fi adăugarea sau reducerea Umpluturii pentru a schimba spațiul din jurul lui. Vom lega acest buton la pagina noastră Magazin mai târziu, îi puteți adăuga și o pictogramă. Puteți schimba stilul și animația atunci când treceți cu mouse-ul peste toate sub bara de instrumente „Butonul de editare”, așa cum se arată în imagine.

Apoi puneți titlul animat din secțiunile Pro Elements, derulând în jos în bara de instrumente a elementelor. Puteți schimba stilul titlului, forma, culoarea, topografia etc. folosind bara de instrumente „Editați titlul animat”, așa cum se arată în imagine. Puteți verifica toate elementele și stilurile și puteți proiecta lucrurile așa cum doriți. Există o mulțime de încercări și erori implicate în găsirea designului tău perfect. Faceți clic pe butonul „Actualizare” pentru a aplica aceste modificări site-ului dvs. web.

În continuare, pe pagina de destinație, trebuie să creăm secțiuni care leagă la diverse categorii, cum ar fi secțiunea pentru femei, secțiunea pentru bărbați și noile sosiri. Adăugați o nouă secțiune cu 3 coloane, adăugați titlu, text și buton în ele. Puteți crea una și duplica de două ori pentru a economisi timp și eforturi. Din nou, va trebui să editați textul acestei secțiuni, stilurile, fundalul etc. așa cum am făcut în secțiunea de mai sus. Puteți folosi imaginile date de mine pentru fundal pentru toate cele 3 categorii. În timp ce utilizați editorul de text, pentru a termina linia și a merge la rândul următor, așa cum facem aici cu Secțiunea pentru femei, utilizați <br> așa cum se arată în imagine.

Aici nu avem nici un șablon sau blocuri în această secțiune, așa că va trebui să creați și să stilați fiecare secțiune de la zero, ceea ce ar putea părea o sarcină lungă pentru ^prima oară, dar puteți folosi toate trucurile de tip drag and drop și cum ar fi duplicarea copiați butonul „Cumpără acum” din secțiunea de mai sus și doar schimbați stilul butonului sau treceți cu mouse-ul în loc să faceți de la zero. Va trebui să vedeți toate opțiunile din bara de instrumente Editare pentru fiecare element pentru a afla care dintre ele se potrivește cel mai bine gusturilor dvs. Acesta va fi un exercițiu grozav pentru simțul dvs. artistic. Pentru a modifica spațierea conținutului într-o coloană, faceți clic pe pictograma Editare coloană din partea stângă sus a coloanei pentru a deschide bara de instrumente „Editare coloană” unde puteți schimba umplutura în secțiune avansată, așa cum puteți vedea în imaginea de mai jos.

Puteți duplica coloanele rând și apoi edita textul și fundalul celorlalte două categorii de secțiune pentru bărbați și Noutăți, astfel încât să nu fie nevoie să le stilați din nou. Ar trebui să stilați imaginea de fundal și culoarea textului fiecărei secțiuni în mod diferit, astfel încât fiecare categorie să fie vizibilă distinct. Dacă primul are o imagine de fundal întunecată cu o culoare deschisă a textului, următorul ar trebui să fie opus. Toate aceste tehnici, le vei învăța când vei începe proiectarea și vei vedea singur aceste efecte. Folosiți fundalul pentru a accentua textul de deasupra imaginii, de asemenea, ajustați poziția textului utilizând opțiunea de glisare și plasare sau de aliniere, astfel încât să nu acopere fețele din imaginea de fundal. De asemenea, puteți modifica poziția imaginii de fundal folosind „Editare coloană” ca mai devreme. Faceți clic pe butonul albastru din partea de sus a secțiunii pentru a deschide „Editați secțiunea” și puteți extinde lățimea secțiunii la 100%.

În continuare, mai jos, vom adăuga pictograme. Pentru asta, mai întâi adăugați o nouă secțiune și inserați o casetă de imagine din bara de instrumente Elementor. Alegeți pictograma pentru imaginile pe care le-am furnizat așa cum se arată în imagine. Aceste casete cu pictograme sunt pentru a încuraja achiziția pentru a oferi titluri atractive precum „Livrare gratuită” și pentru a scrie descrierea și condiția în textul de mai jos. Stilați caseta de imagine după cum doriți, modificând poziția imaginii, dimensiunea, culoarea titlului și descrierea și textul etc. din bara de instrumente „Editați imaginea”. Duplicați-l după proiectare, astfel încât să nu trebuiască să proiectați din nou toate pictogramele. După aceea, puteți edita textul fiecărei casete în scopul dorit. Din secțiunea avansată, puteți adăuga margini folosind Padding, astfel încât pagina să nu pară prea aglomerată.

Puteți adăuga chenare coloanelor, pentru a le face ca atrăgătoare. Faceți clic pe butonul „Editați coloana” și în categoria „Stil”, puteți adăuga chenar și proiectați chenarele. Puteți selecta tipul de chenar, lățimea, plasarea, raza etc. Puteți selecta chenarul doar pe una sau mai multe laturi specifice, așa cum am făcut aici chenarul drept. Verificați toate instrumentele de proiectare disponibile în bara de instrumente și selectați-vă. Cu cât o faci singur, cu atât te vei obișnui mai mult cu toate instrumentele și funcțiile și vei deveni mai rapid și mai ușor pentru tine.

În continuare, vom adăuga secțiunea „Noua sosire”. Dar înainte de a adăuga un divizor între aceste rânduri, să arate clar și distins. Adăugați din nou o secțiune nouă, adăugați „Divider” din bara de instrumente Elementor și proiectați-o folosind bara de instrumente „Edit Divider”, așa cum se arată în imagine. Adăugați un text „Noua sosire” în separator, care va fi folosit ca titlu pentru următoarea secțiune, așa că schimbați dimensiunea, fontul etc. așa cum se arată în imagine pentru a-l face să arate atractiv.

Crearea Produselor

Trebuie să creăm produse pentru a le vinde pe site-ul nostru de comerț electronic acum. Produsele pot fi simple sau variabile, Produsele simple nu au opțiuni de selecție, cum ar fi mărimea, culoarea sau stilul, în timp ce produsele variabile au diferite opțiuni disponibile, cum ar fi dimensiunea sau culoarea hainelor. Vom învăța să le creăm pe amândouă.

Woocommerce

Pentru a crea produse, va trebui să adăugăm un nou plugin. Deci, să mergem la tabloul de bord WordPress, să facem clic pe „Plugin-uri” din bara de instrumente și apoi pe „Adăugați nou”, așa cum am făcut mai devreme. Din biblioteca de pluginuri, căutați „Woocommerce”. Woocommerce este cel mai bun plugin de comerț electronic din experiența mea personală. Faceți clic pe „Instalare” și faceți clic pe Activare. Acum pluginul Woocommerce se va deschide așa cum se arată în imagine. Completați formularul și faceți clic pe „Continuați”. Apoi selectați industria dvs., în acest tutorial realizăm un site web de modă și îmbrăcăminte. În continuare avem tipuri de produse în care sunt date 2 opțiuni – Fizice și descărcări, selectați ambele și faceți clic pe „continuare”. Apoi veți primi câteva întrebări, veți răspunde la ele și veți face din nou clic pe „Continuați”.

În continuare, va trebui să selectați o temă pentru pluginul dvs., selectați tema „Astra”. În continuare, vă va oferi opțiunea de a activa serviciile Jetpack, ceea ce ne va fi de ajutor, așa că selectați „Da, vă rugăm”, care vă va duce pe pagina contului Jetpack, vă va completa detaliile și vă va crea un cont. Veți fi redirecționat către tabloul de bord WordPress, dar un nou „Woocommerce” va fi disponibil în bara de instrumente, așa cum se arată în imagine. Toate aceste setări fiscale, le vom face mai târziu.

Acum să începem să creăm produse. Mai întâi vom crea un produs simplu de Woman Green Shirt, așa cum se arată în imagine.

Faceți clic pe „Produse” din bara de instrumente, care va deschide pagina „Adăugați un produs nou”, așa cum se arată în imaginea de mai jos. Completați numele și descrierea produsului. Mai jos, pe Date despre produs, selectați „Produs simplu”, deoarece mai întâi vom crea un produs simplu. Puneți prețul obișnuit și prețul de vânzare, pe care le puteți programa mai jos, așa cum se arată în următoarea imagine de mai jos. În aceste date, prețul de vânzare va fi aplicabil automat.

Apoi faceți clic pe setările „Inventar” de sub General, unde puteți pune Disponibilitatea stocului. De asemenea, puteți permite sau interzice Comenzile în așteptare aici, dacă puneți „Nu permiteți”, nu vor fi preluate comenzi dacă produsul nu este în stoc. Puneți „Pragul stoc scăzut” pentru a primi notificare când stocul este scăzut.

Apoi, în categoria „Livrare”, puneți detaliile despre greutate și dimensiuni ale produsului în scopul expedierii. În produsele „legate”, puteți „Vânzări în creștere”, care va afișa produse similare și Vânzări încrucișate, care va afișa produse similare în coș după ce utilizatorul cumpără produsul original. Adăugați produsele aferente, pe care doriți să le arătați cumpărătorilor, atunci când fac cumpărături pentru acest anumit produs. În categoria „Avansat”, puteți da o notă cumpărătorilor și puteți activa recenzii.

Sub aceste setări, dacă derulați în jos, aveți „Descriere scurtă a produsului”, ca în imagine. Aici scrieți descrierea completă conform produsului nostru exemplu. Puteți proiecta fontul și stilul descrierii și aici. În partea dreaptă, dacă vedeți imaginea, există o opțiune „Imagine produs”. Faceți clic pe „Setați imaginea produsului”, care va deschide pagina „Imaginea produsului” unde puteți selecta și încărca imaginea produsului dumneavoastră. Sub „Imaginea produsului”, se află „Galerie de produse”, unde puteți pune alte imagini ale produsului dvs. din unghiuri diferite pentru o mai bună înțelegere a spectatorilor, așa cum se arată în imagine.

Mai sus aveți „Categorii de produse” în bara de instrumente din dreapta, așa cum se arată în imagine. Aici vă puteți clasifica produsele. Deci, haideți să creăm o nouă categorie făcând clic pe „Adăugați o nouă categorie”. Introduceți numele „Femei” și faceți clic pe Publicare. Acum puteți vizualiza produsul dvs. făcând clic pe butonul „Vizualizare produs”. Acesta va arăta cum va fi afișat produsul pentru spectatori atunci când aceștia dau clic pe el. Se va deschide o nouă fereastră de tip pop-up de produs unde puteți vizualiza produsul și chiar mări imaginile pentru a obține o vizualizare mai bună. Puteți edita din nou orice doriți.

Dacă nu vă place stilul și tema paginii de afișare, le puteți schimba cu „Setări Astra” din bara de instrumente din dreapta, așa cum se arată în imagine . De exemplu, dacă doriți să eliminați bara laterală, faceți clic pe „Bară laterală” și selectați „Fără bară laterală”. Faceți clic pe „Actualizare” pentru a salva modificările și puteți face din nou clic pe Vizualizare produs pentru a vedea modificările. Deci acesta a fost un exemplu de cum să creați un produs simplu. Puteți adăuga câte produse și categorii doriți folosind aceeași procedură. Dacă faceți clic pe butonul Categorie de pe pagina Produs, se va deschide o Pagina Nouă a categoriei în care vor fi afișate toate produsele din această categorie. În acest moment, acest lucru va fi foarte bland, dar mai târziu vom proiecta și această pagină.

În continuare, să învățăm cum să creăm un produs variabil. Din nou, trebuie să mergem la pagina „Adăugați un produs nou”, ca mai devreme. De data aceasta, permiteți-ne să creăm un produs variabil pentru bărbați. Dați titlul și descrierea produsului așa cum am făcut mai devreme. Rețineți că aceasta nu este descrierea principală, ci descrierea mică suplimentară care este afișată mai jos, descrierea principală trebuie scrisă în „Descrierea scurtă a produsului”. Aici vom schimba „Date despre produs” în „Produs variabil”. Toate celelalte setări, cum ar fi Inventar, Livrare, Produse legate etc. sunt similare cu Produsul Simplu pe care l-am creat mai devreme, așa că puteți completa aceste detalii pe cont propriu.

Acum faceți clic pe „Atribute”, unde vom adăuga noi atribute sau caracteristici produsului nostru. Faceți clic pe „Adăugați” pentru a face asta. În continuare, așa cum se arată în imagine, vom crea noi atribute ale produsului, cum ar fi dimensiunea, culoarea etc. Mai întâi, să punem Dimensiune în caseta „Nume”. În caseta „Valori”, scrieți, mai întâi Mic, urmat de simbolul „|” (fără paranteze). Apăsați tasta „Shift” + tasta de deasupra butonului Enter pentru a scrie acest simbol așa cum se arată în imagine, apoi scrieți Medium și din nou același simbol și apoi Mare. Puteți adăuga câte variabile doriți, cum ar fi S, M, L, XL etc. folosind acel simbol. Bifați caseta de validare „Utilizat pentru toate variantele” și faceți clic pe „Salvare atribut”.

În continuare vom adăuga un alt Atribut. Faceți clic din nou pe butonul „Adăugați”, scrieți „Culoare” în caseta Nume și în caseta Valoare, adăugați numele culorilor dorite separate de simbolul pe care l-am folosit în atributul Dimensiune. Aici scriem „Alb|Albastru” ca fiind cele două opțiuni disponibile. Bifați din nou caseta Folosit pentru variații și faceți clic pe „Salvare atribute”.

Acum, vom aplica aceste atribute produselor noastre. Faceți clic pe „Variații” de sub „Atribute” și selectați „Creați variații din toate atributele” și faceți clic pe „Go”. Faceți clic pe „Da” în fereastra pop-up pentru a verifica această opțiune. Care va deschide opțiunile așa cum se arată în imagine. Puteți vedea că au fost adăugate 6 variante prin combinarea a 3 mărimi cu 2 culori, adică alb mic, albastru mic, alb mediu, albastru mediu, alb mare și albastru mare.

Faceți clic pe primul pentru a deschide setările de editare, așa cum se arată în imagine. În primul rând, trebuie să încărcăm imaginea acestei variații. Faceți clic pe „Încărcați imaginea” și selectați imaginea din galerie. În continuare trebuie să puneți prețul obișnuit al acestei variații. Acesta este un câmp obligatoriu, așa că, chiar dacă prețurile sunt aceleași, trebuie să le scrieți aici. Din nou puteți adăuga prețul de vânzare și îl puteți programa așa cum am făcut în Produsul simplu. Puteți completa detaliile stocului și detaliile de livrare așa cum am făcut în Produsul simplu.

Din nou, va trebui să faceți același proces și pentru alte variații. Așa că faceți clic pe Variationname, încărcați imaginea și puneți prețul Small Blue și așa mai departe și așa mai departe. Aici punem doar imaginea și prețul tuturor variațiilor care sunt necesare, dar puteți pune toate celelalte detalii pe site-ul dvs. conform propriilor termeni. Deasupra numelui variațiilor, puteți vedea opțiunea de a pune „Valoarea implicită a formularului”, unde puteți selecta care variație va fi afișată ca implicită în Caseta de produs atunci când utilizatorii vizualizează produsul.

Alte setări, cum ar fi descrierea scurtă a produsului, vor fi similare cu produsul simplu pe care l-am făcut mai devreme, așa că completați detaliile conform produsului dvs. Același lucru pentru imaginea produsului, unde ar trebui să puneți imaginea pentru varianta implicită, deoarece aceasta va fi afișată mai întâi spectatorilor când vor vedea produsul. Ar trebui să puneți varianta cea mai vândută ca produs implicit. Nu trebuie să puneți o galerie de produse pentru produsele variabile, deoarece vizualizările vor putea vedea diferite imagini ale variației. Creați o nouă categorie „Bărbați” și bifați caseta de selectare a acesteia, așa cum am făcut pentru Produsul simplu. Faceți clic pe Publicare pentru a aplica aceste modificări pe site.

Acum puteți face clic pe Vizualizare produs pentru a vedea cum îl vor vedea spectatorii. După cum puteți vedea în imagine, produsul se va deschide. Aici, deoarece acesta este un produs variabil, veți avea o listă de atribute și valorile acestora în caseta derulantă. Puteți face clic pe aceste casete pentru a vedea diferite variante ale acestui produs. Veți vedea imaginea și prețurile pe care le-ați stabilit pentru variație când faceți clic pe ele. Din nou, puteți schimba și tema paginii de produs dacă nu vă place folosind Setările Astra. Să modificăm setările și să eliminăm bara laterală și să modificăm aspectul conținutului la Lățime completă, așa cum am făcut cu un singur produs pentru consecvență. Puteți face cât mai multe produse variabile cu câte variații doriți, dar va trebui să completați detaliile fiecărei variații așa cum am făcut noi aici. Deci, cu mai multe atribute și cu mai multe valori ale acestora, vei avea mult mai multe variații. Un lucru de remarcat este că prețul produsului este afișat ca interval, deoarece arată prețurile variației cu cel mai mic preț și variația cea mai costisitoare ca interval. Așa că am învățat acum cum să creăm atât produse simple, cât și produse variabile.

Acum haideți să adăugăm aceste produse pe pagina noastră de pornire. Accesați pagina dvs. de pornire și faceți clic pe „Editați cu Elementor”. Derulați în jos până la sfârșitul unde am creat divizorul Noi sosiri. În bara de instrumente Elementor din dreapta, faceți clic pe bara „Search Widgets” și introduceți produs. Selectați elementul Produs și trageți-l și plasați-l în caseta de pe pagina dvs. de sub separatorul Noile Sosiri și veți vedea produsele acolo.

În bara de instrumente „Editați produse”, așa cum puteți vedea în imagine, aveți numărul de coloane și rânduri de produse pe care doriți să le afișați aici, astfel încât să nu fie afișate toate produsele dvs. în această pagină. De asemenea, puteți utiliza categoria de stil pentru a modifica decalajul coloanei și al rândurilor, aliniamentele, chenarul imaginii. Puteți stila și titlul numelui produsului aici, cum ar fi culoarea, fontul, spațierea, topografia, etc. Același lucru pentru stelele de evaluare, atât umplute, cât și goale. În mod similar și pentru preț, puteți schimba fontul, culoarea, topografia etc. atât pentru prețul obișnuit, cât și pentru prețul de vânzare. Următorul este butonul, îl puteți proiecta oricum doriți, cum ar fi culoarea de fundal, culoarea textului, culoarea chenarului și așa mai departe. Folosind Elementor, toate aceste editări sunt atât de ușoare. Trebuie doar să folosești toate instrumentele de editare disponibile și să te joci cu ele și toate rezultatele vor fi în fața ochilor tăi.

Aveți, de asemenea, opțiunea „Vânzări flash” pe care o puteți proiecta pentru a apărea atunci când aveți vânzare, care va afișa un banner flash deasupra produsului dvs. atunci când există o vânzare pe produs. Folosiți-l pentru a atrage clienți pentru produsele dvs. atunci când vă vizitează pagina de pornire. Toate opțiunile de proiectare sunt similare cu ceea ce am învățat până acum, astfel încât să puteți crește prin toate și să selectați designul care vi se potrivește cel mai bine.

În opțiunea Interogare, puteți selecta produsele care doriți să fie afișate în această secțiune. De exemplu, dacă doriți ca produsul pentru femei să fie afișat în această secțiune, atunci în caseta Sursă, selectați „Ultimele produse”, deoarece este o secțiune pentru noi sosiri din caseta derulantă și faceți clic pe „Include”. Apoi, în caseta „include prin”, scrieți termenul și selectați opțiunea Termen, care va fi astfel caseta de termen. În caseta cu termeni, scrieți „Femei” și selectați „Categoria de produs: femei”, așa cum se arată în imagine. Faceți clic pe Actualizare pentru a aplica site-ul dvs. web. În acest fel, puteți crea secțiuni de afișare a produselor în orice parte a site-ului dvs.

Șablon de comerț electronic Elementor

V-am oferit șablonul site-ului de comerț electronic pe care l-am pregătit tocmai acum, aspect pregătit de noi aici, gratuit pe site-ul meu, la acest 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.

Plugins

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 de produs personalizata

Acum vom personaliza pagina noastră de produse folosind aceeași tehnică. Dacă faceți clic pe orice produs acum, va afișa pagina produsului în tema implicită, așa cum am văzut când am creat produsele. Din nou, accesați generatorul Elementortheme și adăugați o nouă temă de produs unic făcând clic pe pictograma + de lângă ea. Puteți folosi șabloanele furnizate aici, dar vom construi unul de la zero pentru acest tutorial. Așa că mai întâi adăugați o secțiune din 2 părți și faceți clic pe fila elemente. Aici puteți vedea toate elementele care sunt realizate special pentru Produse, așa cum se arată în imagine, pe care nu le vedem când construim o pagină.

Mai întâi adăugați un pesmet care seamănă cu clasificarea produsului. Acum puteți edita stilul pesmetului, cum ar fi culoarea, dimensiunea, umplutura etc. folosind bara de instrumente , așa cum puteți vedea în imagine. În partea dreaptă, adăugați elementul „Titlul produsului” din bara laterală și proiectați și stilul acestuia folosind bara de instrumente ca mai devreme. În continuare, să adăugăm imaginea produsului în același mod. Faceți clic pe elementul Imagine a produsului și editați stilul acestuia folosind bara de instrumente. Apoi adăugați descrierea scurtă în mod similar. Puteți adăuga un divizor între titlu și descriere. În continuare trebuie să punem categoria de produse. Pentru aceasta, selectați elementul „Meta produs” și plasați-l sub descriere și stilați-l și el. Apoi adăugați elementul „Preț” dedesubt și îi puteți schimba și stilul din nou. Apoi puneți un buton „Adăugați în coș” sub preț. Deoarece este un produs variabil, acesta va oferi automat opțiunile de variație. Apoi puteți adăuga pictograme sociale și formulare de recenzie, informații suplimentare etc. elementele dorite. Faceți clic pe „Publicați” după ce ați terminat cu adăugarea și proiectarea elementelor dorite pe pagina produsului. În condiția de pe pagina de afișare, includeți „Toate produsele” pentru a da efectul acestui șablon tuturor produselor pe care le-ați creat. Puteți crea diferite teme pentru diferite categorii de produse dacă doriți, va trebui doar să schimbați condiția pentru a o include doar în categoria respectivă. Toate paginile noastre de produse vor fi actualizate la acest șablon pe măsură ce l-am aplicat tuturor produselor.

• Pagină personalizată de plată și coș

Acum vom proiecta paginile personalizate de Checkout și Coș. Paginile Checkout și Cart nu sunt cu generatorul de teme, așa că le vom edita cu Elementor. Accesați pagina Coș și faceți clic pe Editare cu Elementor. La fel ca orice altă pagină, o puteți edita și stila așa cum doriți cu elementele Elementor. Puteți edita textul, pictogramele, butoanele de cupon etc. și puteți stila fontul, culoarea, topografia etc. pe cont propriu până acum. Dar editarea unei părți a temei actuale, cum ar fi titlul Cart, aici nu este posibilă cu Elementor. Pentru a-l edita, va trebui să-l editați singur în WordPress, așa că faceți clic pe „Editați pagina” și în colțul din dreapta jos, bifați caseta de selectare „Dezactivați titlul” din secțiunea dezactivare, așa cum se arată în imagine, așa cum am făcut-o mai devreme când am proiectat tema wordpress.

Puteți edita și proiecta pagina de finalizare a comenzii și puteți utiliza în același mod. În același mod, puteți proiecta pagina „Contul meu” a clienților dvs., deoarece tema implicită a acelei pagini nu este foarte frumoasă. Îl puteți edita cu Elementor. Și am dat, de asemenea, un link mai devreme în care am pus și fișierul zip pentru șabloanele tuturor acestor pagini pentru ca apoi să le proiectați rapid.

Setări Woocommerce

Ați învățat până acum cum să creați pagini folosind Elementor și Theme Builder și construirea site-ului dvs. este completă. Acum trebuie să aflăm despre setările Woocommerce pentru a pune în funcțiune acest site web. Accesați tabloul de bord WordPress, faceți clic pe Woocommerce și selectați „Setări”, care va deschide fila de setări generale a Woocommerce, așa cum se arată în imagine.

• setari generale

Aici puteți pune adresa și selecta țările în care doriți să vindeți, să activați taxele, să activați codurile de cupon. Bifați toate aceste casete pentru a le activa. Mai jos vă puteți schimba moneda în funcție de țara dvs.

• Fila Produs

Următoarea filă este fila Produs din rândul de sus al Setări, unde veți găsi multe setări, dintre care majoritatea sunt foarte specifice aici, pe care nu le vom folosi, cu excepția secțiunii de recenzii, unde puteți activa recenzii și evaluări cu stele pentru produse, de asemenea, puteți afișa eticheta de utilizator verificată cumpărătorilor reali în recenzii, așa cum se arată în imagine. De asemenea, puteți pune detaliile de expediere ale produselor precum greutatea, dimensiunea etc.

• Fila de taxe

Apoi, în fila taxe, unde puteți activa sau dezactiva calculul automat al taxelor. Calculul taxelor poate fi foarte complicat în funcție de țara și afacerea dvs., așa că este posibil ca calculul automat să nu funcționeze pentru dvs. Cu toate acestea, aveți opțiuni de a seta taxe pentru diferite adrese de expediere și pe baza articolului din coș. Am dat un link către www.taxjar.com unde puteți obține servicii gratuite și plătite pentru a vă ajuta cu calcularea taxelor. De asemenea, puteți selecta să afișați prețurile cu sau fără taxe în diferite puncte, cum ar fi în magazin, ar trebui să afișați prețul fără taxe și în coș și în casă, ar trebui să includă taxele în general.

• Fila de livrare

Următoarea filă este „Livrare”. Mai întâi faceți clic pe „Adăugați o zonă de expediere”, adăugați numele zonei, anumite regiuni ale zonei și configurați-vă tarifele de expediere sub diferite metode de expediere, așa cum se arată în imagine. Aici, am folosit o metodă cu tarif fix în care am pus o rată fixă ​​de 5 USD, iar alta este metoda de livrare gratuită. Faceți clic pe butonul Editați de mai jos pentru a adăuga o condiție privind suma minimă a comenzii sau cerințele pentru cupon. Aici avem cerința de comandă de minim 50 USD selectată. Puteți adăuga mai multe zone și mai multe metode de expediere și tarife pentru fiecare dintre ele. Aveți, de asemenea, o valoare prestabilită pentru locațiile care nu sunt acoperite de niciuna dintre zonele dvs., cărora nu le-am oferit tarife specifice. Deci, aici am pus o rată implicită de 10 USD pentru acele zone în mod implicit.

• Fila Conturi și confidențialitate

Fila „Conturi și confidențialitate” unde puteți selecta opțiunea de a crea un cont pentru clienți înainte de a cumpăra sau le permiteți să cumpere mai întâi fără cont și mai târziu să creați un cont în momentul în care faceți checkout și, de asemenea, diverse alte opțiuni la crearea cont cum ar fi numele de utilizator, parolele etc., pe care le puteți verifica singur, deoarece sunt foarte explicite. De asemenea, puteți adăuga o politică de confidențialitate așa cum este cerută de lege aici. Aveți, de asemenea, opțiuni cu privire la timpul în care datele personale ale utilizatorilor vor fi șterse în conformitate cu Reținerea datelor cu caracter personal.

• Fila E-mail

De asemenea, avem și fila „E-mail” în care se află setările despre toate e-mailurile automate pe care le veți primi și le veți trimite clienților de pe site, de exemplu pentru o nouă comandă sau o comandă anulată. Puteți edita aici formatul e-mailului pe care îl veți primi sau trimite clientului în toate astfel de situații. Puteți adăuga un plugin în acest scop pentru a primi e-mailuri de mai bună calitate. Accesați Pluginuri și instalați „Kadence Woocommerce Email Designers” și. Folosind acest plugin, puteți proiecta conținutul e-mailului, antetul, subsolul, textul etc. folosind stilurile lor personalizate, care sunt editabile aici, accesând pluginul din bara laterală Woocommerce, așa cum se arată în imagine.

• Plăți

Acum vom merge la fila „Plăți” unde putem selecta metodele de plată permise clienților noștri. Există multe opțiuni disponibile de selectat, dar vom activa „Stripes” și „PayPal” aici făcând clic pe butonul de activare, așa cum se arată în imaginea de mai jos.

1. PayPal

Acum, să setăm mai întâi setările de plată pentru PayPal, așa că faceți clic pe „Configurare” pentru a deschide pagina de setări PayPal unde puteți pune titlul, descrierea casetei de plată și contul dvs. de e-mail PayPal și faceți clic pe „Salvați modificările”. ' pentru a vă integra site-ul web cu PayPal. Dacă nu aveți un PayPal, puteți crea unul accesând site-ul lor și înregistrându-vă gratuit. Va trebui doar să vă înscrieți cu o adresă de e-mail pe care o veți pune în caseta de e-mail PayPal, așa cum se arată în imagine. Este una dintre cele mai populare metode de plată disponibile.

2. Dunga

În continuare, vom configura plățile cu dungi. Așa că faceți clic pe butonul „Gestionați” de lângă acesta. Același mod pentru setările PayPal, pune mai întâi titlul, descrierea pentru caseta de plată. Apoi aveți cheia publicabilă de testare și cheia secretă de testare. Puteți accesa www.stripe.com și puteți crea un cont gratuit acolo, trebuie doar să aveți un cont bancar pentru a crea un cont. Puteți să vă integrați contul stripe pe site-ul dvs. după ce l-ați creat, care este un serviciu gratuit. Pentru asta, după ce v-ați conectat la contul Strie, faceți clic pe „Dezvoltatori” și selectați „Cheile API”, așa cum se arată în imagine. Copiați cheia publicabilă care apare aici pe site-ul dvs. web în caseta pentru cheile publicabile și cheia secretă în caseta cheie secretă. Faceți clic pe „Salvați modificările” și acum site-ul dvs. web este gata să accepte plăți cu cardul de credit de oriunde din lume la o taxă de tranzacție foarte mică. Aici facem, așa că avem încă activat butonul Vizualizare date de testare pe contul nostru stripe, iar pe pagina de setări Woocommerce am bifat caseta „Activați modul de testare”, dar când sunteți gata să intrați în direct cu sistemul dvs. de plată, dezactivați-l .

Acum puteți testa site-ul dvs. plasând o comandă și cumpărând ceva și, de asemenea, puteți efectua plata pentru a verifica dacă totul este în ordine. Pe pagina Contul meu, clienții vor avea propriul tablou de bord personal unde își pot verifica, edita sau anula comenzile, editați adresa de livrare și de facturare, configurați metodele de plată și detaliile contului. Toate vizualizarea comenzilor lor anterioare vor fi, de asemenea, afișate în lista de comenzi cu starea lor.

Optimizare pentru mobil

Optimizarea pentru dispozitive mobile înseamnă a face site-ul web să arate ușor de utilizat pentru dispozitivele mobile. Optimizarea mobilă este foarte importantă în scenariul de astăzi, deoarece a) mulți oameni folosesc dispozitive mobile pentru a naviga pe internet și b) Conform noului algoritm Google, dacă site-ul dvs. nu este optimizat pentru mobil, atunci vă vor scădea rangul, ceea ce poate fi catastrofal pentru dvs. trafic pe site și SEO.

Optimizarea mobilă este simplă folosind editorul Elementor. Să revenim din nou la tabloul de bord Elementor. În partea de jos a barei de instrumente veți găsi butonul „Mod de răspuns”, făcând clic pe care se va deschide o listă derulantă care arată 3 opțiuni, adică. Desktop, tabletă și mobil. Până acum, ne proiectam site-ul web pe baza modului în care ar arăta pentru utilizatorii de pe desktop. Acum faceți clic pe „Tabletă” pentru a obține o previzualizare a modului în care ar arăta pe un browser pentru tabletă. În mod similar, îl puteți verifica și pentru modul „Mobil”. Puteți edita pagina web dacă ceva pare neregulat sau dacă nu pare atrăgător din punct de vedere vizual.

Aici, după cum puteți vedea în imagine, primul titlu este prea mare pentru modul tabletă, iar „50% REDUCERE” este prea mic, așa că va trebui să îl ajustați. Verificați toate elementele paginilor pentru a vedea dacă ceva trebuie reproiectat. Toate aceste modificări vor fi aplicabile în modul Tabletă când faceți clic pe Actualizare. Același lucru se va aplica și pentru modul mobil. Reglați dimensiunea textelor titlurilor, alinierea butoanelor, bannerelor și titlurilor.

Puteți dezactiva unele dintre secțiunile de care aveți nevoie pe versiunea pentru mobil sau tabletă, dacă credeți că nu este important pentru ele. Pentru asta, selectați secțiunea pe care doriți să o ascundeți, mergeți la categoria avansată din bara de instrumente „Editați secțiune”, faceți clic pe „Responsiv” și sub Vizibilitate, puteți alege să ascundeți secțiunea pe versiunea desktop, tabletă sau mobilă, așa cum se arată în imaginea.Același lucru pe care îl puteți face cu alte secțiuni sau elemente. Puteți proiecta totul diferit pentru modul tabletă sau mobil, cum ar fi imagini de fundal, dimensiunea fontului sau orice altceva.

Formular de contact

Acum haideți să mergem mai departe și să învățăm cum să creăm o pagină „Contact” unde vizitatorii pot completa informațiile de contact și aceasta va ajunge direct la adresa dvs. de e-mail. Designul de bază al paginii, îl puteți face pe cont propriu utilizând editorul Elementor sau Personalizarea temei. Singurul lucru important este formularul de contact așa cum se arată în imagine. Așa că căutați formularul pe bara de instrumente Elementor și îl trageți și plasați pe secțiune și puteți edita textul și designul formularului folosind bara de instrumente „Editați formular”, ceea ce cred că ați putea să o faceți pe cont propriu. Există multe setări avansate în bara de instrumente Edit Form, care nu sunt parcurse aici, ci formularul de bază pe care îl puteți crea.

Cupoane

Pentru a adăuga cupoane pe site-ul dvs., faceți clic pe „+ Nou” din bara de sus de lângă butonul de personalizare și selectați Cupoane. Cupoanele de pe bara de instrumente laterală WordPress sunt situate în secțiunea „Marketing”, așa cum se arată în imagine. Aici, puteți adăuga un nou cod de cupon, selectați tipul de reducere ca reducere procentuală, reducere fixă ​​la coș sau reducere fixă ​​la produs, puneți suma sau procentul reducerii și data de expirare pentru cupon. În „Restricții de utilizare”, puteți pune condiții precum cheltuieli minime, utilizare individuală sau combinare cu alte cupoane, puteți include sau exclude produse sau categorii de produse din cupon. Sub Limita de utilizare, puteți selecta de câte ori poate fi utilizat acest cupon sau îl puteți limita pentru un anumit produs și puteți limita utilizarea de către un singur client. Faceți clic pe Publicați pentru a aplica acest cupon pe site și testați-l pe pagina Coș, aplicând codul cuponului în timp ce faceți o achiziție.

Sper cu adevărat că acest tutorial a fost benefic pentru cititori și acum puteți crea un site web de la zero pe cont propriu. Dacă aveți nevoie de ajutor, puteți să vizitați site-ul meu și pagina mea de Facebook și să lăsați un comentariu. Am o mulțime de alte resurse despre construirea site-ului web și utilizarea Elementor acolo pe care le puteți consulta. Vă mulțumim că ați citit acest tutorial și feedback-urile și întrebările dvs. sunt întotdeauna binevenite.