# WP-szűrők: ábécé, ár, élő keresés és készlet szerinti szűrés

> WooCommerce-termékek szűrése kezdőbetű, árcsúszka, élő kulcsszókereső és készletállapot szerint a WP-szűrő típussal.

A **WP-szűrők** widget **WP-szűrő** típusú tételeinek **Forrás kiválasztása** listája kilenc megjelenést kínál: **Ábécé szerinti szűrő**, **Jelölőnégyzet**, **Dátumválasztó**, **Legördülő lista**, **Rádiógomb**, **Tartománycsúszka**, **Keresőmező**, **Füles szűrő** és **Automatikus kiegészítés**. Ez a fejezet azt a négy beállítást mutatja be, amelyek a WooCommerce-termékek szűrésére valók: ábécé, ár, élő keresés és készletállapot.

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, és az oldalon legyen egy **Woo terméklista** widget **Keresési lista** típussal ([lásd itt](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/bejegyzes-termek-listak-termek-attekintes/)). A szűrőtétel felvételét a [Woo-szűrő fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kereses-szurok-woo-szuro-forrasok/) írja le.

## Ábécé szerinti szűrő

Nagy kínálatnál hasznos az A-tól Z-ig sor, amellyel a látogató a termék nevének kezdőbetűjére ugrik. Legyenek olyan termékeid, amelyek neve különböző betűvel kezdődik.

1. Add hozzá a **WP-szűrők** widgetet a terméklista fölé.
2. A **Szűrőterület** szakaszban a **Szűrő típusa** legyen **WP-szűrő**.
3. A **Forrás kiválasztása** legyen **Ábécé szerinti szűrő**.

![Az ábécé szerinti szűrő: az N betű kiválasztva, a lista a Naptár füzetre szűkült](./kepek/kereses-szurok-2-abc.webp)

