Első terméktábla elkészítése

Lépésről lépésre: oszlopok, táblabeállítások, szűrők és dizájn beállítása a terméktáblához.

Ez a fejezet egy példán mutatja végig, hogyan állítasz össze egy terméktáblát: oszlopokat választasz, beállítod a megjelenést és a lapozást, szűrőket adsz hozzá, végül színezed a fejlécet.

Mit kell előtte telepíteni

WooCommerce, telepítve és aktiválva.
JetProductTables, telepítve és aktiválva.

A beállítások kétféleképpen érhetők el:

a Bővítmények oldalon a JetProductTables sorában lévő beállítási hivatkozással, vagy
a WooCommerce → Beállítások → Terméktábla oldalon.

A Terméktábla beállítóoldal az Oszlopok lappal

A fül tetején az almenü (Columns, Settings, Filters, Integration, Design) és a jobb oldalon a Presets Manager és a Generate Shortcode gomb látszik.

1. Az oszlopok beállítása

A Columns lapon oszlopokat adhatsz hozzá és törölhetsz, átrendezheted őket, és mindegyik beállításait módosíthatod. Alapból ez a hat oszlop van: Termék ID, Termék neve, Termékkép, SKU, Ár és Gombok.

Példánkban:

Töröld a Termék ID és az SKU oszlopot a soruk jobb szélén lévő kuka ikonnal.
Add hozzá a Kategóriák oszlopot: válaszd ki a Select a column… listából, és kattints az Oszlop hozzáadása gombra.
Add hozzá az Egyéni osztályozási kifejezések oszlopot. A TAXONOMY mezőben válaszd a termék típusát, a LABEL mezőbe pedig írd: „Típus”.
Add hozzá a Készletállapot/mennyiség oszlopot.
Húzd a Gombok oszlopot a lista végére.

Az oszlopok részletes beállításait az Oszlopok fejezet írja le.

2. A táblabeállítások

A Settings lap azt szabályozza, hogyan jelenik meg a tábla a webhelyen. A Táblázat beállításai és mobilnézet fejezet minden mezőt leír, a példában ezeket állítjuk:

A Show Header alapból be van kapcsolva.
Kapcsold be a Sticky Header kapcsolót: a fejléc görgetéskor az oldal tetején marad.
A Show Footer kapcsoló a tábla aljára is kiteszi a fejlécet az oszlopnevekkel. Most hagyd kikapcsolva.
A MOBILE LAYOUT listában választhatsz: Moveable, Shorten, Transform vagy Collapsed.
A Lazy Load kikapcsolva azonnal betölti a tábla tartalmát. Bekapcsolva csak akkor töltődik be, amikor a tábla a képernyőre kerül.

A Navigation szakaszban kapcsold be a Pager kapcsolót, a PAGER POSITION legyen Before Table, és kapcsold be a Load More kapcsolót, hogy megjelenjen a „Továbbiak betöltése” gomb.

3. Szűrők

A Filters lapon az Enable Filters kapcsoló hozzáadja a szűrőket. Háromféle szűrő van: osztályozás szerinti, tulajdonság szerinti és szöveges keresés. A példában két osztályozásszűrőt és egy keresőt használunk.

Nyisd ki az első Osztályozás (taxonomy) szűrő sort. A HELYKITÖLTŐ mezőbe írd: „Válassz kategóriát”, a VÁLASSZ OSZTÁLYOZÁST (TAXONOMY) listában válaszd a termékkategóriákat, és kapcsold be a Darabszám megjelenítése kapcsolót, hogy a kifejezés mellett látszódjon a hozzá tartozó termékek száma.
A Szűrő keresése sort hagyd az alapbeállításon.
Válaszd az Osztályozás (taxonomy) szűrő típust a Select a filter… listából, és kattints az Add Filter gombra. Húzd a sort a második helyre.
A HELYKITÖLTŐ legyen „Válassz típust”, a taxonómia a terméktípus, és kapcsold be a Darabszám megjelenítése kapcsolót.

A szűrők részletei a Szűrők fejezetben vannak.

4. A tábla stílusa

A Design lapon a Table Headings, a Table Body és a Filters szakasz stílusát állíthatod. A példában a Table Headings szakaszban:

a TEXT COLOR fehér (#FFFFFF),
a BACKGROUND COLOR egyéni szín (#E6524B),
a TEXT TRANSFORM a „Ab” (nagy kezdőbetű),
a TEXT ALIGNMENT középre igazított.

A beállításokat a Dizájn fejezet írja le.

Mentés

Kattints a Beállítások mentése gombra. Ha különböző megjelenésű táblákat szeretnél, a beállításokat előbeállításként is elmentheted. A táblát ezután a WooCommerce-integrációval, shortcode-dal, a blokkal vagy az Elementor widgettel jelenítheted meg.

Készült: 2026. november 2.