Tot ce trebuie să știți despre modulele de produse WooCommerce din Divi 5

Compatibilitatea cu WooCommerce a fost acum extinsă la Divi 5, oferindu-vă un control complet asupra paginilor de produs fără a vă baza pe șabloanele încorporate ale WooCommerce. Modulele de produse WooCommerce recent integrate vă permit să proiectați machete, ușor de utilizat, care se potrivesc cu marca dvs. și vă ajută să creșteți vânzările, în timp ce atingeți toate caracteristicile Divi 5, inclusiv FlexBox, pentru a construi pagini de produse cu un control modern al aspectului.

În această postare, vom acoperi caracteristicile cheie ale modulelor și vă vom arăta cum să le folosiți pentru următorul dvs. site de comerț electronic Divi 5. Să ne scufundăm.

Ce sunt modulele de produse WooCommerce?

Modulele de produse Woo sunt elemente de conținut specializate din Divi 5, concepute pentru a personaliza paginile de produse și categorii pentru magazinele alimentate de Woo. Aceste module înlocuiesc șabloanele WooCommerce care vin standard cu pluginul, permițându -vă să creați machete personalizabile. Spre deosebire de aceste șabloane tradiționale, modulele Divi 5 permit libertatea creativă, menținând în același timp compatibilitatea cu funcționalitatea de bază a lui WooCommerce.

Eliberarea a 17 module WooCommerce în Divi 5 marchează o etapă semnificativă. Aceste module, care acoperă toate aspectele de proiectare a paginilor de produse și categorii, nu mai sunt în modul moștenire, ceea ce înseamnă că toate sunt pe deplin optimizate pentru arhitectura modernă a Divi 5. Cu această tranziție la o bază mai eficientă, Divi 5 se realizează mai bine, este mai scalabilă și este compatibilă cu viitorul WordPress.

Restul de 8 module Woo, axate pe coșuri și paginile de checkout, sunt de așteptat să se deruleze în curând.

Caracteristici cheie ale modulelor de produs WooCommerce Divi 5

Să trecem peste caracteristicile cheie la care vă puteți aștepta acum, când modulele de produse WooCommerce au fost integrate în Divi 5.

Set de module cuprinzătoare

Primul lot de module de produse WooCommerce din Divi 5 include instrumente concepute pentru a gestiona un aspect specific al proiectării paginii de produs și categorie. Aceste module sunt:

• Woo Pemencrumbs: Afișează trasee de pescuit de navigare pentru a ajuta utilizatorii să navigheze cu ușurință în magazin.
• Notificare Woo: Afișează mesaje de sistem, cum ar fi actualizări, erori sau confirmări.
• Produsul Woo Adăugați în coș: redă un buton Adăugare în coș cu controale de cantitate opțională.
• Descrierea produsului Woo: Rezultă descrierea principală a produsului de formă lungă.
• Galeria de produse Woo: Afișează imagini suplimentare de produs în formate de grilă sau glisare.
• Imagini de produs Woo: Afișează imaginea principală a produsului sau o galerie de imagini.
• Woo Informații despre produs: Afișează detalii despre produs, cum ar fi greutatea, dimensiunile sau atributele.
• Woo Product Meta: arată SKU de produs, categorii și etichete.
• Prețul produsului Woo: afișează prețul produsului, inclusiv prețurile de vânzare.
• Evaluarea produsului Woo: arată numărul mediu de evaluare și recenzii.
• Recenzii despre produse Woo: Permite clienților să vizualizeze și să depună recenzii despre produse.
• Stocul de produse Woo: indică disponibilitatea produsului și nivelul stocurilor.
• Woo Product Tabs: Afișează filele implicite ale produsului pentru descriere, informații suplimentare și recenzii.
• Woo Titlu produs: scoate numele produsului ca titlu personalizabil.
• Woo Product Upsell: promovează produsele Upsell pentru a încuraja achizițiile cu valoare mai mare.
• Produse Woo: Creează rețele de produse personalizabile pentru paginile de categorie.
• Produse înrudite cu woo: afișează produse conexe bazate pe categorii sau etichete.

