# Foglalási példányok rácsban WooCommerce-alapú módban

> Három mód a WooCommerce-termékként felvett foglalható tételek listázására: az alap boltoldal, a JetWooBuilder sablon és a JetEngine listázás.

WooCommerce-alapú módban a foglalható tételek WooCommerce-termékek ([WooCommerce-alapú mód](https://hub.hellowp.io/hu/plugins/jet-booking/woocommerce-alapu-mod/)). A listázásukra három lehetőséged van, attól függően, mennyire szeretnéd testre szabni a megjelenést. A második és a harmadik módhoz Elementor, JetWooBuilder, JetEngine és JetThemeCore is kell.

## 1. Az alap WooCommerce boltoldal

A legegyszerűbb megoldás, a WooCommerce-on és a JetBookingon kívül nem kell hozzá más bővítmény. A WooCommerce **Bolt** oldala foglalási katalógusként működik.

A megjelenését a **Megjelenés → Testreszabás → WooCommerce → Termékkatalógus** oldalon állíthatod:

- mit mutasson a bolt: termékeket, kategóriákat vagy mindkettőt,
- az alapértelmezett rendezést,
- a soronkénti termékek számát és az oldalankénti sorok számát.

A módosításokat a **Közzététel** gombbal mentsd. A változás a bolt frontend oldalán azonnal látszik.

## 2. JetWooBuilder boltoldal-sablon

Ha egyedibb megjelenés kell, a JetWooBuilder boltoldal-sablonjával másik elrendezést adhatsz a boltnak. A sablon létrehozásakor kiválaszthatod az elrendezést, és a termékeket háromféleképpen jelenítheted meg:

| Elem | Mit csinál |
|---|---|
| **Products Grid** | A megadott számú terméket rácsban mutatja |
| **Products List** | Ugyanazokat a termékeket listában mutatja |
| **Products Loop** | Végtelen termékciklus, amelyben a látogató rács és lista nézet között válthat |

A sablonba szűrőket és keresőmezőt is tehetsz. A **Közzététel** gomb után az új sablon jelenik meg a boltoldalon.

## 3. Egyedi listázás a JetEngine-nel

Ha a kártyát nulláról, teljesen egyedire szeretnéd megtervezni, készíts JetEngine listázási sablont a WooCommerce-termékekhez. A kártyára a JetEngine dinamikus elemeivel (**Dynamic Field**, **Dynamic Image** és társai) kiírhatod a termékek rövid adatait. Ezután az oldalra tegyél egy **Listing Grid** elemet, és válaszd ki a sablont. A bolt oldalán így az egyedi katalógus jelenik meg.

A listázási sablon elemeinek beállítását a [Foglalási példányok megjelenítése rácsban](https://hub.hellowp.io/hu/plugins/jet-booking/megjelenites-foglalasi-peldanyok-racsban/) fejezet írja le.