# Táblázat megjelenítése a frontenden

> A terméktábla kitétele az oldalra blokkal, shortcode-dal vagy a WooCommerce-oldalak integrációjával.

A terméktáblát háromféleképpen jelenítheted meg a webhelyen: a **Product Table** blokkal, shortcode-dal vagy a WooCommerce alapoldalaiba integrálva. A példák a blokkszerkesztőre (Gutenberg) épülnek, és a WooCommerce és a JetProductTables aktív kell legyen.

## Product Table blokk

1. Nyiss meg egy oldalt vagy sablont a blokkszerkesztőben.
2. Add hozzá a **Product Table** blokkot, és állítsd be a [blokk](https://hub.hellowp.io/hu/plugins/jet-product-tables/blokk/) fejezet szerint.
3. Mentsd az oldalt.

![Az oldalra tett Product Table blokk a frontenden](./kepek/blokk-tablazat.webp)

*Az oldalra tett Product Table blokk a frontenden* (https://minta-bolt.hu/blokk-teszt/)

## Shortcode

1. Nyisd meg a **WooCommerce → Beállítások → Terméktábla** oldalt, és kattints a **Generate Shortcode** gombra.
2. Állítsd be az ablakot a [Shortcode-generátor](https://hub.hellowp.io/hu/plugins/jet-product-tables/shortcode/) fejezet szerint, kattints a **Generate Shortcode**, majd a **Copy Shortcode** gombra.
3. Nyiss meg egy oldalt vagy sablont, tegyél rá egy **Shortcode** blokkot, és illeszd bele a másolt shortcode-ot.
4. Mentsd az oldalt.

![Shortcode-dal beillesztett terméktábla](./kepek/shortcode-tablazat.webp)

*Shortcode-dal beillesztett terméktábla* (https://minta-bolt.hu/shortcode-teszt/)

## WooCommerce-oldalak integrációja

1. Nyisd meg a **WooCommerce → Beállítások → Terméktábla → Integration** lapot.
2. Itt választhatod ki, a WooCommerce mely alapértelmezett helyeire kerüljön terméktábla. A bekapcsolt kapcsolóknál az aktuális terméktábla-beállítások érvényesek.
3. Ha a helyeken eltérő megjelenést és beállítást szeretnél, használj előbeállításokat: a **Presets Manager** gombbal nyiss ablakot, írd be a terméktábla nevét, és kattints a **Save Preset** gombra. A részletek az [Előbeállítások](https://hub.hellowp.io/hu/plugins/jet-product-tables/elobeallitasok/) fejezetben vannak.
4. A kívánt helyek mellett a **USE PRESET** listából válaszd ki a megfelelő előbeállítást.
5. Kattints a **Beállítások mentése** gombra.

![A WooCommerce-integráció lap](./kepek/integracio.webp)

*A WooCommerce-integráció lap* (https://minta-bolt.hu/wp-admin/admin.php?page=wc-settings&tab=jet_wc_product_table)

A lapon azt látod, melyik WooCommerce-helyre kapcsolható be terméktábla. A bekapcsolt helyek részletei az [Integráció a WooCommerce oldalaival](https://hub.hellowp.io/hu/plugins/jet-product-tables/integracio/) fejezetben vannak.

## Az eredmény ellenőrzése

Nyisd meg a frontenden azt a helyet, ahová a táblát tetted, és nézd meg, hogyan jelenik meg.

![A bolt oldala terméktáblával](./kepek/bolt-tablazat.webp)

*A bolt oldala terméktáblával* (https://minta-bolt.hu/bolt/)