Bolt, archívum és kategóriák

A bolt oldala két sablonból áll össze: a Bolt sablon a lap vázát adja (cím, rendezés, lapozás, termékrács), az Archívumtétel sablon pedig egyetlen termékkártya kinézetét határozza meg, amely a rácsban ismétlődik. Ez a fejezet ezeket, a kategóriák sablonjait és a keresés, a kapcsolódó termékek és az upsell sablonjait írja le.

Termékkártya: az Archívumtétel sablon

Az archívumtétel sablonban egyetlen termék kártyáját tervezed meg. A sablon a rácsban, listában, a keresési találatok között és a kapcsolódó termékeknél ismétlődik, ezért ne tegyél bele hosszú leírást.

1. Kapcsold be az archívumhoz szükséges widgeteket a Termékarchívum-widgetek szakaszban (lásd Beállítások).
2. A Crocoblock → Woo Page Builder oldalon hozz létre új sablont Archívumtétel típussal. Kiindulhatsz egy előre elkészített elrendezésből is.
3. Húzd be a kártya elemeit. A termékkártya widgetjei:

Widget (a szerkesztőben)	Mit mutat
Archívumi bélyegkép	A termék képe.
Archívum címe	A termék neve.
Archív ár	A termék ára.
Archívum kosárba helyezés	A Kosárba teszem gomb. Változó terméknél a gomb a beállítások kiválasztására szolgál, és a termékoldalra visz.
Archívumi akciós jelvény	Az akciós jelvény.
Archív értékelés	A csillagos értékelés.
Archív kivonat	A rövid leírás.
Archív kategóriák	A termék kategóriái.
Archívumi címkék	A termék címkéi.
Archívumi SKU	A cikkszám.
Archívumi készletállapot	A készletállapot.

Ha egy elem nem látszik, ellenőrizd, hogy a terméknek van-e hozzá adata: a kosárba gomb például nem jelenik meg, ha a terméknek nincs ára vagy nincs raktáron.

4. Nyisd meg a sablonbeállításokat (a szerkesztő felső sávjában a lap ikon), és a Sablonminta beállításai között állítsd be az oszlopokat (lásd Sablonok létrehozása és hozzárendelése). Az értékek eszközönként külön megadhatók, így számítógépen több oszlop, mobilon egy oszlop és listaszerű elrendezés lehet.
5. Tedd közzé a sablont.
6. A WooCommerce → Beállítások → JetWooBuilder fülön az Egyéni termékarchívum jelölőnégyzetet kapcsold be, a Termékarchívum-sablon listában válaszd ki a sablont, és mentsd.

Az archívumtétel sablon önmagában még nem ír ki semmit: a Bolt sablon rácsa vagy listája használja fel.

A Bolt sablon

A boltsablon az alapértelmezett bolt oldal, és a kategóriaoldalak váza is. Ha egy termékkategória oldalát nyitod meg, ugyanez a sablon jelenik meg a kategória termékeivel.

1. Kapcsold be a Üzletoldali termékwidgetek szakasz widgetjeit.
2. Hozz létre új sablont Bolt típussal.
3. Építsd fel az oldalt a widgetekkel.
4. Tedd közzé, majd a WooCommerce → Beállítások → JetWooBuilder fülön kapcsold be az Egyéni boltoldal jelölőnégyzetet, válaszd ki a sablont a Boltoldalsablon listából, és mentsd. Az archívumtétel sablont is rendeld hozzá a fent leírt módon.

A boltsablon widgetjei:

Widget (a szerkesztőben)	Mit csinál
Termékek leírása	Kiírja az adott kategória leírását. Stílusa: betűtípus, szín, szövegárnyék, igazítás.
Terméklista	A Products Loop widget: a termékeket az archívumtétel sablon szerint írja ki, és lehetővé teszi a rács és a lista nézet közötti váltást. Részletek lent.
Termékek navigációja	Az előző és a következő oldalra lépő gombok. A tartalma fülön ikon és felirat választható.
Termékértesítések	A WooCommerce értesítéseit írja ki a boltoldalon.
Termékek rendezése	Legördülő lista a rendezéshez: népszerűség, átlagos értékelés, legújabb, ár.
A termékek oldalának címe	A kategória nevét írja ki. A tartalma fülön a HTML-címke megadható.
Termékek lapozása	Lapozó oldalszámokkal. Az előző és következő oldalra mutató hivatkozások kapcsolhatók, felirat és ikon megadható.
Terméktalálatok száma	A találatok számát írja ki.

A Termékek rendezése, a Termékek lapozása, a Termékek navigációja és a Terméktalálatok száma csak a fő lekérdezéssel működik. Ha a Termékrács vagy a Terméklista widgettel írod ki a termékeket, azokon kapcsold be az Aktuális lekérdezés használata kapcsolót, különben a rendezés és a lapozás nem hat rájuk.

