# Woo terméklista: rács, masonry és metro elrendezés

> Termékek megjelenítése rácsban, masonry rácsban és metro elrendezésben a Woo terméklista widgettel: stílus, oszlopok, minták és korlátozások.

A **Woo terméklista** widget három fix oszlopszámú elrendezést tud: rácsot, masonry rácsot és metro elrendezést (a negyedik, a karusszel külön fejezetben szerepel). Mindhárom Pro funkció: a widget a Free bővítmény panelén nem jelenik meg. Szükséges az aktív WooCommerce néhány közzétett termékkel, és a **The Plus Addons → Widgets** oldalon be kell kapcsolni a widgetet.

## Termékek rácsban

A rács a widget alapértelmezett elrendezése: egyforma kártyák, soronként azonos számú termékkel, eszközönként külön oszlopszámmal.

1. Húzd az oldalra a **Woo terméklista** widgetet. A **Tartalom → Tartalom elrendezése** szakaszban az **Elrendezés** már **Rács**.
2. A **Stílus** mezőben válaszd ki a kártya megjelenését: **Stílus 1**, **Stílus 2**, **Stílus 3** vagy **Egyéni megjelenés**, ahol saját sablonból építed fel a kártyát.
3. Nyisd meg az **Oszlopok kezelése** szakaszt, és add meg az oszlopok számát. Az alapérték asztali gépen 4, táblagépen 3, mobilon 2; mindegyik 1 és 6 között választható.

![Termékek rácsban, soronként négy kártyával](./kepek/bejegyzes-termek-listak-3-termek-racs.webp)

*Termékek rácsban, soronként négy kártyával* (https://minta-bolt.hu/bt3-racs/)

A képen két sor, soronként négy egyforma termékkártya látszik, a terméknévvel és az árral.

| Beállítás | Hol | Értékek | Alapérték |
|---|---|---|---|
| **Elrendezés** | Tartalom elrendezése | Rács, Masonry, Metro, Karusszel | Rács |
| **Stílus** | Tartalom elrendezése | Stílus 1, 2, 3, Egyéni megjelenés | Stílus 1 |
| **Oszlop asztali nézetben** | Oszlopok kezelése | 1 és 6 oszlop | 4 oszlop |
| **Oszlop táblagépen** | Oszlopok kezelése | 1 és 6 oszlop | 3 oszlop |
| **Oszlop mobilon** | Oszlopok kezelése | 1 és 6 oszlop | 2 oszlop |
| **Megjelenített bejegyzések maximális száma** | Tartalom forrása | szám | 8 |

Egyenetlen termékneveknél egyenetlen kártyákat kapsz. Tartsd hasonló hosszúságúra a neveket, vagy használj masonry elrendezést.

## Termékek masonry rácsban

Ha a termékképeid különböző méretűek, a rács üres foltokat hagy. A masonry elrendezésben minden kártya megtartja a saját magasságát, és a widget hézag nélkül egymás alá rakja őket.

1. Húzd az oldalra a **Woo terméklista** widgetet.
2. A **Tartalom → Tartalom elrendezése** szakaszban állítsd az **Elrendezés** mezőt **Masonry** értékre.
3. Az **Oszlopok kezelése** szakasz ugyanúgy működik, mint a rácsnál: asztali gépen 4, táblagépen 3, mobilon 2 oszlop az alapérték.

Ha minden termékfotód négyzet alakú, a masonry ugyanúgy néz ki, mint a rács.

## Termékek metro elrendezésben

A metro elrendezés magazinszerű oldalt ad: néhány termék nagy csempét kap, a többi a körülöttük lévő kisebbeket. A csempék mintázata előre elkészített.

1. Húzd az oldalra a **Woo terméklista** widgetet, és állítsd az **Elrendezés** mezőt **Metro** értékre.
2. Az **Oszlopok kezelése** szakaszban a metro saját mezőit látod:
   - **Metro oszlop**: 3, 4, 5 vagy 6 oszlop, alapértelmezetten 3;
   - **Metro stílus**: a csempék mintázata az adott oszlopszámhoz, vagy egyéni elrendezés;
   - **Reszponzív táblagépnézet**: alapból be van kapcsolva, és külön táblagépes beállítást ad.

![Termékek metro elrendezésben, vegyes méretű csempékkel](./kepek/bejegyzes-termek-listak-3-termek-metro.webp)

*Termékek metro elrendezésben, vegyes méretű csempékkel* (https://minta-bolt.hu/bt3-metro/)

A képen a nagy és a kis csempék a mintázat szerint váltakoznak, a terméknév és az ár a csempe közepén áll.

![Az Oszlopok kezelése szakasz metro elrendezésnél](./kepek/bejegyzes-termek-listak-3-panel-metro-oszlopok.webp)

*Az Oszlopok kezelése szakasz metro elrendezésnél* (https://minta-bolt.hu/wp-admin/post.php?post=182&action=elementor)

A képen a **Metro oszlop**, a **Metro stílus** és a táblagépes párjuk látszik.

### Korlátozások

- A csempék a mintázat szerint követik egymást, pozíció alapján, nem aszerint, melyik termék a fontosabb. A sorrendet a **Sorrend alapja** és a **Termék megjelenítése** mezővel szabályozhatod.
- A **Kívánságlista** és a **Legutóbb megtekintett** listatípus metro elrendezéssel nem működik.
- Az asztali oszlopszám metro elrendezésnél nem látszik: a **Metro oszlop** mezőt használd.