O administrare eficientă a magazinului tău online începe cu o structură clară a produselor. În acest ghid vei învăța pas cu pas tot ce trebuie să știi despre creare atribute WooCommerce – de la definirea atributelor globale, până la configurarea swatches-urilor vizuale cu tema Woodmart. Atributele nu sunt doar utile pentru variantele de produs, ci și esențiale pentru filtrare, organizare și o experiență mai bună pentru clienți.
🔹 1. Ce sunt atributele?
Atributele sunt caracteristici generale ale produselor, precum: Mărime, Culoare, Material, Brand, etc.
✅ Sunt folosite pentru:
- Crearea produselor variabile (cu opțiuni selectabile)
- Filtrare în magazin
- Afișare pe pagini de produs (ex: în tabelul de informații suplimentare)
- Etichete vizuale (swatches) cu tema Woodmart
🔹 2. Cum accesezi atributele?
Dashboard > Produse > Atribute
🔹 3. Crearea unui nou atribut
3.1 Nume
Este denumirea care apare pe site, în filtre și la selectare (ex: „Culoare” sau „Mărime”).
3.2 Descriptor
Slug-ul atributului. Trebuie să fie scurt, fără spații, doar litere mici și liniuțe.
Ex: culoare, marime
⚠️ Nu trebuie să depășească 28 de caractere.
3.3 Activezi arhivele?
✅ Bifează dacă vrei să existe pagini dedicate (ex: toate produsele cu culoarea „Roșu”).
Folosit mai rar, dar poate ajuta la SEO.
3.4 Ordine de sortare implicită
Alege cum să apară valorile acestui atribut în liste și filtre:
- Alfabetic
- Nume numeric
- Ordine personalizată (recomandat pentru a controla manual ordinea)
🔹 4. Funcționalități Woodmart pentru atribute
Tema Woodmart permite afișarea vizuală a atributelor sub formă de swatches (buline, pătrate, culori, pictograme etc.).
La crearea sau editarea unui atribut, vei vedea o zonă suplimentară numită Swatch.
4.1 Stil Swatch (Stil 1, 2, 3, 4)
Permite alegerea modului în care sunt afișate valorile atributului:
- Culoare – buline colorate (ideal pentru „Culoare”)
- Imagine – dacă vrei să folosești pictograme sau fotografii mici
- Text simplu – pentru „Mărime” (S, M, L, etc.)
4.2 Forma eșantioanelor
Cum arată swatch-urile:
- Rotund
- Pătrat
- Rotunjite
4.3 Dimensiunea eșantionului
Control vizual al dimensiunii: XS, M, L, XL etc.
⚠️ Dacă vrei un aspect uniform, folosește aceeași dimensiune pentru toate atributele.
4.4 Afișarea etichetei de atribut pe produse
✅ Bifează pentru ca, de exemplu, „Culoare: Roșu” să apară ca etichetă vizuală peste imaginea produsului (în grilă).
4.5 Modificarea imaginii produsului la clic pe atribut
✅ Activează pentru a schimba imaginea principală în funcție de atribut (ex: clic pe „Roșu” → apare poza cu produsul roșu).
Funcționează bine cu produse variabile și imagini asociate fiecărei variații.
4.6 Icon pentru atribut
Poți încărca o pictogramă SVG sau PNG care va apărea în tabelul cu informații suplimentare.
Ex: un simbol pentru „Material: Bumbac”
4.7 Indiciu conținut (tooltip)
Textul va apărea ca „bulină informativă” atunci când cineva trece cu mouse-ul peste acel atribut.
Ex: „Acest material este potrivit pentru piele sensibilă.”
🧪 Recomandări practice
| Scenariu | Recomandare |
|---|---|
| Ai opțiuni vizuale (culori, modele) | Folosește swatch colorat sau cu imagine |
| Vrei opțiuni simple (ex: Mărimi) | Alege text swatch + pătrat / rotund, după stilul magazinului |
| Vrei filtre eficiente în sidebar | Activează arhivele + setează ordinea atributelor |
| Produse variabile cu imagine diferită | Bifează „Modifică imaginea la clic” și adaugă imagine fiecărei variații |
🔹 5. Adăugarea valorilor (termeni) unui atribut
După ce creezi un atribut (ex: „Culoare”), apasă pe „Configurează termenii” pentru a adăuga opțiunile.
Ex: la atributul „Culoare”, adaugi Roșu, Negru, Verde etc.
🔸 5.1 Nume
✅ Este denumirea care apare pe site-ul tău.
Exemplu:
- Roșu
- Verde închis
- Negru mat
🔎 Acesta este textul vizibil pentru utilizator, inclus în filtre, dropdownuri și etichete.
🔸 5.2 Descriptor (Slug)
✅ Este o variantă URL-friendly a numelui. Se generează automat, dar îl poți seta manual.
Reguli:
- Fără spații
- Doar litere mici, cifre, cratime
- Fără caractere speciale sau diacritice
Exemplu:
rosu,verde-inchis,negru-mat
📌 Folosit pentru URL-ul paginii de arhivă (dacă e activată).
🔸 5.3 Descriere
✅ Este opțională. Unele teme (inclusiv Woodmart) o pot afișa în tabelul de informații suplimentare sau în filtre.
Exemplu:
- „Roșu intens, ideal pentru vară”
- „Culoare neutră, se potrivește cu orice ținută”
🔎 Dacă nu o folosești, poți lăsa câmpul gol – nu afectează funcționalitatea.
🔹 5.4 Setări vizuale (Swatch – doar cu tema Woodmart)
Woodmart permite afișarea grafică a fiecărui termen (ex: bulină colorată sau imagine). Poți alege între trei variante:
✅ A. Eșantion de imagine (Image Swatch)
Folosit când vrei să afișezi o imagine miniaturală pentru o variantă (ex: imprimeu floral, textură, model de gresie etc.).
🖼️ Încarcă imaginea reprezentativă. Aceasta va apărea:
- În selectorul de opțiuni (pe pagină de produs)
- În filtre (dacă e activat)
- În galerie, dacă e configurat să schimbe imaginea produsului
✅ B. Mostră de culoare (Color Swatch)
Folosit pentru a afișa o bulină colorată (ex: roșu, verde, negru). Simplu, curat și eficient.
🎨 Selectează culoarea din paletă sau introdu codul HEX (ex: #e41b17 pentru roșu aprins)
📌 Ideal pentru atribute de tip Culoare, Finisaj, Material.
📌 Ordinea atributelor se poate schimba prin iconița de tip hamburger din partea dreaptă
✅ C. Text Swatch
Folosește doar text (ex: S, M, L sau „Unic”, „Clasic”, „Extra”) – apare într-un buton vizual, nu într-un dropdown standard.
📌 Perfect pentru atribute precum „Mărime”, „Tip mânere”, „Nivel”.
🔸 5.5 Termen – Indiciu conținut (Tooltip)
✅ Text opțional care apare ca tooltip (baloan de informare) în tabelul cu informații suplimentare sau când utilizatorul trece cu cursorul peste acel atribut.
Exemplu:
- „Culoare potrivită pentru piele deschisă”
- „Recomandat pentru exterior, rezistent la UV”
🧠 Ideal pentru a oferi informații suplimentare fără să încarci pagina.
📌 Recomandări:
| Situație | Tip swatch recomandat | Observații |
|---|---|---|
| Culori solide | Mostră de culoare | Rapid și eficient |
| Texturi, modele, imprimeuri | Eșantion de imagine | Oferă context vizual |
| Mărimi, tipuri, text simplu | Text swatch | Clar și ușor de citit |
