# Woo terméklista: egyéni termékkártya (Egyéni bőr)

> Saját terméklista-kártya építése Elementor-sablonból a Woo terméklista widgethez, Woo Builder widgetekkel vagy dinamikus címkékkel és ACF mezőkkel.

A **Woo terméklista** widget három kész kártyastílust ad (**Stílus 1, 2, 3**), de a kártyát saját Elementor-sablonból is felépítheted. Így a termék képe, címe, ára és a gombok pontosan ott és úgy állnak, ahogy te szeretnéd. A widget a Pro változat része, és a **The Plus Addons → Widgets** oldalon be kell kapcsolni.

Ez a fejezet két módszert mutat:

1. a **Woo Builder** widgetekkel (**Woo termékképek**, **Woo egyszerű termékoldal**, **Woo termékár**), amelyek maguktól azt a terméket mutatják, amelyiken a kártya áll;
2. az Elementor Pro **dinamikus címkéivel** és opcionálisan az ACF (Advanced Custom Fields) mezőivel.

## Mire lesz szükséged

- Aktív WooCommerce, néhány közzétett termékkel.
- Az első módszerhez a **Woo termékképek**, a **Woo egyszerű termékoldal** és a **Woo termékár** widget bekapcsolva a **The Plus Addons → Widgets** oldalon. Elementor Pro nem kell hozzá.
- A második módszerhez Elementor Pro (a dinamikus címkék miatt). Az Advanced Custom Fields csak akkor kell, ha extra mezőket (például háttérszínt vagy értékelést) is megjelenítenél, egyébként elhagyható.

## 1. A kártyasablon elkészítése Woo Builder widgetekkel

1. A vezérlőpulton nyisd meg a **Sablonok** menüt, kattints az **Új hozzáadása** gombra, válaszd a sablontípust (szakasz vagy konténer), adj nevet a sablonnak (például „Termékkártya”), és hozd létre.
2. Tegyél a sablonba egy konténert, adj neki háttérszínt és szegélyt. Kétoszlopos kártyához két oszlopot (vagy egymás melletti konténert) használj, egymás alá rendezett kártyához elég az oszlop irány.
3. Húzd be a **Woo termékképek** widgetet. Az elrendezés mezőjében válaszd az egyetlen képet mutató értéket (a másik érték a képgaléria).
4. Válaszd ki a megfelelő képméretet, és kapcsold be a hivatkozás kapcsolót, hogy a kép a termék oldalára vigyen.
5. Húzd be a **Woo egyszerű termékoldal** widgetet. Az ismétlő listából töröld a felesleges elemeket, és csak a termék címe (`title`) és a rövid leírása (`short_description`) maradjon. Az elemeket megnyitva a típusuk átállítható, a **+ Elem hozzáadása** gombbal új elem vehető fel.
6. Húzd be a **Woo termékár** widgetet. Az ismétlő listában hagyd meg az ár (`price`) és a kosárba gomb (`add_to_cart`) elemet, a többit töröld.
7. Stílusozd a widgeteket a **Stílus** fülön, majd tedd közzé a sablont.

A **Woo egyszerű termékoldal** és a **Woo termékár** ugyanúgy működik, mint a termékoldal-sablonoknál: minden elem a kártyán éppen megjelenő termék adatát írja ki.

## 2. A kártyasablon dinamikus címkékkel és ACF mezőkkel

Ha nem a Woo Builder widgeteket használod, a kártya elemeit az Elementor Pro dinamikus címkéi töltik ki. Minden termékspecifikus értéket dinamikus címkével kell megadni, különben minden kártyán ugyanaz a rögzített szöveg vagy kép áll.

### ACF mezők felvétele (nem kötelező)

1. Az **ACF → Mezőcsoportok** oldalon hozz létre egy új mezőcsoportot.
2. Adj hozzá egy **színválasztó** típusú mezőt a termék háttérszínének (felirat, mezőnév, típus megadásával), és egy **szám** típusú mezőt az értékelésnek.
3. A **Hely** szabályánál állítsd a mezőcsoportot a **Termék** típusra, és kattints a **Frissítés** gombra.
4. Minden terméknél töltsd ki az új mezők értékét.

### A sablon felépítése

