Kosár, pénztár és köszönőoldal

A vásárlási folyamat három oldalához külön sablontípus tartozik: Kosár, Pénztár és Köszönjük. Mindhárom a megfelelő widgetekből épül fel, és a WooCommerce → Beállítások → JetWooBuilder fülön rendelhető hozzá az oldalhoz.

Előkészületek

A kosár és a pénztár oldalra WooCommerce-oldal kell, benne a megfelelő shortcode-dal.

1. Ellenőrizd, hogy léteznek az alapoldalak. Ha hiányoznak, a WooCommerce → Állapot menüben, az eszközök fülön az alapértelmezett oldalak létrehozásával pótolhatók (a meglévő oldalakat nem módosítja).
2. A Kosár oldal tartalma csak a [woocommerce_cart] shortcode legyen, a Pénztár oldalé a [woocommerce_checkout], a Fiókom oldalé a [woocommerce_my_account]. Mindegyiket shortcode-blokkba tedd. Ha az oldalon WooCommerce-blokkok vannak (a blokkos kosár vagy pénztár), cseréld őket a shortcode-ra, különben a JetWooBuilder sablonja nem érvényesül.
3. A WooCommerce → Beállítások → Haladó fülön, az oldalbeállításoknál ellenőrizd, hogy a Kosár, Pénztár és Fiókom oldalhoz a megfelelő oldal van kiválasztva.
4. A WooCommerce → Beállítások → JetWooBuilder fülön a Widgetek megjelenítési módja legyen Elementor alapértelmezése.
5. Kapcsold be a widgeteket a Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek oldalon: Kosárwidgetek, Pénztárwidgetek, Köszönőoldal widgetjei.

Kosár

Hozz létre új sablont Kosár típussal. Üres és teli kosárhoz külön sablont is készíthetsz.

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

A kosár widgetjei:

Widget (a szerkesztőben)	Mit csinál
Kosártáblázat	A kosárba tett termékek táblázata. Alapból öt oszlop (kép, cím, ár, mennyiség, összeg), minden sorban eltávolító gomb, alatta kuponmező és frissítés gomb.
Kosárösszesítő	A kosár végösszege és a tovább a pénztárhoz gomb.
Kosár vissza a boltba	Gomb, amely a bolt oldalra visz. Teli és üres kosárban is használható.
Üres kosár üzenete	Ikon és üzenet arról, hogy a kosár üres.
Kosár keresztértékesítései	A kosárban lévő termékekhez kapcsolódó (keresztértékesítési) termékek.

Kosártáblázat beállításai (Tartalom fül):

Szakasz	Beállítás	Mit csinál
Táblázat	Tételek	A táblázat oszlopai. Alapból: Eltávolítás, Bélyegkép, Termék címe, Ár, Mennyiség, Összeg. Az Elem hozzáadása gombbal újabb oszlop adható hozzá.
Műveleti vezérlők	Kosár automatikus frissítése	A kosár az oldal újratöltése nélkül frissül, ha változtatsz a mennyiségen.
Frissítés gomb	Címke	A frissítés gomb felirata.
Kuponűrlap	Megjelenítés	Bekapcsolja a kuponmezőt.
Kuponűrlap	Gomb felirata, Helyőrző szöveg	A kuponűrlap gombjának felirata és a mező helyőrző szövege.

A Kosárösszesítő egyetlen beállítása az Elrejtés a Címsor szakaszban: bekapcsolva elrejti a widget címsorát (alapból ki van kapcsolva).

A Kosár vissza a boltba beállításai: Módosítás kapcsoló (alapból ki), amellyel egyéni Címke és Link adható meg.

Az Üres kosár üzenete beállításai: Módosítás kapcsoló egyéni Üzenet megadásához, és az Ikon elrejtése kapcsoló.

A Kosár keresztértékesítései beállításai: Oszlopok (1-től 12-ig), Rendezés alapja (dátum, cím, ár, népszerűség, értékelés, véletlen, módosítás dátuma), Rendelés (növekvő vagy csökkenő), és a Címsor szakaszban a Megjelenítés és Módosítás kapcsoló egyéni címsorhoz.

Tedd közzé a sablont, majd a WooCommerce → Beállítások → JetWooBuilder fül Kosár szakaszában jelöld be az Egyéni kosár jelölőnégyzetet, válaszd ki a sablont a Kosársablon listából (az üres kosárhoz az Üreskosár-sablon listából), és mentsd.

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

