# Woo-szűrő: kategória, attribútum, szín, kép és méret szerinti szűrés

> WooCommerce-termékek szűrése kategória és termékattribútum szerint gombokkal, színmintákkal és képekkel a WP-szűrők widgettel.

A **WP-szűrők** widget **Woo-szűrő** típusa a WooCommerce saját adataiból épít szűrőt: a termékkategóriákból és a termékattribútumokból (például szín, méret, márka). Három megjelenése van: **Gomb**, **Szín** és **Kép**. A negyedik forrás, az **Értékelés**, külön fejezetben szerepel ([értékelés szerinti szűrő](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kereses-szurok-woo-szuro-ertekeles-visszaallitas/)).

A widget a Pro változat része. Kapcsold be a **The Plus Addons → Widgets** oldalon (**WP-szűrők**). Az Elementor és a WooCommerce legyen aktív, néhány közzétett termékkel. A szűrő mellé tegyél az oldalra egy **Woo terméklista** widgetet **Keresési lista** típussal, mert a szűrő ennek a listának a tartalmát szűkíti ([lásd itt](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/bejegyzes-termek-listak-termek-attekintes/)).

## A tétel közös beállításai

A szűrők a widget **Szűrőterület** szakaszában tételekként vannak. Egy Woo-szűrő tétel beállításai:

1. A **Szűrő típusa** legyen **Woo-szűrő**.
2. A **Forrás kiválasztása** mezőben válaszd a megjelenést: **Gomb**, **Szín**, **Kép** vagy **Értékelés**.
3. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**.
4. A **Válassz osztályozást (taxonomy)** mezőben add meg, mi szerint szűrsz: egy osztályozást (például **product_cat**, a termékkategória) vagy a **Product Attributes** értéket, ha egy termékattribútum alapján szeretnél szűrni.
5. **Product Attributes** esetén az **Attribútumok kiválasztása** listából válaszd ki az attribútumot (például **Szín**, **Méret**, **Márka**). A lista a **Termékek → Attribútumok** oldalon felvett attribútumokat tartalmazza.

![A Woo-szűrő tétel beállításai: Szín forrás, Product Attributes osztályozás, Szín attribútum](./kepek/kereses-szurok-2-panel-szin.webp)

