Elementor și WooCommerce împreună formează una dintre cele mai flexibile combinații pentru construirea de magazine online personalizate pe WordPress. În timp ce WooCommerce se ocupă de funcționalitatea de comerț electronic (produse, coș, finalizare a comenzii, plăți), Elementor îți oferă control vizual asupra modului în care arată și funcționează paginile magazinului. În acest ghid, vom parcurge construirea paginilor cheie WooCommerce cu Elementor, inclusiv paginile de produse, arhivele magazinului și experiența coșului.
Aceast tutorial presupune că ai instalat WordPress, WooCommerce și Elementor Pro. Elementor Pro este necesar pentru widget-urile WooCommerce - versiunea gratuită a Elementor nu le include.
Ce Ai Nevoie Înainte de a Începe
| Cerință | De ce este necesară | Unde o poți obține |
|---|---|---|
| WordPress 6.x+ | Platformă CMS de bază | wordpress.org |
| WooCommerce (gratuit) | Funcționalitate de comerț electronic | Directorul de pluginuri WordPress |
| Elementor Pro | Widget-uri WooCommerce și Theme Builder | PluginTheme.net |
| Temă compatibilă | Fundament pentru magazinul tău | Ghid de selecție a temelor |
| Produse de probă | Conținut pentru proiectarea șabloanelor | WooCommerce → Instrumente → Importă date de probă |
Înțelegerea Constructorului WooCommerce de la Elementor
Elementor Pro include un Constructor WooCommerce dedicat în cadrul sistemului său Theme Builder. Acest lucru îți permite să creezi șabloane personalizate pentru:
- Pagină de Produs Unic: Controlează aspectul paginilor individuale de produse
- Arhivă de Produse: Personalizează pagina magazinului și paginile de categorii
- Pagină de Coș: Proiectează un aspect personalizat pentru coș
- Pagină de Finalizare a Comenzii: Personalizează aspectul formularului de finalizare a comenzii
- Pagină Contul Meu: Redesign dashboard-ul contului clientului
Fiecare șablon folosește widget-uri specifice WooCommerce care extrag date dinamice din produsele tale. Asta înseamnă că proiectezi aspectul o dată, iar acesta se aplică automat tuturor produselor (sau categoriilor specifice).
Construirea unei Pagini de Produs Personalizate
Pasul 1: Creează Șablonul
- Navighează la Șabloane → Theme Builder în admin-ul tău WordPress
- Click pe "Adaugă Nou" și selectează "Produs Unic" ca tip de șablon
- Alege un șablon de pagină de produs pre-construit sau începe de la un canvas gol
- Editorul Elementor se va deschide cu widget-uri WooCommerce disponibile în panou
Pasul 2: Adaugă Widget-uri WooCommerce
Widget-uri cheie WooCommerce pentru paginile de produse:
| Widget | Ce Afișează | Opțiuni de Personalizare |
|---|---|---|
| Imagini Produs | Galerie cu miniaturi și lightbox | Aspect galerie, poziție miniatură, comutator zoom |
| Titlu Produs | Numele produsului (H1) | Tipografie, culoare, aliniere |
| Preț Produs | Preț normal și preț de reducere | Tipografie, culoare etichetă de reducere, aspect |
| Rating Produs | Rating cu stele din recenzii | Culoare stele, dimensiune, aliniere |
| Adaugă în Coș | Selector de cantitate + buton de adăugare în coș | Stil buton, culori, aspect cantitate |
| Descriere Scurtă Produs | Sumar scurt al produsului | Tipografie, spațiere |
| Meta Produs | SKU, categorii, etichete | Aspect, tipografie, separator |
| Tab-uri Date Produs | Tab-uri descriere, recenzii, informații suplimentare | Stil tab, margine, spațiere |
| Produse Asemănătoare | Produse din aceeași categorie | Coloane, număr, ordine |
| Upsells | Upsell-uri legate manual |
Pasul 3: Cele mai bune practici pentru aspect
O pagină de produs cu o rată de conversie ridicată urmează un model de aspect testat:
- Deasupra fold-ului: Imagini ale produsului (stânga, 50-60% lățime) + titlu, preț, evaluare, descriere scurtă și buton de adăugare în coș (dreapta, 40-50% lățime)
- Sub fold: Tab-uri cu datele produsului (descriere completă, specificații, recenzii)
- Secțiunea de jos: Produse conexe și oferte suplimentare într-un grid (3-4 coloane)
- Elemente de încredere: Informații despre livrare, politica de returnare, insigne de securitate lângă butonul de adăugare în coș
Menține butonul de adăugare în coș vizibil fără a derula atât pe desktop, cât și pe mobil. Folosește culori contrastante pentru buton pentru a atrage atenția.
Personalizarea paginii de magazin (Arhiva produselor)
Pasul 1: Creează un șablon de arhivă
- Accesează Șabloane → Creator de teme → Arhiva produselor
- Adaugă un nou șablon și selectează "Arhiva produselor" ca tip
- Atribuie condiții de afișare (toate arhivele, categorii specifice sau pagini de etichete)
Pasul 2: Configurează grila de produse
Widget-ul Produse arhivă afișează lista ta de produse cu aceste opțiuni:
- Coloane: 2-6 coloane (3-4 funcționează bine pentru majoritatea magazinelor)
- Produse pe pagină: 12-24 este standard pentru experiența utilizatorului
- Paginare: Pagini numerotate, buton "încarcă mai mult" sau derulare infinită
- Dropdown de sortare: Permite clienților să sorteze după preț, popularitate sau evaluare
- Insigna de reducere: Personalizează poziția, culoarea și textul insignei de reducere
Pentru magazinele cu multe produse, adaugă filtrare pe categorii deasupra grilei. Poți folosi widget-ul Menu de la Elementor sau un plugin de filtrare a produselor precum JetWooBuilder pentru opțiuni avansate de filtrare.
Proiectarea paginii de coș
Elementor Pro îți permite să personalizezi aspectul paginii de coș. O pagină de coș bună ar trebui să:
- Afișeze imagini ale produselor, nume, prețuri și cantități într-un tabel curat
- Să arate totalul curent în mod proeminent
- Să includă un buton "Continuă cumpărăturile" care să revină la pagina de magazin
- Să afișeze un calculator de livrare astfel încât clienții să poată estima costurile de livrare
- Să arate produse de vânzare încrucișată sub tabelul de coș
Widget-ul Cart de la Elementor înlocuiește aspectul implicit al coșului WooCommerce cu un editor vizual în care poți stiliza fiecare element—margini de tabel, culori ale butoanelor, tipografie și spațiere.
Personalizarea paginii de finalizare a comenzii
Paginile de finalizare a comenzii au un impact direct asupra ratei tale de conversie. Widget-ul Checkout de la Elementor Pro oferă control asupra:
- Aspectul formularului: Formular de facturare/livrare cu o coloană sau două coloane
- Poziția sumarului comenzii: Lângă formular sau deasupra/ sub
- Stilizarea butonului: Culoarea, dimensiunea și textul butonului de plasare a comenzii
- Secțiunea de plată: Dispunere cu buton radio sau tab-uri pentru metodele de plată
- Insigne de încredere: Adaugă pictograme de securitate și text de garanție lângă formularul de plată
Pentru sfaturi de optimizare a conversiei la finalizarea comenzii, vezi ghidul nostru de optimizare a finalizării comenzii WooCommerce.
Considerații de performanță
Elementor adaugă CSS și JavaScript pe paginile tale. Pentru un magazin WooCommerce, performanța este direct legată de conversii. Ține cont de aceste sfaturi:
- Folosește containere Flexbox în loc de secțiuni/coloane pentru mai puține elemente DOM
- Optimizează imaginile produselor: Folosește format WebP, dimensiuni corecte și încărcare lazy. Vezi ghidul nostru de optimizare a imaginilor
- Limitați numărul de widgeturi: Fiecare widget adaugă markup; folosiți doar ceea ce aveți nevoie
- Activați funcțiile de performanță ale Elementor: Îmbunătățirea încărcării resurselor, Îmbunătățirea încărcării CSS
- Utilizați un plugin de caching: WP Rocket funcționează bine cu setările Elementor WooCommerce
Addons esențiale pentru Elementor WooCommerce
Aceste addonuri Elementor extind capacitățile de construire WooCommerce:
| Add-on | Funcții cheie WooCommerce |
|---|---|
| JetWooBuilder | Grile avansate de produse, șabloane personalizate pentru arhive, layout-uri pentru produse unice cu logică condițională |
| Essential Addons Pro | Grilă de produse, carusel de produse, finalizare comandă WooCommerce |
| Happy Elementor Addons | Grilă de categorii de produse, mini coș, carusel de produse |
Întrebări frecvente
Am nevoie de Elementor Pro pentru WooCommerce sau funcționează versiunea gratuită?
Elementor Pro este necesar pentru widgeturile specifice WooCommerce (Imagini produse, Adaugă în coș, Tab-uri date produs, Coș, Finalizare comandă etc.). Versiunea gratuită a Elementor nu include aceste widgeturi. Puteți folosi versiunea gratuită pentru a proiecta pagini obișnuite, dar șabloanele personalizate WooCommerce necesită Elementor Pro.
Pot folosi Elementor pentru pagina de finalizare a comenzii?
Da. Elementor Pro include un widget de Finalizare comandă care înlocuiește layout-ul implicit de finalizare a comenzii WooCommerce. Puteți personaliza câmpurile formularului, rezumatul comenzii, secțiunea de plată și layout-ul general. Totuși, fiți atenți la personalizările grele care ar putea afecta integrările cu gateway-urile de plată—testați întotdeauna fluxul complet de achiziție după ce faceți modificări.
Cum pot crea layout-uri diferite pentru paginile de produse pentru categorii diferite?
În Theme Builder-ul Elementor, puteți asigna condiții de afișare fiecărui șablon. Creați un șablon de pagină de produs pentru îmbrăcăminte (cu selecții de mărime/culoare), altul pentru produse digitale (fără informații de livrare) și așa mai departe. Fiecare șablon se aplică doar produselor din categoriile specificate.
Încetinește Elementor WooCommerce?
Elementor adaugă overhead CSS și JavaScript pe orice pagină. Pe paginile de produse cu multe widgeturi, acest lucru poate crește timpii de încărcare cu 0.5-1.5 secunde comparativ cu șabloanele implicite WooCommerce. Utilizarea funcțiilor de performanță încorporate ale Elementor, optimizarea imaginilor și utilizarea unui plugin de caching ajută la atenuarea acestui impact. Pentru magazinele critice din punct de vedere al performanței, luați în considerare un tema mai ușoară, cum ar fi GeneratePress.
Pot folosi șabloanele Elementor WooCommerce cu orice temă?
Majoritatea șabloanelor Elementor WooCommerce funcționează cu orice temă care suportă WooCommerce. Totuși, unele teme pot avea propriile stiluri pentru paginile de produse care intră în conflict cu șabloanele Elementor. Temele precum Astra, GeneratePress și OceanWP sunt concepute pentru a funcționa fără probleme cu Elementor și oferă cea mai curată bază pentru șabloane personalizate.
Obțineți Elementor Pro pentru construirea magazinului WooCommerce
Accesați toate widgeturile WooCommerce, Theme Builder și 100+ șabloane Pro. Creați pagini de produse personalizate, arhive de magazin și layout-uri de finalizare a comenzii vizual.
Răsfoiți Elementor Pro →