A képen a kosár a saját sablonjával látszik: a táblázat oszlopai, a kupon és a frissítés gomb, a kosár összesen és a pénztárhoz vivő gomb, végül a vásárlás folytatása.

Pénztár

Hozz létre új sablont Pénztár típussal. A JetWooBuilder kétféle pénztársablont ismer:

• Fő sablon: a Pénztársablon listához rendelt sablon. Ez a pénztár fő űrlapját adja.
• Felső sablon: a Pénztár tetején megjelenő sablonminta listához rendelt sablon, amely a fő űrlap fölött jelenik meg.

A két sablon más-más widgeteket bír el, mert a pénztár űrlapjai másképp épülnek fel:

Sablon	Ide NE tedd	Ide tedd
Fő sablon	Pénztári kuponűrlap, Pénztári bejelentkezési űrlap és bármilyen más űrlapwidget (például JetFormBuilder űrlap): nem működnek jól.	A többi pénztárwidget.
Felső sablon	Pénztári kiegészítő űrlap, Pénztári számlázási űrlap, Pénztári rendelés áttekintése, Pénztári fizetés, Pénztári szállítási űrlap: nem jelennek meg jól.	Pénztári kuponűrlap, Pénztári bejelentkezési űrlap és más űrlapwidgetek.

A pénztár widgetjei:

Widget (a szerkesztőben)	Mit csinál
Pénztári kuponűrlap	Értesítésszerű sáv gombbal: kattintásra megjelenik a kuponkód mezője. A stílusa állítható.
Pénztári bejelentkezési űrlap	Értesítés és gomb, amelyre kattintva megjelenik a belépési űrlap, így a vásárló a pénztár kitöltése előtt beléphet.
Pénztári kiegészítő űrlap	A rendeléshez fűzött megjegyzés (extra információ) mezője. A címke, a beviteli mező és a címsor stílusa állítható.
Pénztári számlázási űrlap	A számlázási adatok űrlapja. A mezők a Tartalom fülön szerkeszthetők (címke, helyőrző, alapérték). A Reszponzív mobilmegjelenítés kapcsoló bekapcsolva a mezők szélességét a mobil képernyőhöz igazítja.
Pénztári rendelés áttekintése	A kosár tartalmának és végösszegének táblázata. Érdemes a számlázási űrlap fölé tenni.
Pénztári fizetés	A fizetési mód kiválasztása és a Megrendelés gomb, valamint az adatkezelési tájékoztatóra mutató szöveg. Ha a vásárló országában nincs fizetési mód, értesítés jelenik meg.
Pénztári szállítási űrlap	A szállítási adatok űrlapja, a mezők szerkeszthetők.

Lépések:

1. Ellenőrizd, hogy a Pénztárwidgetek szakasz widgetjei be vannak kapcsolva.
2. Hozz létre Pénztár típusú sablont, tedd bele a fő widgeteket, és tedd közzé.
3. Hozz létre egy második Pénztár típusú sablont a felső részhez (például a kuponűrlappal), és tedd közzé.
4. A WooCommerce → Beállítások → JetWooBuilder fül Pénztár szakaszában jelöld be az Egyéni pénztár jelölőnégyzetet, válaszd ki a fő sablont a Pénztársablon, a felsőt a Pénztár tetején megjelenő sablonminta listából, és mentsd.
5. A Pénztár oldalra tedd a [woocommerce_checkout] shortcode-ot (lásd az előkészületeket), és ellenőrizd a WooCommerce → Beállítások → Haladó fülön, hogy ez az oldal a pénztár oldal.

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

A képen a számlázási űrlap balra, a rendelés áttekintése és a fizetési mód jobbra látszik, mindez a fő pénztársablon widgetjeiből.

Köszönőoldal

A köszönőoldal a rendelés leadása után jelenik meg. Hozz létre új sablont Köszönjük típussal.

A köszönőoldal widgetjei:

Widget (a szerkesztőben)	Mit csinál
Köszönőoldali vásárlói címadatok	A számlázási adatok táblázata, amelyet a vásárló a pénztárban adott meg.
Köszönőoldali rendelési részletek	Részletes táblázat a megrendelésről: termékek, végösszeg, szállítás és egyebek.
Köszönőoldali rendelés	A rendelés rövidebb összefoglalója. Egyszerűbb, minimalista köszönőoldalhoz való.