Împreună, aceste module oferă tot ceea ce aveți nevoie pentru a construi pagini de produse și categorii, de la pesmet de navigare până la afișaje dinamice de produse.

Libertatea creativă

Modulele de produs WooCommerce Divi 5 de la Divi 5 de la constrângerile șabloanelor standard WooCommerce. Cu aceste module, puteți controla pe deplin aspectul, structura și designul paginilor dvs. de produs, creând experiențe unice.

Modulele acceptă conținut dinamic, ceea ce înseamnă că trag datele despre produs direct de la WooCommerce, asigurând actualizări în timp real pentru prețuri, niveluri de stocuri și descrieri. Acest lucru vă permite să construiți pagini care conduc la implicare și conversii fără a necesita pluginuri terțe sau cod personalizat.

Opțiuni de personalizare

Fiecare modul are setări de proiectare extinse, toate gestionabile în cadrul constructorului vizual. Puteți personaliza elemente precum galeriile de produse, ecusoanele de vânzare, butoanele și multe altele cu opțiuni pentru tipografie, culori, distanțare și animații.

De exemplu, puteți ajusta aspectul modulului Woo Product Gallery pentru a afișa imagini într -un glisor sau grilă, stil produsul Woo Adăugați butonul de coș cu culori personalizate și efecte de plutire sau reglați modulul de evaluare a produsului Woo pentru a alinia evaluările de stele perfect cu designul dvs.

Aceste setări vă permit să creați pagini coerente, de marcă, cu ușurință.

Șabloane dinamice cu Teme Builder

Constructorul de teme Divi 5 vă permite să îmbrățișați întregul potențial al modulelor de produse WooCommerce, permițându -vă să creați șabloane globale pentru paginile de produse și categorii. Cu Teme Builder, puteți proiecta un singur șablon care se aplică tuturor produselor și categoriilor din magazinul dvs., asigurând un aspect coerent consistent.

Buclă constructor pentru conținut dinamic WooCommerce

Divi 5 Loop Builder oferă o modalitate alternativă de a construi conținut dinamic Woo. Cu Loop Builder, puteți interoga produse WooCommerce și puteți proiecta bucle de produse flexibile folosind orice element Divi, creând machete, liste și carusele care depășesc structura fixă ​​a modulelor de produse dedicate. Pentru machete cu un singur produs, utilizați modulele de produs Woo; Pentru colecțiile de produse și arhivele, utilizați bucla constructorului.

Cum se folosește modulele de produs WooCommerce Divi 5

Această secțiune vă va parcurge crearea unei pagini de produs în constructorul de teme Divi 5 folosind noile module de produse WooCommerce.

Creați un nou șablon de constructor de teme

Navigați la Divi> Teme Builder în tabloul de bord WordPress. Faceți clic pe + Adăugați șablon nou .

Faceți clic pe Construiți un șablon nou când apare caseta de dialog.

În continuare, va trebui să ne atribuim șablonul produselor noastre. În cadrul produselor , selectați toate produsele pentru a atribui șablonul.

Faceți clic pe Creare șablon pentru a -l atribui.

Faceți clic pe Adăugare corp personalizat . Acest lucru ne va permite să construim corpul șablonului nostru de pagini de produs.

Alegeți Build Custom Body când apare caseta de dialog.

Construiți șablonul de produs

Când se lansează constructorul de teme, puteți construi un șablon de la zero, alegeți un aspect premad sau construiți cu AI. Vom selecta Build de la zero pentru acest tutorial.

Faceți clic pe pictograma verde + pentru a adăuga un nou rând.