Ha a Terméktalálatok száma és a Termékek lapozása egymás mellett nem egyező számot mutat, nézd meg az oldalankénti termékek számát a Megjelenés → Testreszabás → WooCommerce → Termékkatalógus oldalon (sorok száma és termékek száma soronként).

Terméklista (Products Loop) és az elrendezésváltó

A Terméklista widgetnek az Elementor panelen kétszer is ez a neve: egyszer a Globális widgetek között (a lista nézetű termékmegjelenítő), egyszer a boltsablon csoportjában. Ez utóbbi a ciklus widget, amelyet ez a rész ír le.

A widget alapból az archívumtétel sablont írja ki. A Terméklista szakasz egyetlen mezője a Sablon, ahol választhatsz másik archívumtétel sablont. Az Elrendezésváltó szakaszban a Bekapcsolás kapcsolóval a termékek fölé kerül egy gombpár, amellyel a látogató rács és lista nézet között válthat.

Beállítás	Mit csinál
Bekapcsolás	Megjeleníti az elrendezésváltót.
Elrejtés mobilon	Mobilon elrejti a váltót. Bekapcsolás után megjelenik az Alapértelmezett mobil elrendezés lista (Fő vagy Másodlagos).
Fő és Másodlagos	Két fül a két nézethez. Mindkettőn: Sablon (a nézethez használt archívumtétel sablon), Címke (a gomb felirata) és Ikon.

Az alapértelmezett (Fő) nézet a rács.

Előkészületek az elrendezésváltóhoz:

1. Hozz létre két archívumtétel sablont, egyet a rácsos, egyet a listás nézethez (a listásban több elem lehet, például értékelés, kivonat, kategóriák).
2. A WooCommerce → Beállítások → JetWooBuilder fülön kapcsold be az Egyéni boltoldal és az Egyéni termékarchívum jelölőnégyzetet.
3. A listás archívumtétel sablonban a sablonbeállításoknál kapcsold be az Egyéni oszlopszám bekapcsolása kapcsolót, és a Sablon oszlopai mezőbe írj 1-et, hogy a lista egyoszlopos legyen.
4. A rácsos sablonban ugyanitt adj meg más oszlopszámot, például 3-at.

A Stílus fülön az Váltó konténer (háttér, szegély, margó, igazítás, pozíció) és a Váltógombok (betűtípus, méret, színek, kitöltés, igazítás) szakasz formázza a váltót.

https://minta-bolt.hu/wp-admin/post.php?post=27&action=elementor

A boltoldal weboldali képe:

https://minta-bolt.hu/bolt/

Boltoldal fejléccel és lábléccel (JetThemeCore)

A JetThemeCore oldalsablonjával a bolt oldalnak saját fejlécet és láblécet is adhatsz, a törzs pedig a JetWooBuilder boltsablonja.

1. Kapcsold be az Üzletoldali termékwidgetek widgetjeit.
2. A Crocoblock → Theme Builder oldalon hozz létre oldalsablont az Include, WooCommerce, Shop Page feltétellel.
3. Az Add body gombbal a Add from library lehetőségből add hozzá a már elkészített boltsablont. Ha új törzset készítesz a JetThemeCore-ral, a Create template gombbal válaszd ki a tartalomtípust (a JetWooBuilder widgetjeihez Elementor), adj nevet, és a Go to editor gombbal nyisd meg a szerkesztőt. A bolt widgetjeit ugyanúgy használhatod, mint a fent leírt boltsablonban.
4. A Crocoblock → Theme Templates oldalon az új törzs termékarchívumként jelenik meg, az oldalsablon feltétele szerint. Ugyanitt az Add New gombbal további sablonrészeket is készíthetsz.
5. Add hozzá a fejlécet és a láblécet az oldalsablonhoz.

A WooCommerce → Beállítások → JetWooBuilder fülön ilyenkor ne rendelj boltsablont a bolt oldalhoz.

Kategóriakártya: a Kategóriaelem sablon

Ha sok terméked van, a boltoldalon termékek helyett kategóriákat is megjeleníthetsz: a látogató a kategóriára kattintva jut el a termékeihez.

1. Ha még nincsenek kategóriák, hozd létre őket a Termékek → Kategóriák oldalon (név, leírás, bélyegkép).
2. Kapcsold be a Kategóriaarchívum-widgetek szakasz widgetjeit.
3. A Crocoblock → Woo Page Builder oldalon hozz létre új sablont Kategóriaelem típussal.
4. Állítsd össze a kártyát a kategória widgetjeivel:

Widget (a szerkesztőben)	Mit mutat
Archív kategória bélyegképe	A kategória képe.
Archív kategória címe	A kategória neve.
Archív kategória leírása	A kategória leírása.
Archív kategória darabszáma	A kategóriába tartozó termékek száma.

5. A sablonbeállításokban az oszlopok, az egyenlő oszlopmagasság, a hézagok, a kattinthatóvá tétel és az új ablakban nyitás állítható (lásd Sablonok létrehozása és hozzárendelése).
6. Tedd közzé, majd a WooCommerce → Beállítások → JetWooBuilder fülön a Kategóriaarchívum szakaszban kapcsold be az Egyéni kategóriaarchívum jelölőnégyzetet, válaszd ki a sablont a Kategóriaarchívum-sablon listából, és mentsd.
7. A Megjelenés → Testreszabás → WooCommerce → Termékkatalógus oldalon állítsd a bolt oldal megjelenítését kategóriák megjelenítésére, a kategóriaoldal megjelenítését pedig termékek megjelenítésére, hogy a boltoldalon csak a kategóriák látsszanak.
8. A Bolt sablonba tegyél egy Terméklista (ciklus) widgetet beállítások nélkül: kategóriabeállításnál ez a kategóriakártyákat írja ki.

Kategóriák a boltoldalon JetThemeCore-ral

Ha a kategóriákat kiíró boltoldalnak saját fejléce és lábléce is van:

1. Készítsd el a Kategóriaelem sablont a fenti lépések szerint, a Bolt sablonba pedig tedd bele a Terméklista (ciklus) widgetet.
2. A Crocoblock → Theme Builder oldalon hozz létre oldalsablont az Include, WooCommerce, Shop Page feltétellel.
3. Az Add body, majd az Add from library gombbal add hozzá a Terméklista widgetet tartalmazó Bolt sablont.
4. Add hozzá a fejlécet és a láblécet. A WooCommerce → Beállítások → JetWooBuilder fülön a bolt sablont ilyenkor ne rendeld hozzá.

Külön sablon egy kategóriának vagy címkének

Ha a kategóriák oldalait eltérően szeretnéd megjeleníteni (például a női és a férfi kollekciót), külön Bolt sablont rendelhetsz egy-egy kategóriához vagy címkéhez.

1. Hozz létre külön Bolt típusú sablont a kategóriának.
2. A WooCommerce → Beállítások → JetWooBuilder fülön kapcsold be az Egyéni sablonminta osztályozáshoz (taxonomy) jelölőnégyzetet, és mentsd. Ez a beállítás a boltoldal egyéni sablonjától függetlenül is működik, és csak az osztályozásokra (kategóriák, címkék) vonatkozik; az oldal többi része a webhely témájának kialakítását követi.
3. Nyisd meg a Termékek → Kategóriák vagy Termékek → Címkék oldalt, és szerkeszd a kívánt elemet (vagy hozz létre újat).
4. Az oldal alján, az Egyéni sablonminta listában válaszd ki a Bolt sablont, és mentsd (Frissítés).

https://minta-bolt.hu/wp-admin/term.php?taxonomy=product_cat&tag_ID=16&post_type=product

Az Egyéni sablonminta lista csak a JetWooBuilderrel készített Bolt sablonokat kínálja fel. Ha az Egyéni boltoldal és az Egyéni sablonminta osztályozáshoz is be van kapcsolva, a boltoldalon és azokon a kategóriaoldalakon, amelyekhez nincs külön sablon, a boltoldal sablonja jelenik meg, a külön sablont kapott oldalakon pedig a saját sablonjuk.

https://minta-bolt.hu/product-category/bogrek/

Külön oldalsablon egy kategóriának JetThemeCore-ral

Ha egy kategória oldalának saját fejléc és lábléc is kell:

1. A Crocoblock → Theme Builder oldalon hozz létre oldalsablont. A feltétel: Include, WooCommerce, Product Categories, az utolsó listában pedig a kategória (vagy több kategória), amelyre a sablon vonatkozik. Kattints a Create gombra.
2. Az Add body gombnál vagy a Create template lehetőséget használd (válaszd az Elementor tartalomtípust, adj nevet, majd a Create gombbal hozd létre, és töltsd fel tartalommal), vagy az Add from library gombbal add hozzá a JetWooBuilderrel készített Bolt sablont (vagy a Crocoblock → Theme Templates oldalon készült termékarchívum-sablont).
3. Az új törzs a Crocoblock → Theme Templates oldalon termékarchívumként jelenik meg, az oldalsablon feltétele szerint.
4. Add hozzá a fejlécet és a láblécet, majd nézd meg a kategória oldalát a weboldalon.

Keresési oldal sablonja

A keresési találatok termékkártyáját archívumtétel sablonnal adhatod meg.

