Termékmegjelenítő widgetek

A Termékrács, a Terméklista, a Kategóriarács, a Taxonómiai csempék és a WooCommerce-műveletek widget beállításai, lekérdezése és körhintája.

Ezek a Globális widgetek: bármelyik Elementor-oldalra, sablonba behúzhatók, nem kötődnek egy sablontípushoz. A widgetet a Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek oldal Globális widgetek szakaszában kapcsolhatod be, ha ki van kapcsolva. A bekapcsolt widgetek száma a webhely teljesítményére hat, ezért csak a ténylegesen használtakat hagyd bekapcsolva.

A widgetek az Elementor panelen a JetWooBuilder csoportban vannak: Kategóriarács, Terméklista, Termékrács, Taxonómiai csempék, WooCommerce-műveletek.

Termékrács

A Termékrács a termékeket rácsban, vagy körhintában írja ki. Az előbeállításokkal és az archívumtétel sablonokkal működik.

A beállítások a Termékrács szakaszban vannak:

Beállítás	Mit csinál
Előbeállítások	Előre megadott beállításkészlet, amellyel gyorsan megkapod a kívánt kinézetet.
Oszlopok	Az oszlopok száma számítógépen, táblagépen és mobilon külön.
Rámutatás érintőképernyőn	A rámutatási hatás érintőképernyőn is működik.
Azonos oszlopmagasság	Kiegyenlíti a különböző képméretű és szöveghosszú elemek magasságát.
Hézag az oszlopok között, Hézag a sorok között	Külön hézag az oszlopok és a sorok között.
Rejtett termékek	Megjeleníti a „rejtett” katalógus-láthatóságú termékeket is. Ezt az állapotot a termék szerkesztésénél vagy gyorsszerkesztésénél adhatod meg.
Termékelem kattinthatóvá tétele	A termékre kattintva a termékoldalra jut a vásárló.
Megnyitás új ablakban	A termékoldal új ablakban nyílik meg.
Aktuális lekérdezés használata	Csak a termékarchívum-sablonokban működik: az aktuális kategória, címke vagy más osztályozás termékeit írja ki. Például a „Nőknek” kategória oldalán csak a női termékek látszanak.
Termékek száma	Hány termék jelenjen meg.
Lekérdezés alapja	A lekérdezés szempontja: kiemelt, akciós, címke és más osztályozás.
Kizárás ID-k alapján	A kihagyandó termékek azonosítói. Dinamikus címkével kizárhatók például egy adott eladó termékei.
Rendezés alapja	A rendezés szempontja: dátum, módosítás dátuma, azonosító, ár, cím, véletlen, eladások, legjobban értékelt, menüsorrend, cikkszám, aktuális, készletállapot.
Rendelés	Növekvő vagy csökkenő sorrend. A Cím szerinti növekvő rendezés ábécésorrendet ad, a Dátum szerinti csökkenő a legújabbat mutatja elöl.

Az Aktuális lekérdezés használata kikapcsolt állapotában további mezők jelennek meg: Kategóriák bevonása, Kategóriák kizárása, Címke felvétele, Taxonómia slug, Bevonás azonosítók alapján, Készletállapot és Szülőbejegyzések ID-i. Ha az Egyéni lekérdezést (lásd lent) használod, a lekérdezés beállításai nem érvényesek.

A termékkártya elemei és a hozzájuk tartozó beállítások:

Beállítás	Mit csinál
Cím	A termék neve. Kikapcsolva elrejti. Bekapcsolva megjelennek a Közvetlen hivatkozás engedélyezése (a címre kattintva a termékoldalra jut), a HTML-címke (H1 és H6 között, div, span vagy p), a Csonkolás típusa és a Hossz, a Sortörés engedélyezése és a Címhez tartozó buboréksúgó bekapcsolása.
Csonkolás típusa, Hossz	A cím hossza szavakban vagy betűkben. A -1 a teljes címet írja ki, a 0 elrejti.
Bélyegkép-effektus engedélyezése	Rámutatáskor a termék galériájának második képét mutatja. Az effektus típusát a Crocoblock → JetPlugins Settings → JetWooBuilder oldalon állíthatod (lásd Beállítások).
Bélyegkép közvetlen hivatkozásának engedélyezése	A képre kattintva a termékoldalra jut a vásárló.
Képméret	A termékkép mérete.
Jelvények, Jelvény felirata	Jelvények. A feliratban használható a %percentage_sale% és a %numeric_sale% makró, amely az engedmény százalékos vagy számszerű értékét írja ki.
Rövid leírás	A rövid leírás, saját Csonkolás típusa és Hossz beállítással.
Kategóriák, Kategóriák száma	A termék kategóriái. A 0 az összeset kiírja.
Címkék, Címkék száma	A termék címkéi. A 0 az összeset kiírja.
Ár	A termék ára.
Készletállapot	A készletállapot. Bekapcsolva szerkeszthető a Készleten felirat, az Utánrendelhető felirat és a Nincs raktáron felirat.
Értékelés, Nincs értékelés	Az értékelés. A Nincs értékelés kapcsoló akkor is kiírja az üres csillagokat, ha még senki sem értékelte a terméket.
SKU	A cikkszám.
Kosárba gomb	A Kosárba teszem gomb. Bekapcsolva elérhető a Mennyiségmező (több darab is kosárba tehető) és a Használd az alapértelmezett ajax add to cart stílusokat (a WooCommerce alapstílusa az AJAX-os gombhoz).
Nincs találati üzenet	A „nincs találat” értesítés, például ha a widgetet a keresési oldal sablonjába teszed. A szöveg helyett dinamikus címke vagy shortcode is használható.
Lekérdezés ID	Egyedi azonosító a lekérdezéshez, amellyel a szerveroldali szűrés működik. Dinamikus címkével is megadható.

Ha a JetPopup aktív, megjelenik a Gyorsnézet megjelenítése kapcsoló és a Gyorsnézetgomb sorrendje: a gomb a termék gyorsnézetét nyitja meg felugró ablakban (lásd Bővítések és példák). Ha a JetCompareWishlist is aktív, az Összehasonlítás és a Kívánságlista gombok is beállíthatók a rácson. A gombok sorrendje, ikonja és felirata megadható, a Kosárba teszem gomb mindig az első.

Gyorsnézet, összehasonlítás és kívánságlista fül

Ha a JetPopup aktív, és a Gyorsnézet megjelenítése kapcsolót bekapcsoltad, a panelen megjelenik a Gyorsnézet szakasz. Itt állíthatod a gomb ikonját (Gomb ikonja, könyvtárból vagy feltöltött SVG-ből), a feliratát (Gomb feliratának szövege), az ikon használatát (Ikon használata?), és az ikon helyét (Ikon pozíciója: bal, felül, jobb vagy alul).

Ha a JetCompareWishlist aktív, és a Crocoblock → JetPlugins Settings → JetCompareWishlist oldalon az összehasonlítás, illetve a kívánságlista funkció be van kapcsolva, a panelen megjelenik egy-egy szakasz az Összehasonlítás és a Kívánságlista gombnak. Mindkettőn ugyanazok a beállítások vannak:

a gomb bekapcsolása;
az ikon be- és kikapcsolása, az ikon kiválasztása (könyvtárból vagy SVG-fájlból) és az ikon helye (bal, felül, jobb, alul);
a Normál és a Hozzáadva fül: a gomb kinézete, illetve az a nézet, amelyet a vásárló az összehasonlító oldalra vagy a kívánságlistára tett termék mellett lát. Mindkét fülön megadható az ikon és a felirat;
a Hozzáadva fülön az eltávolítógombként használat kapcsolója: bekapcsolva a vásárló ugyanazzal a gombbal kiveheti a terméket az összehasonlításból vagy a kívánságlistáról;
a gombok sorrendje számítógépen, táblagépen és mobilon külön. A Kosárba teszem gomb mindig az első; alapból az összehasonlítás gombja kerül mögé, a kívánságlistáé pedig az összehasonlítás mögé.

Egyéni lekérdezés (JetEngine)

Ha a JetEngine aktív, megjelenik az Egyéni lekérdezés szakasz. Az Egyéni lekérdezés engedélyezése kapcsolóval a JetEngine Query Builder egyik, WC termék típusú lekérdezését alkalmazhatod a rácsra.

Körhinta

A Körhinta szakaszban a Carousel engedélyezése kapcsolóval a rács csúszkává alakul. A beállítások:

Beállítás	Mit csinál
Irány	Vízszintes vagy függőleges görgetés.
Diák minimális magassága	A diák legkisebb magassága, eszközönként külön.
Carousel magassága	A körhinta magassága, eszközönként külön.
Görgetésenkénti diák száma	Hány dia mozog egyszerre, eszközönként külön.
Térköz az elemek között	A diák közötti távolság képpontban, eszközönként külön.
Dia túlcsordulása, Túlcsordulás	Bekapcsolva a következő dia egy része is látszik (például 0,5 a fél diát mutatja).
Navigáció	Nyilak a görgetéshez.
Előző nyíl, Következő nyíl	Egyéni nyílikonok (csak SVG).
Lapozás	Pontok a körhinta alján. Elérhető hozzá a Dinamikus pontok kapcsoló.
Automatikus lejátszás	Magától görgeti a diákat.
Késleltetés	A görgetések közti idő (például az 500 gyakori, az 5000 ritkább görgetést jelent).
Letiltás interakció esetén	Ha a látogató kezel a körhintán, az automatikus lejátszás megáll az oldal újratöltéséig.
Ismétlés	Körbeérő görgetés. Kikapcsolva az utolsó dia után visszafelé halad.
Animáció sebessége	A mozgás sebessége (például a 100 hirtelen, az 1000 lágyabb mozgás).
Érintés szimulálása	Számítógépen is lehet húzással görgetni.
Szabad mód, Sebesség	A szabad módban a görgetés sebessége.
Középre igazított diák	A túlcsordulást a körhinta két oldalán osztja el (a Dia túlcsordulása bekapcsolásakor).

A Stílus fülön az oszlopok, az elemek (normál és rámutatásos állapotban), a bélyegkép, a cím, az ár, a gomb, a körhinta nyilai és pontjai és a többi elem formázható. A Haladó fülön az elrendezés, a mozgási hatások, a transzformálás, a háttér, a maszk, a reszponzív beállítások, az attribútumok és az egyéni CSS található.

Terméklista

A Terméklista ugyanazokat a termékeket listanézetben írja ki: több lista-elrendezést kínál, és a termék adatait (ár, készletállapot, cikkszám) a kívánt módon jeleníti meg. Egyszerű és változó termékekkel is működik.

A widgetet a Globális widgetek szakaszban kell bekapcsolni (lásd fent), majd a Bolt sablonba vagy bármely Elementor-oldalra be lehet húzni.

A Terméklista szakasz beállításai megegyeznek a Termékrácséval, a következő eltérésekkel:

Beállítás	Mit csinál
Bélyegkép pozíciója	Bal, jobb vagy fent. A bélyegkép-effektus a Terméklistán nem működik.
Készletállapot	Bekapcsolva szerkeszthető a Készleten felirat, az Utánrendelhető felirat és a Nincs raktáron felirat.
Értékelés, Nincs értékelés	A Nincs értékelés kapcsoló az üres csillagokat is kiírja, ha nincs értékelés.

A Lekérdezés alapja, a Kizárás ID-k alapján, a Rendezés alapja és a Rendelés csak akkor látszik, ha az Aktuális lekérdezés használata ki van kapcsolva.

A Stílus fül szakaszai: Listaelem, Bélyegkép, Jelvények, Tartalom, Cím, Kategóriák, Ár, Készletállapotok, Értékelés, SKU, Gomb, Gyorsnézet és Nincs találati üzenet. A listaelemnél függőleges igazítás (Felül, Középen, Alul, Kinyújtás), a listaelemek távolsága, normál és rámutatásos háttér, árnyék, szegély, lekerekítés és belső margó állítható. A bélyegképnél CSS-szűrők is (például elmosás, fényerő, kontraszt). Az Ár szakaszban az akciós ár a normál ár fölé vagy alá igazítható (blokk megjelenítési típussal).

A JetPopup, a JetEngine és a JetCompareWishlist esetén megjelenő szakaszok a Termékrácséval egyeznek. A Termékrácshoz hasonlóan a Haladó fülön többek között az Elrendezés, a mozgási hatások, a háttér, az attribútumok és az egyéni CSS állítható.

Kategóriarács

A Kategóriarács a WooCommerce kategóriákat rácsban írja ki. Ahhoz, hogy jól mutasson, legyen néhány kategóriád névvel, bélyegképpel és leírással.

A Kategóriarács szakasz beállításai:

Beállítás	Mit csinál
Előbeállítások	Más-más elrendezés: a leírás a választott előbeállítástól függően máshol jelenik meg.
Oszlopok	Az oszlopok száma, az Elementor egyéni töréspontjaival is kompatibilis, eszközönként külön.
Rámutatás érintőképernyőn, Azonos oszlopmagasság	Mint a Termékrácsnál.
Oszlopok közötti térköz, Sorok közötti térköz	Kapcsolható hézag az oszlopok és sorok között.
Elem kattinthatóvá tétele, Megnyitás új ablakban	A kártya kattinthatósága és az új ablakban nyitás.
Kategóriák száma	Hány kategória jelenjen meg.
Lekérdezés alapja	Az összes kategória, csak a szülőkategóriák, vagy kategóriák azonosító szerint.
Kizárás ID-k alapján, Bevonás azonosítók alapján, Szülőkategória-ID	A kategóriák szűrése azonosítók szerint.
Rendezés alapja, Rendelés	A rendezés szempontja (név, azonosító, darabszám) és iránya.
Üres kifejezések elrejtése, Alkategóriák elrejtése, Nem kategorizált elrejtése	Elrejti az üres kategóriákat, az alkategóriákat és a nem kategorizált kategóriát.
Képméret	A kategóriakép mérete.
Cím, HTML-címke, Csonkolás típusa, Hossz	A kategória nevének megjelenítése és hossza.
Termékek darabszáma, Szám előtt, Szám után	A kategória termékeinek száma és a szám előtti és utáni szöveg.
Leírás hossza, Csonkítás utáni szöveg	A leírás megjelenített szavainak száma és a levágott szöveg után kiírt jel.

A Körhinta szakasz ugyanaz, mint a Termékrácsnál. A Stílus fülön az oszlopok, a kategóriaelemek (normál és rámutatásos), a bélyegkép, a tartalom, a cím, a darabszám és a nyilak, pontok formázhatók.

Taxonómiai csempék

A Taxonómiai csempék a termékkategóriákat vagy címkéket kattintható csempék formájában írja ki. Jól mutat a kezdőoldalon, mert a termékkínálatot szempontok szerint szűkíti.

Ha címkéket is használsz, vedd fel őket a Termékek → Címkék oldalon (név, leírás, slug).
Nyisd meg az oldalt az Elementorban, és húzd be a Taxonómiai csempék widgetet.
A Taxonómiai csempék szakaszban állítsd be a tartalmat, majd a Stílus fülön a kinézetet.
Tedd közzé az oldalt.

A Taxonómiai csempék szakasz beállításai:

Beállítás	Mit csinál
Elrendezés	A csempék elrendezése.
Minimális magasság	A csempék legkisebb magassága, eszközönként külön.
Kiemelt doboz szélessége	A kiemelt csempe szélessége.
Sorok száma	A sorok száma.
Megnyitás új ablakban	A csempe hivatkozását új ablakban nyitja meg.
Taxonómia típusa	Kategóriákat vagy címkéket mutat.
Bevonás azonosítók alapján	Csak a megadott azonosítójú elemek jelennek meg (vesszővel elválasztott lista).
Kizárás ID-k alapján	A megadott azonosítójú elemek kimaradnak.
Rendezés alapja, Rendelés	A csempék sorrendje.
Üres kifejezések elrejtése	Elrejti az üres kategóriákat vagy címkéket.
Nem kategorizált elrejtése	Elrejti a nem kategorizált kategóriát.
Cím HTML-címkéje, Cím hossza	A cím HTML-címkéje és hossza szavakban.
Leírás hossza	A leírás megjelenített hossza.
Darabszámok megjelenítése	A termékek száma, amelyhez megadható a Pozíció és a szám előtti és utáni szöveg (Szám előtt, Szám után).

Egyéni taxonómiák a csempékben

Alapból a widget a WooCommerce kategóriákat és címkéket mutatja. A gyermektémád functions.php fájljába írt kódrészlettel a saját (például JetEngine-nel létrehozott) taxonómiáid vagy a WordPress bejegyzéskategóriák is megjeleníthetők.