A Köszönőoldali rendelés widget Általános szakaszában a Módosítás kapcsoló alatt átírhatod az Üzenetet és a Címsorok (Rendelés, Dátum, E-mail-cím, Összeg, Fizetés) feliratát.

Lépések:

1. Ellenőrizd, hogy a Köszönőoldal widgetjei szakasz be van kapcsolva.
2. Hozz létre Köszönjük típusú sablont, tedd bele a widgeteket, és tedd közzé.
3. A WooCommerce → Beállítások → JetWooBuilder fül Köszönőoldal szakaszában jelöld be az Egyéni köszönőoldal jelölőnégyzetet, válaszd ki a sablont a Köszönőoldal-sablon listából, és mentsd.
4. Adj le egy rendelést: a fizetés után a vásárló a sablonhoz tartozó köszönőoldalra érkezik.

https://minta-bolt.hu/penztar/order-received/40/?key=wc_order_jlva6xh4p38xE

A képen a rendelés összefoglalója (szám, dátum, végösszeg, e-mail-cím, fizetési mód), a rendelés részletei és a számlázási cím látszik.

Oldalsablon JetThemeCore-ral

Ha a kosár, a pénztár vagy a köszönőoldal saját fejlécet és láblécet kap, a JetThemeCore oldalsablonját használd (lásd Sablonok létrehozása és hozzárendelése). A feltételek: Include, WooCommerce, és az oldal típusa:

Oldal	A harmadik lista értéke
Kosár	Product Cart
Pénztár	Products Checkout
Köszönőoldal	Thank You Page

Lépések (mindhárom oldalra ugyanúgy):

1. Kapcsold be az oldal widgetjeit a Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek oldalon.
2. A Crocoblock → Theme Builder oldalon kattints a Create new page template gombra, vegyél fel egy feltételt az Add Condition gombbal a fenti értékekkel, majd kattints a Create gombra. Az új oldalsablonnak adj nevet.
3. Az Add body gombbal vagy új sablont hozol létre a JetThemeCore-ral (a fent leírt widgetekkel), vagy az Add from library lehetőségből kiválasztod a JetWooBuilderrel készült sablont, és a Use gombra kattintasz.
4. Az Add header gombbal vegyél fel fejlécet (új vagy könyvtárból), ugyanígy a láblécet.
5. Pénztárnál a Crocoblock → Theme Templates oldalon is készíthetsz sablont: az Add New gombnál a Template Type legyen Checkout. A kész sablonhoz utólag add meg a feltételeket, ahogy az oldalsablonnál.
6. A WooCommerce → Beállítások → JetWooBuilder fülön a megfelelő szakasz egyéni sablonját kapcsold ki: Egyéni kosár, Egyéni pénztár, Egyéni köszönőoldal. Nem kell sablont kiválasztani, mert a hozzárendelést az oldalsablon feltétele adja. Mentsd a beállításokat.
7. Tegyél egy terméket a kosárba, és nézd meg a kosár, a pénztár és a köszönőoldal megjelenését a weboldalon.

Ha a pénztár oldalt te hozod létre kézzel, a Oldalak → Új oldal menüben tegyél rá egy shortcode-blokkot a [woocommerce_checkout] értékkel, tedd közzé, majd a WooCommerce → Beállítások → Haladó fülön jelöld ki a Pénztár oldalnak. A kosár és a Fiókom oldalra ugyanígy a [woocommerce_cart] és a [woocommerce_my_account] kell. Az alapoldalakat a WooCommerce → Állapot → Eszközök oldalon az alapértelmezett oldalak létrehozásával is előállíthatod. A Widgetek megjelenítési módja a WooCommerce → Beállítások → JetWooBuilder fülön legyen Elementor alapértelmezése.

Ilyenkor a WooCommerce → Beállítások → JetWooBuilder fülön az adott oldal egyéni sablonját (például az Egyéni kosár, Egyéni pénztár vagy Egyéni köszönőoldal jelölőnégyzetet) hagyd kikapcsolva.

Ingyenes szállítás sávja a kosárban

A kosár sablonjába folyamatjelző sávot is tehetsz, amely mutatja, mennyi hiányzik az ingyenes szállításhoz. Ennek leírása a Bővítések és példák fejezetben van.