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

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.

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.

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.