1. Hozz létre a fenti módon egy új sablont, és tegyél bele egy konténert.
2. A háttérszínhez használd a **Sorháttér** widgetet: a beállítás kiválasztása mezőben válaszd az egyszínű háttért, a színmezőnél kattints a dinamikus címkére, és válaszd az ACF alatt a háttérszín mezőt.
3. A termék címkéjéhez használj címsor widgetet, és stílusozd.
4. A termék képéhez használj képwidgetet (például a Plus Addons kreatív képek widgetjét); a kép mezőjénél a dinamikus címkék közül a WooCommerce alatt a termékképet add meg.
5. A kosárba gombhoz használd a **Haladó gombok** widgetet. A gomb típusa legyen CTA gomb, válassz stílust, írd be a gomb szövegét, majd a hivatkozás mezőnél a dinamikus címkék közül a WooCommerce alatt válaszd a kosárba tételt.
6. A termék nevéhez használd az Elementor címsor widgetét, és a cím mezőnél a dinamikus címkék közül a WooCommerce alatt a terméknevet add meg.
7. Az értékeléshez használd az Elementor csillagos értékelés widgetét, és az értékelés mezőnél a dinamikus címkék közül az ACF alatt válaszd az értékelés mezőt.
8. Az árhoz használj címsor widgetet, és a cím mezőnél a dinamikus címkék közül a WooCommerce alatt a termékárat add meg.
9. Tedd közzé a sablont.

Ugyanígy bármilyen más widgetből építhetsz kártyát, ha a termékspecifikus mezőit dinamikus címkével kötöd be.

## A sablon használata a Woo terméklista widgetben

1. Tedd az oldalra a **Woo terméklista** widgetet, és válaszd ki a **Terméklista-típusok** értékét (alapesetben **Normál oldal**).
2. A **Tartalom elrendezése** szakaszban a **Stílus** mezőnél válaszd az **Egyéni bőr** lehetőséget (a negyedik stílusválasztó).
3. A **Sablonminta kiválasztása** listában válaszd ki a sablonodat.
4. Az **Elrendezés** mezőben válaszd ki a rács, a masonry, a metro vagy a karusszel elrendezést.

![A Woo terméklista widget Tartalom elrendezése szakasza az Egyéni bőr stílussal és a kiválasztott Termékkártya sablonnal](./kepek/bejegyzes-termek-listak-1-panel-elrendezes.webp)

*A Woo terméklista widget Tartalom elrendezése szakasza az Egyéni bőr stílussal és a kiválasztott Termékkártya sablonnal* (https://minta-bolt.hu/wp-admin/post.php?post=160&action=elementor)

A képen a negyedik stílusválasztó (Egyéni bőr) van kijelölve, alatta a **Sablonminta kiválasztása** mezőben a saját sablon áll, lejjebb a **Több ismétlődés** kapcsoló és az **Elrendezés** választó látszik.

![A Woo terméklista a saját termékkártya-sablonnal, nyolc kártya rácsban](./kepek/bejegyzes-termek-listak-1-egyeni-bor.webp)

*A Woo terméklista a saját termékkártya-sablonnal, nyolc kártya rácsban* (https://minta-bolt.hu/bt1-egyeni/)

A képen minden kártya a saját termékének címét, rövid leírását, árát és a kosárba gombját mutatja.

### Több sablon váltogatása (Több ismétlődés)

A **Több ismétlődés** kapcsolóval több kártyaterv is megjelenhet ugyanabban a listában. Legfeljebb 5 sablont használhatsz egyszerre. Mindegyik ismétléshez külön sablont kell készítened, és a további sablonokat a megjelenő mezőkben választod ki. A **Sablonminta sorrendje** mezőben a sablonok váltakozását állíthatod: **Alapértelmezett**, **Megfordítás** vagy **Véletlen**.

### Beállítások összefoglalása

| Beállítás | Hol van | Értékek | Alapérték |
|---|---|---|---|
| **Stílus** | Tartalom elrendezése | Stílus 1 és 3 között, **Egyéni bőr** | Stílus 1 |
| **Sablonminta kiválasztása** | Tartalom elrendezése (Egyéni bőr) | a mentett sablonjaid | nincs |
| **Több ismétlődés** | Tartalom elrendezése (Egyéni bőr) | Megjelenítés / Elrejtés | Elrejtés |
| **Sablonminta sorrendje** | Tartalom elrendezése (Több ismétlődés) | Alapértelmezett, Megfordítás, Véletlen | Alapértelmezett |

## Korlátozások

- A **Woo terméklista** widget Pro funkció, az ingyenes bővítményben nincs.
- Többféle sablont legfeljebb ötöt használhatsz együtt.
- A masonry és a metro elrendezéshez a sablont ennek megfelelően kell megtervezni, mert a kártyák mérete eltér egymástól.
- A sima, nem termékfüggő widgetek minden kártyán ugyanazt mutatják. Termékspecifikus érték csak dinamikus címkével vagy Woo Builder widgettel jelenik meg.

## Hibaelhárítás

- **A kártyán nincs termékadat vagy minden kártya ugyanazt mutatja:** a sablon rögzített szöveget vagy képet használ. Állítsd át a mezőket dinamikus címkére, vagy használj Woo Builder widgetet.
- **A sablon nem szerepel a Sablonminta kiválasztása listában:** mentsd el a sablont a **Sablonok → Mentett sablonok** alatt (szakasz vagy konténer típussal), majd töltsd újra a szerkesztőt.
- **A termékkép helye üres:** a terméknek nincs kiemelt képe. Állíts be a termékhez képet.