Gyakorlati példák

Változatok táblázata a termékoldalon

Ezzel a változó termékek változatait táblázatban mutathatod a termékoldalon, a termékkategória-archívumot pedig külön táblázattal.

1. Nyisd meg a WooCommerce → Beállítások → Terméktábla oldalt.
2. A Columns lapon állítsd be a termékoldali táblázat oszlopait, például Termék ID, Termék neve, Termékkép, Ár és Gombok.
3. A Gombok oszlop VARIATIONS listájában válaszd azt a lehetőséget, amelyben a vásárló kiválaszthatja az attribútumokat (például szín és méret), és közvetlenül a táblából kosárba teheti a terméket.
4. Állítsd be a Settings, Filters és Design lapot, majd a Presets Manager gombbal mentsd el az előbeállítást, például „Változatok fül” néven.
5. A tartalomban megjelenő változattáblához kevesebb hely van, ezért ott töröld az Termék ID és az Ár oszlopot, és ezt is mentsd külön előbeállításként.
6. A kategória-archívumhoz készíts harmadik előbeállítást. Oszlopok: Termék neve, Termékkép, Ár, Címkék, Gombok. A Gombok oszlop VARIATIONS listájában válaszd a termékoldalra mutató „Bővebben” gombot (ez csak változó termékeknél működik). A Filters lapon kapcsold be az Enable Filters kapcsolót: az osztályozásszűrőnél a termékcímkéket válaszd, a keresőszűrőt hagyd alapon.
7. Az Integration lapon kapcsold be a Termékkategóriák, Termékváltozatok fül és Termékváltozatok a tartalomban helyszínt, és mindhez válaszd ki a megfelelő előbeállítást.
8. Kattints a Beállítások mentése gombra.

A termékoldalon a változattábla a termék összefoglalója alatt jelenik meg, a Változatok fül a WooCommerce fülei között. A kategória-archívumban a termékrács helyett szűrős terméktábla lesz.

Egyedi sablon (JetWooBuilder)

Ha egyedi termékoldali sablont használsz, a változattáblát shortcode-dal is beteheted: a shortcode-generátorban válaszd a Product Variations lekérdezést és a Current product forrást, másold ki a shortcode-ot, és illeszd be a sablon Shortcode widgetjébe. Ugyanígy tehetsz terméktáblát a terméklista- és kategória-archívum sablonjába is.

Árazási tábla

Előfizetési csomagok táblázatát készíthetsz változó termékből.

1. Hozz létre egy új terméket (Termékek → Új hozzáadása), nevezd el, és a termékadatoknál válaszd a Variálható termék típust.
2. Az Attribútumok fülön vegyél fel egy új attribútumot, például „Előfizetési csomag” néven, az értékeket függőleges vonallal válaszd el: Alap | Haladó | Prémium. Jelöld be a „Változatokhoz használható” négyzetet, és mentsd az attribútumokat.
3. A Változatok fülön kattints a Változatok létrehozása gombra, majd nyisd ki a változatokat, és add meg az árat, a képet és a leírást.
4. Tedd közzé a terméket.
5. A WooCommerce → Beállítások → Terméktábla oldalon az Columns lapon add hozzá a Teljes leírás oszlopot, és töröld a Termék neve oszlopot, mert a csomag neve a leírásban szerepel. Az oszlopok LABEL mezőjét ürítsd ki, hogy ne legyen fejléc felirat.
6. A Settings lapon a DIRECTION legyen Vertical (vagy hagyd Horizontal, ha sorokban szeretnéd).
7. A Design lapon a Table Body szakaszban állíts be háttérszínt, váltakozó háttérszínt, szegélyt és belső margót.
8. Mentsd az előbeállítást (például „Előfizetések”), majd a Beállítások mentése gombbal az egészet.
9. Jelenítsd meg a táblát:
   • Blokkal: a Product Table blokk Setup Table ablakában a Query lapon válaszd a Product Variations típust, a GET VARIATIONS FROM listában a Specific product ID(s) lehetőséget, és add meg a termék azonosítóját. A Columns lapon válaszd ki az előbeállítást, majd Done.
   • Elementor widgettel: a Query lapon adhatod meg a megjelenítendő termékek azonosítóit az Include Products mezőben, a Settings lapon a Direction legyen Vertical, a Filters lapon pedig kapcsold ki az Inherit global filters kapcsolót, és ürítsd ki a szűrő típusát, ha nem kell szűrő.
   • Shortcode-dal (Elementorban vagy Bricksben): a generátorban a Product Variations lekérdezés és a Specific product ID(s) forrás, a Columns lapon az előbeállítás kiválasztása, majd a shortcode másolása a Shortcode elembe.

Összehasonlító táblák

Három tipikus felhasználás, mindhez előbeállítás az alap. Hozz létre egy „Összehasonlító tábla” előbeállítást négy oszloppal (Termékkép, Termék neve, Ár, Gombok), a Termékkép és Termék neve oszlopnál kapcsold be a Kapcsolt kapcsolót, a DIRECTION legyen Horizontal, a szűrőket kapcsold ki, és mentsd.

Stílusok összehasonlítása (blokk)

1. Keresd meg a Termékek → Összes termék listában az összehasonlítani kívánt termékek azonosítóit: vidd fölé az egeret a termék neve fölé, és olvasd le az „ID” értéket.
2. A cikkben szúrj be egy Product Table blokkot, és nyisd meg a Setup Table ablakot.
3. A Query lapon a QUERY TYPE legyen Products, és az INCLUDE mezőbe írd az azonosítókat vesszővel elválasztva.
4. A Settings lapon válaszd ki az előbeállítást, majd Done.

Méretek összehasonlítása (shortcode)

Egy termék változatait mutatja, például méretenként más leírással.

1. A változó termék minden változatánál töltsd ki a Leírás mezőt (például a méreteket).
2. A shortcode-generátor Query lapján: QUERY TYPE: Product Variations, GET VARIATIONS FROM: Specific product IDs, és add meg a termék azonosítóját.
3. A Columns lapon töröld a Termék neve oszlopot, és adj hozzá Teljes leírás oszlopot. A mezők: Termékkép, Teljes leírás, Ár, Gombok.
4. A Settings lapon kapcsold ki a fejlécet és a láblécet, a DIRECTION legyen Horizontal.
5. A Filters lapon kapcsold ki az Enable Filters kapcsolót.
6. Generáld és másold ki a shortcode-ot, majd illeszd be a cikkbe egy Shortcode blokkba.

Évszakos összehasonlítás (blokk, függőleges)

1. Gyűjtsd ki a termékek azonosítóit.
2. Szúrj be egy Product Table blokkot, és add meg az azonosítókat az INCLUDE mezőben.
3. A Columns lapon alakítsd ki a sorrendet: Termék neve, Termékkép, Összegzés, Címkék, Ár, Gombok.
4. A Settings lapon kapcsold ki a fejlécet és láblécet, a DIRECTION legyen Vertical.
5. A Filters lapon kapcsold ki az Enable Filters kapcsolót, majd Done.

Stílus

Hogy a táblák illeszkedjenek a webhelyhez, a WooCommerce → Beállítások → Terméktábla → Design lapon állíts színeket, betűket és szegélyeket. Az előbeállításokban lévő változtatások minden táblán érvényesülnek, ahol az előbeállítást használod.