*Az ábécé szerinti szűrő: az N betű kiválasztva, a lista a Naptár füzetre szűkült* (https://minta-bolt.hu/tp-ks2-wp/)

A képen az **N** betű van kiválasztva, és a lista csak az N-nel kezdődő nevű terméket mutatja. Ha egy betűre nincs termék, a lista helyén a „Nem találhatók termékek” üzenet jelenik meg.

## Ársáv szűrő

Az árcsúszka két fogantyúval állítható, és a bolt valódi áraira szűkíti a listát. A tétel a **WP-szűrő** típus **Tartománycsúszka** forrásával készül, **Osztályozás (taxonomy)** típussal. A beállítási panelen a **Megjegyzés: termékeknél működik.** felirat is ezt jelzi.

1. Vegyél fel egy tételt, a **Szűrő típusa** legyen **WP-szűrő**.
2. A **Forrás kiválasztása** legyen **Tartománycsúszka**.
3. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**.
4. Add meg a **Maximális ár**, a **Minimális ár** és a **Lépések** értékét a kínálatodhoz.
5. Írd át az **Árszimbólum** mezőt a bolt pénznemére, például `Ft`.

![A Tartománycsúszka tétel beállításai: Maximális ár, Minimális ár, Lépések és Árszimbólum](./kepek/kereses-szurok-2-panel-ar.webp)

*A Tartománycsúszka tétel beállításai: Maximális ár, Minimális ár, Lépések és Árszimbólum* (https://minta-bolt.hu/wp-admin/post.php?post=317&action=elementor)

A képen az alapértékek látszanak: **Minimális ár** 0, **Lépések** 100, az **Árszimbólum** pedig `₹`, ezért érdemes átírni.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Maximális ár** | A csúszka legmagasabb választható ára. | 10000 |
| **Minimális ár** | A csúszka legalacsonyabb választható ára. | 0 |
| **Lépések** | A csúszka lépésköze. | 100 |
| **Árszimbólum** | Az értékek mellett látszó pénznemjel. | `₹` |

A következő képen a csúszka 0 és 15000 Ft között, 500-as lépéssel áll be, a szimbólum pedig `Ft`.

![Az ársáv csúszka 0 és 15000 Ft értékkel, alatta a készletállapot legördülő lista](./kepek/kereses-szurok-2-ar-keszlet.webp)

*Az ársáv csúszka 0 és 15000 Ft értékkel, alatta a készletállapot legördülő lista* (https://minta-bolt.hu/tp-ks2-ar/)

A képen az alsó és a felső érték a csúszka két végén látszik, a pénznemjellel együtt.

## Élő termékkereső

Az élő keresőmező gépelés közben szűkíti a terméklistát, nem kell megnyomni egy gombot. Olyan termékeid legyenek, amelyeknek külön, kereshető a nevük.

1. Add hozzá a tételt, a **Szűrő típusa** legyen **WP-szűrő**.
2. A **Forrás kiválasztása** legyen **Keresőmező**.
3. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**. Üresen hagyva a „Select Type” hibaüzenet jelenik meg a mező helyén.
4. A **Helyőrző szöveg** mezőben add meg a beviteli mező szövegét, például „Keresés a termékek között...”.
5. Az **Általános szűrők** mezővel szabályozhatod, mely adatokban keressen.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Forrás kiválasztása** | **Keresőmező**: élő kulcsszókereső. | üres |
| **Típus kiválasztása** | A keresés adatforrása. | üres |
| **Helyőrző szöveg** | A mező szürke segédszövege. | üres |

A látogató a mezőbe írja a szót, és a lista az oldal újratöltése nélkül szűkül.

## Szűrés készletállapot szerint

A látogatót zavarja, ha olyan terméket talál, amit nem tud megvenni. A **Legördülő lista** forrás **Woo-rendezés** kapcsolójával készletállapot szerinti szűrőt adhatsz a listához. A lehetőségek a WooCommerce saját készletállapotát használják.

1. Vegyél fel egy tételt, a **Szűrő típusa** legyen **WP-szűrő**.
2. A **Forrás kiválasztása** legyen **Legördülő lista**.
3. A **Típus kiválasztása** legyen **Osztályozás (taxonomy)**, a **Válassz osztályozást (taxonomy)** például **product_cat**.
4. Kapcsold be a **Woo-rendezés** kapcsolót.
5. A **Kiválasztás** mezőben jelöld ki a **Raktáron** és a **Nincs készleten** lehetőséget.
6. Az **Alapértelmezett cím** mezőben add meg a lista alapfeliratát, például „Készletállapot”.

![A Legördülő lista tétel beállításai: Woo-rendezés bekapcsolva, a Kiválasztás mezőben Raktáron](./kepek/kereses-szurok-2-panel-keszlet.webp)

*A Legördülő lista tétel beállításai: Woo-rendezés bekapcsolva, a Kiválasztás mezőben Raktáron* (https://minta-bolt.hu/wp-admin/post.php?post=318&action=elementor)

A képen a **Woo-rendezés** be van kapcsolva, a **Kiválasztás** pedig a **Raktáron** értéket mutatja. A **Kiválasztás** lista további elemei: **Kiemelt**, **Akciós**, **Legkelendőbb termékek**, **Nincs készleten**, **Ár szerint növekvő sorrend**, **Ár szerint csökkenő sorrend**, **Átlagos értékelés**, **Legfrissebb**.

A látogató a listára kattintva választ a megadott lehetőségek közül.

![A legördülő lista lenyitva: Készletállapot, In Stock, Out of Stock](./kepek/kereses-szurok-2-keszlet-lista.webp)

*A legördülő lista lenyitva: Készletállapot, In Stock, Out of Stock* (https://minta-bolt.hu/tp-ks2-ar/)

A képen a lista elemei a frontenden angolul látszanak (**In Stock**, **Out of Stock**), mert a widget ezeket a feliratokat nem fordítja.

A kiválasztott elem után a terméklista a készletállapotnak megfelelően szűkül.

![A Nincs készleten szűrő kiválasztva: a lista két terméket mutat, mindkettő Nincs készleten jelvénnyel](./kepek/kereses-szurok-2-keszlet-valasztva.webp)

*A Nincs készleten szűrő kiválasztva: a lista két terméket mutat, mindkettő Nincs készleten jelvénnyel* (https://minta-bolt.hu/tp-ks2-ar/?select_woo_SgDropDown_cddef4a=outofstock)

A képen a készleten kívüli szűrő aktív, felül pedig a választott szűrő címkeként látszik.

## Hibaelhárítás

**A keresőmező 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 ársáv `₹` jelet mutat.** Az **Árszimbólum** alapértéke ez; írd át a bolt pénznemére.

**A készletállapot szűrő nem jelenik meg.** A **Woo-rendezés** kapcsolónak bekapcsoltnak kell lennie, és a **Kiválasztás** mezőben legalább egy elemet ki kell jelölnöd.

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