Când apar opțiunile , alegeți rândul cu două coloane. Noi rânduri pe care le adăugați la orice pagină DIVI 5 sau șablon vor folosi Flebox în mod implicit. Sistemul de aspect FlexBox Divi 5 vă oferă mai mult control asupra modului în care arată paginile dvs. de produs ca niciodată, inclusiv schimbarea modului în care modulele dvs. de produs WooCommerce se stivuiesc pe diferite dimensiuni ale ecranului.

Derulați în jos pentru a dezvălui opțiunea Module Woo Product . Odată ce ați dat clic, veți avea 17 module Divi 5 Woo și 8 moșteniri (DIVI 4) Module.

Adăugați modulul de imagini Woo Product

Găsiți și selectați modulul de imagini Woo Product și adăugați -l la prima coloană.

Această postare este selectată în mod implicit în câmpul Produs din fila Conținut . Dacă doriți să construiți șablonul folosind un produs existent, alegeți -l din meniul derulant. Aceasta este o modalitate excelentă de a previzualiza modul în care va arăta șablonul dvs. în timp ce îl creați. Nu uitați să -l schimbați înapoi la această postare înainte de salvarea finală.

Extindeți meniul derulant Elements pentru a dezvălui setările. Aici, puteți controla ce imagini afișează în modul, inclusiv imaginea prezentată, imaginile galeriei și ecusonul de vânzare.

Faceți clic pe meniul derulant Image din fila Design pentru a dezvălui setările. Aici, puteți forța imaginea să ocupe tot spațiul disponibil (Force Fullwidth), să adăugați o bordură, o umbră de cutie, să reglați distanțarea sau să adăugați filtre.

De asemenea, puteți modela ecusonul de vânzare prin alocarea unei culori de fundal, text, granițe și multe altele.

Adăugați modulul de titlu al produsului Woo

În a 2 -a coloană, faceți clic pe Woo Produs Module și derulați pentru a selecta modulul de titlu Woo Woo .

Utilizați meniul derulant în câmpul Produs din fila Conținut pentru a selecta un produs și previzualizați cum va arăta în șablon.

În continuare, navigați la fila de proiectare a modulului și extindeți meniul derulant al textului din titlu . Aici, puteți aloca un font și stilul în care doriți.

Adăugați modulul de preț al produsului woo

Sub titlul produsului, faceți clic pentru a adăuga un nou modul. Selectați modulele de produse Woo și derulați pentru a selecta modulul de preț Woo Product .

În fila Design , puteți stiliza fiecare aspect al prețului produsului, inclusiv textul, textul de vânzare, textul de preț nou și multe altele.

Adăugați modulul de evaluare a produsului Woo

În continuare, vom adăuga modulul de evaluare a produsului Woo sub modulul Woo Price.

În fila Conținut sub elemente , puteți alege să afișați sau să ascundeți ratingul STAR și recenziile clienților.

În fila Design , meniul derulant al aspectului vă permite să alegeți cum să afișați ratingul STAR. Elementele pot fi afișate în linie sau stivuite.

Alte opțiuni de styling includ atribuirea unei culori, dimensiunea textului și distanțarea literelor pentru stele și opțiunile de stil pentru textul de evaluare.

Adăugați modulul de descriere a produsului woo

Sub modulul Woo Star Rating, faceți clic pentru a adăuga un nou modul Woo. De data aceasta, vom selecta modulul de descriere a produsului Woo . În fila Conținut , alegeți ce descriere de afișat (descriere sau descriere scurtă).

În fila Design , puteți modela descrierea cu opțiuni pentru font, greutate, stil, aliniere, culoare, dimensiune și multe altele.

Adăugați produsul Woo Adăugare la modulul de coș

În continuare, vom adăuga produsul Woo Adăugare la modulul CART . Acesta va permite clienților dvs. să adauge produsul în coșurile lor și să aleagă orice variații alocate produsului.

Elementele comută fila Conținut vă permit să afișați sau să ascundeți câmpul de cantitate și stocul disponibil. Notă rapidă: Pentru a fi afișată cantitatea de stoc, trebuie să verificați gestionarea stocului în produsul Woo în sine.