*A Woo-szűrő tétel beállításai: Szín forrás, Product Attributes osztályozás, Szín attribútum* (https://minta-bolt.hu/wp-admin/post.php?post=314&action=elementor)

A képen a tétel **Szín** forrással és a **Szín** attribútummal látszik. Alatta az **Asztali gép**, **Tablet** és **Mobil** mező az oszlopszámot adja meg (alapból 4, 3 és 2), a **Darabszám megjelenítése** pedig a szűrő elemei mellé kiírja, hány termék tartozik hozzájuk.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Forrás kiválasztása** | **Gomb**, **Szín**, **Kép** vagy **Értékelés**: az elemek megjelenése. | üres |
| **Típus kiválasztása** | Az adatforrás: **Osztályozás (taxonomy)** vagy egyéni mező kapcsolat. | üres |
| **Válassz osztályozást (taxonomy)** | Melyik osztályozás adja az elemeket. A termékattribútumokhoz a **Product Attributes** kell. | üres |
| **Attribútumok kiválasztása** | A termékattribútum, ha az osztályozás **Product Attributes**. | üres |
| **Darabszám megjelenítése** | A termékek száma az elem mellett. | Bekapcsolva |
| **Eszköztipp** | Súgószöveg az elem fölé húzott egérnél. | Kikapcsolva |
| **Asztali gép / Tablet / Mobil** | Hány oszlopban jelenjenek meg az elemek. | 4 / 3 / 2 oszlop |
| **Címsor beállítása** | A szűrő címe. | |

Ha a **Típus kiválasztása** mező üres, a szűrő helyén a „Select Type” hibaüzenet jelenik meg.

## Termékkategória szerinti szűrő

A kategóriaszűrő a bolt valódi kategóriáiból áll, így a látogató egy kattintással szűkíti a kínálatot egy részlegre. Legyenek termékeid legalább két kategóriában.

1. Vegyél fel egy új tételt a **Szűrőterület** szakaszban.
2. A **Szűrő típusa** legyen **Woo-szűrő**, a **Forrás kiválasztása** például **Gomb**.
3. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**.
4. A **Válassz osztályozást (taxonomy)** értéke legyen **product_cat**.

![A kategóriaszűrő gombjai a terméklista fölött: Bögrék, Táskák, Füzetek](./kepek/kereses-szurok-2-kategoria.webp)

*A kategóriaszűrő gombjai a terméklista fölött: Bögrék, Táskák, Füzetek* (https://minta-bolt.hu/tp-ks2-kategoria/)

A képen minden kategória egy gomb, mellette a termékek számával, ha bekapcsolod a **Darabszám megjelenítése** kapcsolót.

Ha a kategóriáknak alkategóriái is vannak, a **WP-szűrő** típus **Jelölőnégyzet** vagy **Rádiógomb** forrásánál az **Alkategória mutatása** kapcsolóval jelenítheted meg őket, a **Kizárás** kapcsolóval pedig egyes elemeket elrejthetsz.

![A WP-szűrő Jelölőnégyzet forrásának beállításai product_cat osztályozással: Alkategória mutatása és Kizárás](./kepek/kereses-szurok-2-panel-kategoria.webp)

*A WP-szűrő Jelölőnégyzet forrásának beállításai product_cat osztályozással: Alkategória mutatása és Kizárás* (https://minta-bolt.hu/wp-admin/post.php?post=320&action=elementor)

A képen az **Alkategória mutatása** kapcsoló be van kapcsolva, a **Kizárás** ki van kapcsolva.

## Szűrés termékattribútum szerint

A WooCommerce a termékek egyedi tulajdonságait (anyag, márka, szabás) attribútumként tárolja, és mindegyik saját osztályozás, például `pa_anyag`. Az **Attribútumok kiválasztása** lista minden ilyen attribútumot felkínál, így bármelyikből szűrő készíthető.

Követelmény: legyen legalább egy attribútumod a **Termékek → Attribútumok** oldalon, értékekkel, és rendeld hozzá a termékekhez.

1. Add hozzá a tételt, a **Szűrő típusa** legyen **Woo-szűrő**, válassz megjelenést a **Forrás kiválasztása** mezőben.
2. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**.
3. A **Válassz osztályozást (taxonomy)** értéke legyen **Product Attributes**.
4. Az **Attribútumok kiválasztása** listában válaszd ki az attribútumot.

Az elemek sorrendjét a **WP-szűrő** típus **Woo-rendezés** kapcsolója szabályozza a rendezési lehetőségekkel (lásd [a készlet szerinti szűrőt](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kereses-szurok-wp-szuro-termek/)).

## Attribútum típusa: szöveg, szín, kép, gomb

A szín- és képszűrő akkor mutat színmintát vagy képet, ha az attribútumnak ezt a típusát beállítod. A **Termékek → Attribútumok** oldalon az attribútum szerkesztésekor a **Típus** mezőben négy érték közül választhatsz: **Szöveg**, **Szín**, **Kép**, **Gomb**.

![Az attribútum szerkesztése: a Típus mező értéke Szín](./kepek/kereses-szurok-2-attr-tipus.webp)

*Az attribútum szerkesztése: a Típus mező értéke Szín* (https://minta-bolt.hu/wp-admin/edit.php?post_type=product&page=product_attributes&edit=1)

A képen a **Szín** attribútum **Típus** mezője **Szín**. Ez az érték teszi lehetővé, hogy minden attribútumértékhez színt rendelj.

Az attribútum típusától függően az értékek (például „Piros”) szerkesztőoldalán új mező jelenik meg: **Szín** típusnál egy színválasztó, **Kép** típusnál egy kép kiválasztó, **Gomb** típusnál a gomb szövege.

![Az attribútumérték szerkesztése: a Szín mező a színválasztóval](./kepek/kereses-szurok-2-attr-ertek.webp)

*Az attribútumérték szerkesztése: a Szín mező a színválasztóval* (https://minta-bolt.hu/wp-admin/term.php?taxonomy=pa_szin&post_type=product&tag_ID=47)

A képen a „Piros” érték szerkesztőoldala látszik, a **Szín** mezőben a **Szín kiválasztása** gombbal.

## Színminta szűrő

A szín szerinti szűrőnél a látogató nem szavakat, hanem a tényleges színt látja. Követelmény: egy attribútum (például **Szín**) **Szín** típussal, és minden értékhez beállított szín.

1. Add hozzá a tételt, a **Szűrő típusa** legyen **Woo-szűrő**.
2. A **Forrás kiválasztása** legyen **Szín**.
3. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**, a **Válassz osztályozást (taxonomy)** **Product Attributes**.
4. Az **Attribútumok kiválasztása** listából válaszd a színattribútumot.

![A színmintás szűrő: piros, kék és zöld színminta a terméklista fölött](./kepek/kereses-szurok-2-szin.webp)

*A színmintás szűrő: piros, kék és zöld színminta a terméklista fölött* (https://minta-bolt.hu/tp-ks2-szin/)

A képen az értékek színes négyzetek, a termékeknél beállított színek szerint.

## Képes szűrő (márka, mintázat)

Egyes értékeket jobban kifejez egy kép, mint egy szó vagy egy színminta: egy márka logója, egy anyag mintázata. A képes szűrő az attribútumértékhez rendelt képet mutatja kattintható elemként. Követelmény: egy attribútum **Kép** típussal, és minden értékéhez feltöltött kép.

1. Add hozzá a tételt, a **Szűrő típusa** legyen **Woo-szűrő**.
2. A **Forrás kiválasztása** legyen **Kép**.
3. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**, a **Válassz osztályozást (taxonomy)** **Product Attributes**.
4. Az **Attribútumok kiválasztása** listából válaszd azt az attribútumot, amelynek értékein képek vannak.

![A képes szűrő: két képes elem a márka attribútum értékeihez](./kepek/kereses-szurok-2-marka.webp)

*A képes szűrő: két képes elem a márka attribútum értékeihez* (https://minta-bolt.hu/tp-ks2-marka/)

A képen a két márka egy-egy képként jelenik meg, a termékek fölött.

## Méretszűrő gombokkal

A méret az egyik leggyakrabban szűrt tulajdonság, és a vásárlók általában gombsort várnak (S, M, L, XL), nem jelölőnégyzeteket. Követelmény: egy méretattribútum (például **Méret**, `pa_meret`) értékekkel és a termékekhez rendelve.

1. Add hozzá a tételt, a **Szűrő típusa** legyen **Woo-szűrő**.
2. A **Forrás kiválasztása** legyen **Gomb**.
3. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**, a **Válassz osztályozást (taxonomy)** **Product Attributes**.
4. Az **Attribútumok kiválasztása** listában válaszd a **Méret** attribútumot.

![A méretszűrő gombjai: S, M, L](./kepek/kereses-szurok-2-meret.webp)

*A méretszűrő gombjai: S, M, L* (https://minta-bolt.hu/tp-ks2-meret/)

A képen a méretek egy-egy gombként látszanak. A **Gomb** megjelenés bármelyik attribútumhoz használható, nem csak a mérethez.

## Hibaelhárítás

**A szűrő helyén „Select Type” hibaüzenet áll.** A **Típus kiválasztása** mező üres; válaszd az **Osztályozás (taxonomy)** értéket.

**Az attribútum nem jelenik meg a listában.** Az **Attribútumok kiválasztása** lista csak akkor kínál attribútumot, ha a **Válassz osztályozást (taxonomy)** értéke **Product Attributes**, és az attribútum létezik a **Termékek → Attribútumok** oldalon.

**A színminta vagy a kép nem látszik.** Az attribútum **Típus** mezője legyen **Szín**, illetve **Kép**, és minden értékhez adj meg színt vagy képet.

**A szűrő nem változtatja a listát.** A terméklista típusa legyen **Keresési lista**.