Structura paginii — Product Pages care convertesc

Lectură estimată: 4 minute

Estimare pentru text, la un ritm de 180 de cuvinte pe minut. Timpul pentru analizarea codului, exerciții și proiecte se adaugă separat și depinde de ritmul tău.

Structura paginii de produs urmează ordinea în care cumpărătorul ia decizia: mai întâi confirmă că e produsul potrivit și îl vede, apoi verifică detaliile și încrederea, apoi acționează. Fiecare secțiune are un loc și un scop.

Secțiunea de sus (above the fold)

Galerie de imagini (stânga sau sus pe mobil).
Titlu descriptiv.
Preț (și preț tăiat dacă e reducere reală).
Selector de variante (mărime, culoare) — clar, cu feedback la selecție.
Buton „Adaugă în coș" — mare, contrastant, vizibil.
Sub buton: livrare (cost + termen), retur, stoc real.
O propoziție de beneficiu principal.

Secțiunea de mijloc

Descriere: beneficii → detalii → ce include.
Specificații tehnice (tabel, pentru cine le caută).
Ghid de mărimi / compatibilitate, dacă e cazul.
Media suplimentară: produsul în utilizare, video, detalii.

Secțiunea de jos

Recenzii (cu note, text, fotografii de la clienți).
Întrebări și răspunsuri.
Politici pe scurt (retur, garanție, livrare) — recapitulare.
Produse conexe / „cumpărate împreună" — DUPĂ zona de decizie.

Sticky pe mobil

Pe mobil, butonul „Adaugă în coș" + prețul ar trebui să rămână vizibile (sticky) pe măsură ce utilizatorul derulează. Altfel, după ce citește recenziile, trebuie să deruleze înapoi sus ca să cumpere — fricțiune.

Wireframe-ul unei pagini bune

Sus: [galerie 60%] [titlu / 4.7★ (128) / 249 lei / selector culoare / selector mărime / ADAUGĂ ÎN COȘ / "Livrare 15 lei, 1-2 zile • Retur gratuit 30 zile • Pe stoc"]. Mijloc: beneficii (3 puncte), descriere, tabel specificații, ghid mărimi. Jos: 128 recenzii cu poze, Q&A, "Se poartă bine cu" (3 produse). Mobil: bară sticky jos cu preț + buton.

Exercițiu

Redesenează structura unei pagini de produs de-a ta după acest wireframe. Verifică: butonul de cumpărare e vizibil fără scroll pe desktop și sticky pe mobil? Livrarea și returul sunt lângă buton? Produsele conexe sunt după zona de decizie, nu înainte?

Greșeli frecvente

Descriere lungă înainte de buton, care împinge cumpărarea sub 3 scroll-uri.
Produse conexe / upsell înainte ca vizitatorul să decidă pe produsul curent.
Butonul de cumpărare dispare la scroll pe mobil.
Informația despre livrare și retur ascunsă într-o pagină separată.

De reținut

Structura urmează decizia: confirmă+vede → detalii+încredere → acțiune.
Sus: galerie, titlu, preț, variante, buton, livrare/retur/stoc, beneficiu.
Jos: recenzii, Q&A, politici recap, produse conexe (după decizie).
Buton de cumpărare sticky pe mobil.

Pe scurt

Ordonează pagina după cum decide cumpărătorul. Esențialul sus cu livrarea și returul lângă buton, dovezile la mijloc și jos, upsell-ul după decizie.

Structură de pagină cu preț și variantă clare

Așază identitatea produsului, imaginea, prețul, disponibilitatea și alegerea variantei într-o ordine ușor de urmărit. Condițiile importante trebuie să fie accesibile înainte de adăugarea în coș. Descrierea detaliată, specificațiile și întrebările pot veni apoi, fără a ascunde informația esențială în taburi neclare. Verifică legătura dintre selecția variantei și prețul afișat. Butonul trebuie să reflecte starea reală.

Exemplu de lucru

Ordine demo: titlu → imagini → preț/monedă → variantă → disponibilitate → cantitate → coș → livrare/retur → specificații.
Stări: variantă nealeasă, disponibilă, epuizată, eroare.
Control: tastatură, mobil, text lung, zoom și mesaj după adăugare.

Interpretarea rezultatului

Un preț „de la” trebuie explicat prin variantele reale. Nu lăsa o variantă epuizată să pară cumpărabilă doar pentru că produsul părinte are stoc. Mesajul de succes apare după actualizarea reală a coșului, nu imediat la click.

Exercițiu de consolidare

Desenează în text stările butonului și mesajele pentru o variantă indisponibilă și una disponibilă.

Aplicație practică

Sarcina

Proiectează structura unui produs cu variații.

Rezolvare orientativă și verificare

Selecția variantei actualizează prețul, imaginea și stocul. Verifică varianta indisponibilă.

Greșeală de evitat

Informația contradictorie între zone afectează decizia de cumpărare.

Documentație și surse

WooCommerce Documentation — WooCommerce
Learn web development — MDN
Informații pentru consumatori și operatori economici — ANPC