1. Hozz létre Archívumtétel típusú sablont, és tervezd meg benne egy találat kinézetét.
2. A WooCommerce → Beállítások → JetWooBuilder fülön, a Termékarchívum szakaszban válaszd ki a sablont a Keresési oldalsablon listából, és mentsd.
3. A fejlécbe tegyél keresőt: nyisd meg a fejlécsablont, húzd be a keresőwidgetet, és kapcsold be rajta a termékkeresésre vonatkozó kapcsolót (angol felirata: Is Product Search).
4. A weboldalon írj be egy keresőszót, és nézd meg a találatokat.

Ha a keresési oldalnak saját fejléce, lábléce is van, a JetThemeCore oldalsablonjában az Include, WooCommerce, Search Results feltételt használd, és ne rendeld hozzá a sablont a WooCommerce beállításainál (lásd Sablonok létrehozása és hozzárendelése). A keresőt a többi oldalsablon (például a bolt) fejlécébe is be kell tenni, hogy a webhely minden oldalán lehessen keresni.

Kapcsolódó termékek, upsell és keresztértékesítés

A WooCommerce háromféle kiegészítő terméket ismer. Könnyű összekeverni őket: a különbség az, ki választja ki a termékeket, és hol jelennek meg.

Fajta	Ki választja	Hol jelenik meg	JetWooBuilder widget
Upsell	Te, kézzel	A termékoldalon	Termékoldali upsell termékek
Keresztértékesítés	Te, kézzel	A kosár oldalon	Kosár keresztértékesítései
Kapcsolódó termékek	A WooCommerce, automatikusan	A termékoldalon	Termékoldali kapcsolódó termékek

Az upsell drágább vagy prémium változat, amely a termékoldalon arra ösztönöz, hogy a vásárló többet költsön. A kapcsolódó termékek azonos kategóriába vagy címkébe tartozó termékek, ezek a vásárlót további böngészésre ösztönzik, kiválasztásuk automatikus, ezért oldalbetöltésenként változhat.

Lépések:

1. Hozz létre Archívumtétel típusú sablont (például Upsell néven), amely a kiegészítő termékek kártyája lesz. Ez termékkártya, nem teljes oldal.
2. A Termékek → Minden termék oldalon nyisd meg a terméket, a termékadatok doboznál válaszd az egyszerű vagy a változó terméket, és a kapcsolt termékek fülön add meg az upsell és a keresztértékesítési termékeket. Kapcsolódó termékeket nem kell megadnod: ha a termékeknek van közös kategóriája vagy címkéje, a WooCommerce kiválasztja őket.
3. A WooCommerce → Beállítások → JetWooBuilder fülön a Termékarchívum szakaszban kapcsold be az Egyéni termékarchívum jelölőnégyzetet, és válaszd ki a sablont a Kapcsolódó és felülértékesítési termékek sablonmintája listában. Ha a keresztértékesítéshez is sablont adsz a Keresztértékesítési terméksablon listában, a Kosár keresztértékesítései widget azt használja.
4. Az Egyéb beállítások szakaszban add meg, hány kapcsolódó, upsell és keresztértékesítési termék jelenjen meg.
5. A termékoldal sablonjában használd a Termékoldali upsell termékek és a Termékoldali kapcsolódó termékek widgetet, a kosársablonban a Kosár keresztértékesítései widgetet.

Ha a kapcsolódó termékek nem jelennek meg: ellenőrizd, hogy a termék legalább egy kategóriát vagy címkét megoszt más termékkel, és hogy az egyéni termékoldal-sablonba be van-e téve a Termékoldali kapcsolódó termékek widget. A kapcsolódó termékeket nem választhatod ki kézzel: ha te döntenéd el, melyik termékek jelenjenek meg, használd az upsellt.

Gyakori kérdések

Hol jelennek meg az upsell és a keresztértékesítési termékek? Az upsell a termékoldalon, a keresztértékesítés a kosár oldalon. Egyéni JetWooBuilder-sablonnál te döntöd el a helyüket: a Termékoldali upsell termékek widgetet a termékoldal sablonjába, a Kosár keresztértékesítései widgetet a kosár sablonjába tedd.

Korlátozhatom, hány termék jelenik meg? Igen. A WooCommerce → Beállítások → JetWooBuilder fül Egyéb beállítások szakaszában a kapcsolódó, az upsell és a keresztértékesítési termékeknek külön mezője van, így például négy kapcsolódó és csak két upsell termék is megjeleníthető.

Miért ugyanaz a sablon az upsellnél és a kapcsolódó termékeknél? A kiválasztott archívumtétel sablon adja a termékkártyák kinézetét mindkét widgetben. A két widget a termékoldal sablonjában eltérő termékkészletet jelenít meg, ezt az oldal előnézetében is látod.