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

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ő).

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).

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.

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.

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.

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).

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.

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.

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.

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.

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.

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.