# Woo - termékek widget

> WooCommerce-termékek rácsban vagy körhintában: kinézet, elrendezés, tartalom, jelvények, gyorsnézet, lapozás.

A **Woo - termékek** widget a WooCommerce-termékeket jeleníti meg bármelyik oldalon, rácsban vagy körhintában. Beépített lekérdezéskészítője van, így pontosan megadhatod, mely termékek jelenjenek meg ([a lekérdezésről itt olvashatsz](https://hub.hellowp.io/hu/plugins/ultimate-elementor/woocommerce-termekek-lekerdezes/)).

Működéséhez a WooCommerce-nek telepítve és aktívnak kell lennie. Ha a widget nem látszik az Elementor widgetlistájában, nézd meg, hogy be van-e kapcsolva a bővítmény beállításai között ([Widgetek ki- és bekapcsolása](https://hub.hellowp.io/hu/plugins/ultimate-elementor/altalanos-widgetek-ki-be/)). A stílusbeállítások minden elemhez a **Stílus** fülön vannak.

![A Woo - termékek widget Általános szakasza a Kinézet és az Elrendezés beállítással](./kepek/woocommerce-termekek-altalanos.webp)

*A Woo - termékek widget Általános szakasza a Kinézet és az Elrendezés beállítással* (https://minta-bolt.hu/wp-admin/post.php?post=29&action=elementor)

A képen a szerkesztőben látható widget a bal oldali panellel: fent az **Általános** szakasz, alatta a többi szakasz címe.

A **Tartalom** fül szakaszai: **Általános**, **Rácsbeállítások** (körhintánál **Csúszka beállításai**), **Lekérdezés**, **Tartalom**, **Akciós jelvény**, **Kiemelt akciós címke**, **Gyorsnézet** és **Lapozás**.

## Kinézet és elrendezés

Az **Általános** szakaszban két beállítás van:

| Beállítás | Mit csinál |
|---|---|
| **Kinézet** | A termékkártya stílusa: **Klasszikus** vagy modern. A két kinézetben a **Kosárba teszem** gomb, az akciós jelvény és a gyorsnézet más helyen áll. |
| **Elrendezés** | **Rács**: sorokból és oszlopokból álló elrendezés. **Körhinta**: csúszka, amelyet nyilakkal vagy pontokkal lehet léptetni. |

### Rács

![A Rácsbeállítások szakasz](./kepek/woocommerce-termekek-racs.webp)

*A Rácsbeállítások szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=29&action=elementor)

A rácsnál az **Oszlopok** számát és a **Termékek oldalanként** értékét adod meg. A képen négy oszlop és oldalanként négy termék van beállítva. Ha több termék van, mint amennyi egy oldalra fér, a **Lapozás** szakaszban állíthatod be a lapozást.

### Körhinta

![A Csúszka beállításai szakasz](./kepek/woocommerce-termekek-korhinta-beallitasok.webp)

*A Csúszka beállításai szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=29&action=elementor)

A körhintánál a **Csúszka beállításai** szakasz jelenik meg:

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Navigáció** | Nyilak, pontok, mindkettő, vagy egyik sem. A nyilak és pontok kinézetét a **Stílus** fülön állíthatod. | Nyilak és pontok |
| **Termékek összesen** | Hány termék kerüljön a körhintába. | 8 |
| **Megjelenítendő termékek** | Hány termék látszik egyszerre (eszközönként külön állítható). | 4 |
| **Görgetésenkénti termékek** | Hány termékkel lépjen tovább egy görgetés (eszközönként külön). | 1 |
| **Automatikus lejátszás** | A körhinta magától lép. | Nem |
| **Végtelen ismétlés** | A körhinta az utolsó termék után az elejétől folytatja. | Igen |
| **Átmenet sebessége (ms)** | Egy lépés időtartama ezredmásodpercben. | 500 |

A **Termékek összesen** értéke legyen nagyobb, mint a **Megjelenítendő termékek** értéke.

#### A körhinta hibásan jelenik meg

Ha a körhinta torzul, vagy nem mozog, általában ez az ok: a **Termékek összesen** kisebb vagy egyenlő, mint a **Megjelenítendő termékek**. Például kézi kiválasztással öt terméket adtál meg, a **Termékek összesen** 5, és a **Megjelenítendő termékek** is 5. Ilyenkor a körhintának nincs hová lépnie.

A megoldás: a **Termékek összesen** legyen legalább eggyel nagyobb, mint a **Megjelenítendő termékek**. Öt termékhez például az összesen 5, a megjelenítendő pedig 4. Ha ennél több terméked van a lekérdezésben, az összesen értéke legyen az, ahány terméket be akarsz tenni a körhintába.

## Tartalom

![A Tartalom szakasz kapcsolói](./kepek/woocommerce-termekek-tartalom.webp)

*A Tartalom szakasz kapcsolói* (https://minta-bolt.hu/wp-admin/post.php?post=29&action=elementor)

A termékkártya elemeit külön kapcsolhatod be és ki:

| Beállítás | Alapérték |
|---|---|
| **Kép** | Megjelenik |
| **Kategória** | Megjelenik |
| **Cím** | Megjelenik |
| **Értékelések** | Megjelenik |
| **Ár** | Megjelenik |
| **Rövid leírás** | Elrejtés |
| **Kosárba teszem** | Megjelenik |
| **Gombok automatikus igazítása** | Elrejtés |

A **Gombok automatikus igazítása** akkor hasznos, ha a kártyák különböző magasak: a gombok így egy vonalba kerülnek.

## Akciós jelvény

![Az Akciós jelvény szakasz](./kepek/woocommerce-termekek-akcios-jelveny.webp)

*Az Akciós jelvény szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=29&action=elementor)

A **Villanás** kapcsolóval az akciós termékeken megjelenő jelvényt (a képen a zöld „Akció!” kör) mutathatod vagy rejtheted el. A **Címke tartalma** beállításnál az **Alapértelmezett** felirat helyett saját szöveget is megadhatsz.

## Kiemelt akciós címke

![A Kiemelt akciós címke szakasz](./kepek/woocommerce-termekek-kiemelt-cimke.webp)

*A Kiemelt akciós címke szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=29&action=elementor)

A kiemeltként megjelölt termékeken külön jelvény jelenhet meg. Alapértelmezett felirata „Új”, a **Címke tartalma** mezőben átírhatod. A **Villanás** kapcsolóval be- és kikapcsolhatod.

### Termék kiemeltként megjelölése

A WooCommerce-ben háromféleképpen jelölhetsz meg terméket kiemeltként:

1. **Termékek → Összes termék**: kattints a csillagra a kiemelés oszlopban. Ha az oszlop nem látszik, kapcsold be a **Megjelenítési beállítások** között.
2. **Termékek → Összes termék**: a termék sorában válaszd a gyorsszerkesztést, és pipáld be a kiemelt jelölőnégyzetet.
3. **Termékek → Összes termék**: szerkeszd a terméket, a jobb oldali oszlopban a katalógus láthatóságát szerkesztve pipáld be a „Ez egy kiemelt termék” jelölőnégyzetet.

![A terméklista a kiemelés oszlopával: a kitöltött csillag kiemelt terméket jelöl](./kepek/woocommerce-kiemelt-termekek-lista.webp)

*A terméklista a kiemelés oszlopával: a kitöltött csillag kiemelt terméket jelöl* (https://minta-bolt.hu/wp-admin/edit.php?post_type=product)

A képen a Lapos tányér és a Kerámia bögre van kiemelve (kitöltött csillag).

## Gyorsnézet

![A Gyorsnézet szakasz](./kepek/woocommerce-termekek-gyorsnezet.webp)

*A Gyorsnézet szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=29&action=elementor)

A gyorsnézet felugró ablakban mutatja a termék adatait (cím, ár, leírás, kategória, mennyiség és **Kosárba teszem** gomb), így a látogatónak nem kell másik oldalra lépnie. A **Gyorsnézet** beállítás három értéket vesz fel:

- **Nincs**: nincs gyorsnézet.
- **Gombra kattintáskor**: a termékképen gyorsnézet-jelvény jelenik meg, a felugró ablak arra kattintva nyílik.
- **Képre kattintáskor**: a termékképre kattintva nyílik az ablak.

![A gyorsnézet felugró ablaka a weboldalon](./kepek/woocommerce-termekek-gyorsnezet-eredmeny.webp)

*A gyorsnézet felugró ablaka a weboldalon* (https://minta-bolt.hu/woo-termekek-teszt/)

További testreszabás a **Stílus** fülön, a **Gyorsnézet** szakaszban van. A felugró ablak szerkezetét és a „Gyorsnézet” szöveget [fejlesztői szűrőkkel](https://hub.hellowp.io/hu/plugins/ultimate-elementor/woocommerce-termekek-fejlesztoknek/) is módosíthatod.

## Lapozás

![A Lapozás szakasz](./kepek/woocommerce-termekek-lapozas.webp)

*A Lapozás szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=29&action=elementor)

A lapozás csak rács elrendezésnél érhető el. A **Típus** értékei:

- **Nincs**
- **Számok**
- **Számok + előző/következő nyíl**

A lapozás a rácsnál megadott **Termékek oldalanként** értéken alapul. A lapozás igazítását és stílusát a **Stílus** fülön állíthatod.

## Kapcsolódó termékek

Ha az Elementor Pro is telepítve van, a **Lekérdezés → Forrás** listában megjelenik a **Kapcsolódó termékek** is. Ezzel egyetlen termékoldal-sablonba tehetsz olyan listát, amely az éppen megnyitott termék kategóriáiból mutat termékeket. Ha például a termék a „Zene” és az „Album” kategóriában van, a kapcsolódó termékek ebből a két kategóriából kerülnek ki.

1. Nyisd meg az **Elementor → Saját sablonok** oldalt, és hozz létre egy új **Egy termék** sablont.
2. Add meg a sablon nevét.
3. Építsd fel a termékoldalt, vagy importálj kész blokkot.
4. Húzd a sablonba a **Woo - termékek** widgetet.
5. A **Lekérdezés → Forrás** beállításnál válaszd a **Kapcsolódó termékek** értéket.
6. Tedd közzé a sablont, és a megjelenítési feltételeknél add meg, mely termékoldalakon legyen érvényes.

A widget minden elrendezési és stílusbeállítása a kapcsolódó termékekre is érvényes.