Puteți modela etichetele de câmp, textul, meniurile derulante (pentru variații) și butonul pentru a se potrivi cu brandul dvs. din fila Design .

Continuați să adăugați module, cum ar fi modulul meta -produs Woo pentru a afișa numere și categorii SKU.

Puteți adăuga, de asemenea, modulul Woo Product Tabs pentru a afișa o descriere, recenzii și informații suplimentare despre produsul dvs.

Pentru o acoperire maximă, puteți afișa o serie de produse conexe pe șablonul dvs. de produs pentru a încuraja vizitatorii site -ului dvs. să exploreze produse suplimentare din magazinul dvs., crescând șansa unei conversii.

Salvarea șablonului

După ce ați terminat de adăugat module, faceți modificări suplimentare de care aveți nevoie, apoi salvați șablonul făcând clic pe butonul de salvare din colțul din dreapta sus al constructorului de teme.

Apoi, faceți clic pe butonul de ieșire pentru a reveni la tabloul de bord al constructorului de teme.

Înapoi în tabloul de bord al constructorului de teme, faceți clic pe Salvați modificările pentru a salva șablonul și pentru a -l aplica pe produsele Woo.

După cum puteți vedea, crearea unui șablon de produs cu modulele de produse Woo Divi 5 este un proces simplu. Nu vom acoperi toate modulele din acest tutorial, dar folosind toate acestea, puteți crea pagini impresionante de produse sau categorii care vă mențin vizitatorii angajați.

Descărcați fișierele

Descărcați gratuit

Alăturați -vă buletinului informativ Divi și vă vom trimite prin e -mail o copie a pachetului de aspect final al paginii Divi Divi, plus tone de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmați -vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți pur și simplu adresa de e -mail de mai jos și faceți clic pe Descărcare pentru a accesa pachetul de aspect.

Descărcare

V -ați abonat cu succes. Vă rugăm să verificați adresa de e -mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de aspect Divi gratuit săptămânal!

Ce urmează pentru integrarea WooCommerce a Divi 5?

Al doilea lot de module WooCommerce, care se concentrează pe paginile de coșuri și checkout, va fi lansat în următoarele săptămâni, încheind integrarea cu WooCommerce. Aceste completări vor permite utilizatorilor să personalizeze pe deplin întreaga pâlnie de comerț electronic, de la navigarea produsului până la checkout. Divi 5 Beta publică va perfecționa aceste caracteristici în continuare, încorporând feedback -ul utilizatorilor și remedieri suplimentare de erori pentru a asigura stabilitatea.

Dincolo de compatibilitatea și integrarea WooCommerce, Divi 5 continuă să evolueze cu caracteristici recente, cum ar fi modulul de carusel de grup pentru crearea de glisoare dinamice de produse, modulul Lottie pentru adăugarea de animații ușoare și un nou sistem de aspect Flexbox pentru un control îmbunătățit al aspectului. Aceste completări completează modulele Woo, oferind și mai multe posibilități creative pentru site -urile de comerț electronic.

Încercați astăzi modulele de produse Woo Divi 5

Modulele de produse Woo de la Divi 5 vă permit să creați pagini de produse și categorii captivante, cu flexibilitate și creativitate inegalabile. Modulele oferă un amestec de libertate creativă, integrare dinamică a conținutului și performanță, toate într -o interfață intuitivă. De la galerii de produse personalizabile până la machete personalizate prin intermediul constructorului de teme, Divi 5 face ușor crearea de pagini de stocare de înaltă conservare.

Ești gata să te scufunzi în Divi 5? Descărcați cea mai recentă Alpha Public Divi 5 pentru a explora aceste module și vedeți cum vă pot transforma site -ul WooCommerce. Ne -ar plăcea să vă auzim gândurile. Împărtășește -ți feedback -ul în comentarii sau conectează -te cu noi pe canalele noastre de socializare.