Utilizarea pachetului de modă Divi pentru a crea un magazin online cu WooCommerce

Noul Divi Fashion Layout Pack are o configurație excelentă pentru orice magazin online. Integrarea modulului magazin și organizarea aspectelor paginii vă oferă un avans semnificativ. Însă, pentru ca acest aspect să funcționeze ca un magazin online funcțional, avem nevoie de pluginul WooCommerce. Și s-ar putea să fiți surprins de cât de bine funcționează împreună Divi și WooCommerce.

În acest tutorial, vă voi arăta cum să creați un magazin online folosind pachetul de machetare Divi's Fashion folosind Woocommerce. Vă voi prezenta cum să configurați corect aspectele pentru a fi personalizate, cum să aduceți viața paginii magazinului cu integrarea Woocommerce și câteva sfaturi despre cum să utilizați elemente ale aspectului dvs. și personalizatorul temei pentru a stiliza paginile Woocommerce.

Pregatirea

De dragul timpului, voi începe acest tutorial cu anumite etape deja finalizate.

1. Instalați și activați tema Divi
2. Instalați și activați WooCommerce
3. Descărcați pachetul Fashion Layout și importați fișierul Fashion_All.json în biblioteca dvs. de teme Divi.
4. Creați pagini noi pentru fiecare aspect.
5. Creați meniul principal.

Dacă sunteți confuz de configurarea enumerată mai sus, puteți găsi instrucțiuni mai detaliate despre cum să configurați aspectul corect, verificând acești 10 pași pentru utilizarea unui pachet de aspect pentru noul dvs. proiect.

După ce ați parcurs cei 5 pași de mai sus, sunteți gata să începeți.

Sneak Peek

Iată o privire la unele dintre paginile WooCommerce pe care le veți crea.

Utilizarea pachetului de modă Divi pentru a crea un magazin online cu WooCommerce

Abonați-vă la canalul nostru Youtube

Schimbați culoarea Global Accent

Pentru a începe lucrurile, vom schimba culoarea accentului global pentru tema Divi. Schimbarea culorii accentului global pentru a se potrivi cu aspectul dvs. este întotdeauna o idee bună, dar este, de asemenea, cel mai simplu mod de a potrivi paginile dvs. WooCommerce cu schema de culori fără a fi nevoie să utilizați CSS personalizat. Veți observa că această culoare de accent este utilizată pentru a stiliza elemente pe fiecare dintre paginile dvs. WooCommerce, cum ar fi pagina produsului, pagina coșului, etc ...

Pentru a schimba culoarea Global Accent, accesați Personalizatorul temei și navigați la Setări generale> Setări aspect și găsiți opțiunea Color Accent Theme în partea de jos.

Folosesc această culoare roz din aspect: # fc7086

Apoi, odată ce îl modificați, salvați și publicați setările și reîmprospătați pagina pentru a permite culorii accentului să actualizeze alte setări din cadrul personalizatorului.

Actualizați setările de tipografie în Customizerul tematic

Deoarece WooCommerce folosește setările implicite ale personalizatorului de temă pentru a stiliza textul pentru fiecare dintre paginile sale, va trebui să vă asigurați că potriviți tipografia utilizată în aspectele dvs. cu setările de tipografie din personalizatorul de temă.

Pentru a vă actualiza tipografia, accesați Divi> Personalizator temă> Setări generale> Tipografie și actualizați următoarele:

Dimensiunea textului corpului: 16 px
Înălțimea liniei corpului: 1.9
Dimensiunea textului antetului: 42
Stilul fontului antet: B
Font antet: Playfair Display
Font corp: Poppins
Culoare legătură corp: [dacă v-ați actualizat culoarea accentului global, această culoare ar trebui să apară aici]

Setați pagina magazinului WooCommerce

WooCommerce vă permite să setați ce pagină doriți să fie pagina de bază a magazinului. Această pagină ar trebui să includă toate categoriile de produse, astfel încât utilizatorii să știe tot ce are de oferit magazinul dvs. Deoarece aspectul nostru are o pagină de magazin, să mergem mai departe și să facem din aceasta pagina noastră de bază a magazinului.

Din tabloul de bord WordPress, accesați WooCommerce> Setări și faceți clic pe fila Produse din partea de sus a paginii. În meniul direct sub fila, selectați Afișare . Apoi selectați pagina Magazin la pagina „Magazin” pe care ați creat-o cu noul aspect al paginii magazinului din pachetul de aspect modă.