Hozd létre az egyéni taxonómiákat és hozzájuk a kép típusú metamezőket, majd töltsd fel a képeket.
A gyermektéma functions.php fájljában egy kódrészlettel regisztráld a taxonómiát a widget Taxonómia típusa listájába: a taxonómia kulcsához adj egy tetszőleges megjelenítendő nevet. Több taxonómiához minden sort ismételd meg a saját kulcsával.
Egy második kódrészlettel add meg, melyik metamezőből jöjjön az egyes taxonómiák képe. Több taxonómiánál a feltételt ismételd meg a saját nevekkel és azonosítókkal.
A bejegyzéskategóriákhoz ugyanezt a két kódrészletet használd a bejegyzéskategória (category) kulccsal, és a kép metamezőjét (például category_featured_image) add meg.
Húzd be a widgetet az oldalra, és ellenőrizd, hogy az egyéni taxonómiák megjelennek a Taxonómia típusa listában.

Terméklista (ciklus) és lapozás a boltoldalon

A boltsablonba való Terméklista (ciklus) widget az archívumtétel sablonnal írja ki a termékeket, és két elrendezés közt váltható; a beállításai a Bolt, archívum és kategóriák fejezetben vannak. A widget Terméklista szakaszán egy figyelmeztetés is áll: az egyéni sablon funkció használata előtt be kell kapcsolnod az egyéni termékarchívum opcióját a WooCommerce → Beállítások → JetWooBuilder fülön.

A Terméklista (ciklus) widget beállításai

A képen a widget egyetlen szakasza látszik, a fenti figyelmeztetéssel.

A Termékek lapozása widget oldalakra bontja a termékarchívumon kiírt termékeket. A Termékrács, a Terméklista és a Terméklista (ciklus) widgettel kiírt termékekhez is használható. A widget az Üzletoldali termékwidgetek csoportban van, a Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek oldalon kapcsolhatod be. A termékeket kiíró widgetek közül legalább egyet szintén be kell kapcsolnod.

Hozz létre Bolt típusú sablont a Crocoblock → Woo Page Builder oldalon.
Húzd be a Termékrácsot, válassz előbeállítást, és kapcsold be az Aktuális lekérdezés használata kapcsolót, hogy az archívumok a saját termékeiket mutassák. A Termékek száma mezőben add meg, hány termék legyen egy oldalon (például 4).
Húzd be a Termékek lapozása widgetet a rács alá.
A Tartalom fülön a widget csak a fő lekérdezéssel működik. Az Előző és következő oldalak hivatkozásainak engedélyezése alapból be van kapcsolva; ilyenkor az Előző címke, az Előző ikon, a Következő címke és a Következő ikon átírható.
A Stílus fülön a lapozó, a navigáció és a navigációs ikonok tipográfiája, színe, háttere, kitöltése, szegélye és igazítása állítható; a Haladó fülön az elrendezés.
Nézd meg az eredményt a weboldalon.

A képen az előző és következő oldal gombjainak felirata és ikonja látszik.

A weboldalon a rács az oldalankénti terméket írja ki; a lapozó az archívumsablonban jelenik meg.

WooCommerce-műveletek

A WooCommerce-műveletek widget a szokásos WooCommerce hookokat tölti be a tartalomba, így harmadik féltől származó bővítmények vagy saját kód kimenete bekerül a termékoldalra, az archívumba vagy a termékek listájába. A widget alapból be van kapcsolva a Globális widgetek között, és a JetEngine termékekhez készült listáiban is használható.

A widget a hookok mögé rendelt tartalmat hívja meg, és önmagában nem ad ki saját kimenetet vagy elrendezést: csak a hook hívását végzi, ezért kevesebb beágyazást generál.

Az elérhető hookok:

Csoport	Hookok
Termékoldal	`woocommerce_before_single_product_summary` (az összefoglaló előtt), `woocommerce_single_product_summary` (a rövid leírásban), `woocommerce_after_single_product_summary` (az összefoglaló után)
Boltlista (egy termékelem)	`woocommerce_before_shop_loop_item`, `woocommerce_before_shop_loop_item_title`, `woocommerce_shop_loop_item_title`, `woocommerce_after_shop_loop_item_title`, `woocommerce_after_shop_loop_item`

A hookok kódja a WooCommerce templates/content-product.php (archívum) és templates/content-single-product.php (termékoldal) fájljában található. A widget Tartalom és Haladó fülén választhatod ki, melyik hookot hívja meg.

Készült: 2026. november 1.Frissítve: 2026. november 2.