Apoi salvați modificările.

Adăugați produse în magazinul dvs.

Este posibil să fi observat că pagina dvs. de magazin, deși are două module de magazin, nu afișează niciun produs. Ei bine, evident, trebuie mai întâi să adăugați produse. Pentru a adăuga un produs nou în magazinul dvs., accesați tabloul de bord WordPress și urmați acești pași:

1. Navigați la Produse> Adăugați un nou
2. Introduceți numele produsului
3. Introduceți descrierea pentru produs
4. Introduceți prețul produsului
5. Introduceți descrierea scurtă pentru produs
6. Adăugați trei categorii noi (vară, recomandate și în vânzare)
7. Selectați categoria pentru produsul dvs. (în acest caz ar fi vara)
8. Adăugați imaginea produsului
9. Publicați / actualizați produsul

Atribuiți categorii produselor dvs.

Pe măsură ce repetați pașii de mai sus pentru a crea mai multe produse noi, asigurați-vă că atribuiți fiecare categorie (# 7 în pașii enumerați mai sus). Pentru acest tutorial, am adăugat 6 produse la categoria „Vară”, 6 produse la categoria „Recomandate” și 1 produs la categoria „La vânzare”.

Actualizați modulele magazinului pe pagina magazinului

Acum că ați creat produsele, puteți adăuga aceste produse pe pagina magazinului dvs. După cum am menționat anterior, aspectul paginii magazinului are deja module de magazin încorporate în aspect. Există unul sub secțiunea de vară și unul sub secțiunea Featured.

Accesați pagina magazinului și implementați constructorul vizual. Apoi, plasați cursorul peste modulul magazinului (momentan nu afișează niciun produs) sub rândul care conține titlul modei de vară și faceți clic pe setările modulului.

Actualizați setările pentru a include doar categoria „Vară”.

Acum ar trebui să vedeți toate produsele adăugate la categoria vară.

Apoi, găsiți modulul magazin sub Titlul produselor prezentate și actualizați setările pentru a include doar categoria Featured.

Adăugați un modul magazin pentru a afișa articolele „la vânzare” pe pagina magazinului

Deoarece avem două categorii (Produse recomandate și Modă de vară) pe pagina magazinului, ar fi ușor să creăm categorii și produse de adăugare folosind modulele deja furnizate în aspect.

Să creăm o altă secțiune pentru a afișa produsele noastre „La vânzare”.

Pentru a face acest lucru, implementați constructorul vizual și utilizați opțiunile de clic dreapta pentru a copia întreaga secțiune care afișează produsele de vară și lipiți-o direct sub secțiunea Produse recomandate.

Acum tot ce trebuie să faceți este să faceți câteva actualizări.

În rândul care afișează titlul, continuați un clic pe textul din modulul text și schimbați titlul pentru a spune „În vânzare” în loc de „Modă de vară”.

Apoi schimbați imaginea din coloana din stânga cu ceva mai compatibil cu produsele dvs. de vânzare.

În cele din urmă, actualizați modulul magazin pentru a include doar categoria „La vânzare”.

Stilizați-vă paginile WooCommerce cu aspectul modei

WooCommerce generează automat propriul set de pagini WooCommerce atunci când instalați pluginul. Acestea includ următoarele:

Magazin - care este un substituent pentru o arhivă de tip postare pentru produsele dvs.
Coș - care folosește codul scurt [woocommerce_cart] pentru a genera conținutul coșului
Checkout - care folosește shortcode-ul [woocommerce_checkout] pentru a afișa informațiile.
Contul meu - care utilizează codul scurt [woocommerce_my_account] pentru a afișa informații specifice despre clienți legate de contul lor.

Deoarece ne-am selectat deja pagina Magazin, nu mai este nevoie de niciun alt design. Dar pentru celelalte 3 pagini WooCommerce, trebuie să le stilizăm pentru a se potrivi cu designul celorlalte machete de pagină.

Adăugarea unui antet de secțiune în coș și în paginile de plată

Să aruncăm o privire mai întâi la pagina Coș. Iată cum arată înainte să îi facem ceva.

Observați că, deoarece ne-am actualizat culoarea accentului global, linkurile și butoanele noastre se potrivesc deja cu schema de culori. Și, din moment ce ne-am actualizat setările de tipografie în Theme Customizer, anteturile și textul corpului se potrivesc și temei noastre.

Dar putem face ceva mai bine decât asta cu doar câteva clicuri. Mai întâi accesați pagina magazinului, implementați constructorul vizual și salvați secțiunea de sus care conține antetul paginii în bibliotecă. Puteți da numele „secțiunea antet pagină”.

Apoi derulați în jos în partea de jos a paginii și găsiți ultima secțiune care conține opțiunea de e-mail și detaliile de contact și salvați-o în biblioteca dvs. cu numele „secțiunea subsolului paginii”.

Acum, editați pagina coșului de cumpărături. Din editorul de pagini implicit, selectați pentru a utiliza Divi Builder, apoi „Utilizați Visual Builder”. Constructorul ar fi trebuit să pună automat shortcode-ul [woocommerce_cart] într-un modul text într-un rând de o coloană dintr-o secțiune obișnuită. Dacă nu, va trebui să creați acest lucru singur. Apoi, faceți clic pe pictograma albastră plus pentru a adăuga o nouă secțiune sub cea curentă, selectați fila „Adăugați din bibliotecă”. Apoi selectați noua secțiune pe care tocmai ați creat-o numită „Secțiunea antet pagină”.

Apoi trageți acea secțiune în partea de sus a paginii dvs. și schimbați textul titlului în „Coșul dvs.”. Asta e!

Puteți repeta acest proces și pentru pagina Checkout.

Proiectarea paginii Contul meu folosind Divi Builder

Acum, că știți cum să adăugați un antet la aceste pagini WooCommerce, continuați și faceți același lucru pentru pagina Contul meu. De data aceasta puteți adăuga secțiunea de subsol pe care ați salvat-o în bibliotecă în partea de jos a acestei pagini.

Poate doriți să oferiți acestei pagini un design distinct pentru a face mai evidentă această pagină care vă gestionează contul. Deci, în loc de fundalul de gradient roz pentru secțiunile de antet și subsol, accesați setările secțiunii pentru fiecare și schimbați culorile de gradient de fundal în # 9599e2 și # 8bc6ec.

Utilizați setările modulului text pentru a stiliza conținutul codului scurt WooCommerce

Deoarece codul scurt WooCommerce se află acum într-un modul text, îl puteți utiliza în avantajul dvs. pentru a stiliza unele dintre aceste elemente în setările modulului.

Să facem acest lucru pentru pagina Contul meu. Din constructorul vizual, actualizați setările modulului text care conține conținutul codului scurt, după cum urmează:

Sub fila de proiectare ...

Dimensiune text text: 20 px
Înălțimea liniei de text: 1.6em

Acum faceți clic pe fila link sub secțiunea Text pentru a stiliza linkurile după cum urmează:

Link Font: Poppins
Link Greutate font: Semi Bold
Dimensiune text link: 27 px
Înălțimea liniei de legătură: 1,5em

Salvează setările

Acum verificați pagina Contului meu.

Folosiți CSS personalizat pentru a stiliza paginile Arhivei WooCommerce?

Unele pagini de arhivă utilizate de WooCommerce nu sunt generate cu un shortcode ca celelalte pagini, prin urmare nu pot fi modificate folosind Divi Builder. Deci, pentru aceste pagini, ar trebui să ieșiți în CSS personalizat.

Să vedem pagina de Categorie recomandată ca exemplu.

Acum, să deschidem Theme Customizer și să facem clic pe CSS suplimentar și să adăugăm următoarele:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Aceasta va stiliza caseta derulantă de sortare, pesmetul și fontul de preț. Restul textului poate fi modificat folosind setările Tipografie din personalizatorul temei.

Gânduri finale

Construirea unui magazin online pentru site-ul dvs. web este mult mai ușoară cu ajutorul acestui pachet de layout uimitor, WooCommerce și Divi Builder. Evident, există unele necesități care trebuie încă făcute, care depășesc domeniul de aplicare al acestui articol. De exemplu, va trebui în continuare să decideți ce gateway de plată să utilizați, cum doriți să gestionați transportul și alte elemente de acțiune mai specifice companiei. Dar WooCommerce ar trebui să poată gestiona majoritatea a ceea ce aveți nevoie.

Dacă este ceva, sper că această postare te-a inspirat să creezi ceva uimitor pe cont propriu.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!