How to create a custom WooCommerce category page design
Az alapértelmezett WooCommerce kategória oldal design alternatíváját keresed a WordPress témádban? A WooCommerce termékkategóriák egyedi dizájnjának létrehozásával optimalizált vásárlási élményt kínálhat, ami pozitív hatással lehet áruháza eredményére.
A megfelelő bővítmény segítségével a saját egyedi WooCommerce kategóriaoldal elrendezésének létrehozása sem kell, hogy bonyolult legyen. Ezt fogjuk megmutatni ebben a bejegyzésben. Bemutatjuk, hogyan hozhatsz létre egyéni, táblázatos elrendezést a WooCommerce kategóriáid számára. Így pontosan te irányíthatod, hogy milyen információk jelenjenek meg, és a vásárlók hogyan lépjenek interakcióba a termékeiddel.
Itt egy példa arra, amit ebben a bejegyzésben fogsz felépíteni:
Ezzel a táblázatos megközelítés néhány előnyével kezdjük. Ezután lépésről lépésre bemutatjuk, hogyan végezheted el ezt a saját WooCommerce áruházadban a WooCommerce Product Table plugin segítségével.
A táblázatos elrendezés használatának előnyei a kategóriaoldalakon
Míg e-kereskedelmi áruházad kategóriaoldalának pontos kialakítása a WordPress témádtól függ, a legtöbb téma kategóriaoldalának kialakítása valahogy így néz ki:
Ez az elrendezés bizonyos helyzetekben jó, de korlátozza a megjeleníthető termékek számát. Azt is korlátozza, hogy mennyi információt adhatsz meg az egyes termékekről (bár a termékek gyorsnézeti gombjainak hozzáadása egy módja ennek mérséklésére).
A Woo Multistore írt a WooCommerce kategóriaoldalának olyan módon történő kialakításának fontosságáról, amely növeli a konverziókat. A táblázatos elrendezés segít leküzdeni a hiányosságokat azáltal, hogy több terméket és információt jelenít meg egy kompakt elrendezésben, amely végül kevesebb helyet foglal el, valamint olyan extra navigációs funkciókat ad hozzá, mint a keresés és a szűrés.
Ez azt jelenti, hogy több terméket/termékadatot tudsz a vásárlók szeme elé tárni, ami biztosítja, hogy a teljes katalógusodat láthatják, és növeli az esélyét annak, hogy vásárolnak.
A keresőmotorok számára is SEO-előnyökkel jár, mivel egy teljesen egyéni oldalon (vagy céloldalakon is) több egyéni tartalmat tudsz megjeleníteni. Ez lehetővé teszi, hogy olyan termékeket jelenítsen meg, amelyek relevánsak, majd kontextuális szöveget is hozzáadhat. Mindezt magasabb rangsorolással kell jutalmazni.
Míg ez a fajta elrendezés minden típusú e-kereskedelmi üzlet számára előnyös lehet, különösen hasznos:
- nagykereskedelmi üzletek
- Digitális fájlok (videók, hangfájlok, e-könyvek stb.)
- Étterem
- Termékkatalógusok
- …sok más!
Hogyan hozzon létre egy egyedi WooCommerce kategóriaoldal designt a WooCommerce Product Table segítségével
A táblázatos elrendezés használatának másik előnye a WooCommerce kategóriaoldal designhoz az, hogy mindent beállíthat anélkül, hogy speciális technikai tudásra lenne szüksége.
Ezhez a WooCommerce Product Table plugint fogja használni. Ez a bővítmény a WooCommerce termékeit egy rugalmas táblázatos elrendezésben listázza, amelyet Ön irányít, valamint szűrők, keresőmezők, oldalszámozás és egyebek hozzáadásának lehetőségével együtt.
A bővítményt arra is használhatja, hogy csak bizonyos kategóriák vagy alkategóriák termékeit jelenítse meg. A WooCommerce Product Table kétféleképpen teszi ezt lehetővé:
- A terméktáblázat elrendezését központilag engedélyezheti az összes termékkategória oldalon. (Ideális, ha az összes termékkategória-oldalát testre szeretné szabni.)
- Változatlanul használhat egy rövidkódot a saját WooCommerce kategóriaoldalainak kézi létrehozásához. (Például, ha a táblázatot csak bizonyos kategóriák termékeinek felsorolására szeretné használni.)
A következőkben megmutatjuk, hogyan állíthatja be a WooCommerce Product Table-t mindkét lehetőség eléréséhez.
A WooCommerce Product Table beállítása
Mihelyt telepítette és aktiválta a WooCommerce Product Table bővítményt, konfigurálnia kell az alapértelmezett beállításait.
Ezzel szabályozhatja, hogy milyen információk jelenjenek meg a terméktáblában, és hogyan működjön minden, például, hogy megjelenjenek-e bizonyos termékjellemzők vagy sem, vagy hogyan működjön a kosárba helyezés funkció.
Az induláshoz lépjen a WooCommerce → Beállítások → Termékek → Terméktáblák menüpontba, hogy hozzáférjen a kategória plugin beállításaihoz.
Érdemes átnézni az összes elérhető beállítást, és kiválasztani azokat, amelyek megfelelnek az egyedi helyzetének. Mi azonban most csak az alapokkal foglalkozunk, amelyek elengedhetetlenek a WooCommerce kategóriaoldalának kialakításához.
Először is keresse meg az Oszlopok beállítást a Táblák tartalma szakasz alatt. Itt fogja szabályozni, hogy milyen információk jelenjenek meg a táblázatban. Az alapvető termékinformációk megjelenítésén kívül megjeleníthetsz termékattribútumokat, egyéni mezőket és egyebeket is.
Az oszlopbeállítások teljes listáját itt találod, de ez a beállítás egy jó alapváltozat, amely a legtöbb áruház esetében működni fog:
image, name, description, price, buy
Tovább lentebb találod az Add to cart oszlop szekciót, amellyel a kosárba helyezés gombokat vezérelheted.
A tömeges vásárlások vonzása érdekében olyan jelölőnégyzeteket adhat hozzá, amelyek lehetővé teszik a vásárlók számára, hogy tömegesen több terméket adjanak a kosarukba. Vagy egyszerűen csak egy külön kosárba helyezés gombot adhatsz hozzá minden egyes termékhez (vagy mindkettőhöz!):
Amikor befejezted, mindenképpen mentsd el a változtatásokat.
Amikor konfiguráltad a termék beállításait, két lehetőséged van a tényleges WooCommerce kategóriák létrehozására. Ezeket nézzük meg a következőkben.
2a. Terméktáblák engedélyezése az összes kategóriaoldalon
A WooCommerce terméktáblázata tartalmaz egy olyan opciót, amely automatikusan hozzáadja a terméktábla elrendezését az összes kategóriaoldalhoz. Ez a legegyszerűbb lehetőség, és mindössze egy másodpercet vesz igénybe a beállítása.
A bővítmény beállítások oldalán egyszerűen jelölje be a ‘Termékkategória-archívumok’ négyzetet:
Ez globálisan engedélyezi a táblázatos elrendezést minden kategóriában, felváltva a témájához mellékelt alapértelmezett elrendezést.
Tudjon meg többet erről a módszerről.
2b. Használjon rövidkódot a saját WooCommerce kategóriaoldalának kialakításához
Egy rövidkódot is használhat a WooCommerce termékek kategóriák szerinti felsorolásához. Ez a lehetőség tökéletes, ha nem akarod használni a terméktábla elrendezést MINDEN kategóriádban.
Egyszerűen add hozzá a plugin rövidkódját egy normál WordPress oldalhoz, és add meg, hogy mely kategóriákból szeretnéd felsorolni a termékeket. Ismételje meg a folyamatot annyiszor, ahányszor csak szeretné – egyszer minden kategóriához.
Ezzel a módszerrel lényegében egy új WooCommerce termékkategória oldalt hoz létre minden egyes megjeleníteni kívánt termékkategóriához, ahelyett, hogy globálisan újratervezné a WooCommerce kategóriaoldalt.
A meglévő kategóriaoldalait továbbra is használhatja az új táblázatos elrendezéssel együtt. Vagy egyszerűen kicserélheti az egyes meglévő termékkategória-oldalakra mutató linkeket az új, táblázatos kategórialapjaira. (Tipp: Ha már nem használja a beépített kategóriaoldalakat, irányítsa át őket az újakra, ahol terméktáblákat használ.)
Az első lépésekhez lépjen az Oldalak → Új hozzáadása menüpontra, hogy létrehozzon egy alapvető WordPress-oldalt. Ezután add hozzá az [product_table] rövidkódot az oldalhoz. A kategória címét a szokásos cím mező segítségével is hozzáadhatja.
A rövidkód alapértelmezés szerint az összes WooCommerce-terméket megjeleníti.
A kategória rövidkód paraméterével azonban kiszűrheti az egyes kategóriák és/vagy alkategóriák termékeit. Több kategóriát is kombinálhat, vagy olyan feltételeket is létrehozhat, mint például, hogy egy terméknek több kategóriában vagy alkategóriában is szerepelnie kell a megjelenítéshez.
A “szék” kategóriából származó termékek kiszűréséhez például a következő rövidkódot használhatja:
[product_table category="chair"]
Ha kategóriaképet vagy kategória nevet szeretne hozzáadni, azt a rövidkód felett a normál WordPress szerkesztővel is megteheti.
Amint közzéteszed az oldalt, látnod kell az új WooCommerce kategóriaoldal kialakítását:
A további WooCommerce kategóriákhoz tartozó oldalak létrehozásához ismételd meg a folyamatot minden egyes termékkategória vagy alkategória esetében, amelyet meg szeretnél jeleníteni.
A WooCommerce kategóriák kereshetőbbé tétele szűrőkkel
Ha több keresési és szűrési eszközt szeretne hozzáadni a WooCommerce kategóriáihoz, két lehetősége van:
- A WooCommerce terméktábla beállításain keresztül keresési, rendezési és szűrési lehetőségeket adhat hozzá. Ezek a terméktáblád felett vagy alatt fognak megjelenni.
- A WooCommerce Product Table tartalmaz widgeteket, amelyekkel szűrőket adhatsz hozzá az oldalsávodhoz.
Választhatod az általad preferált módszert, vagy az is teljesen rendben van, ha egyszerre használod mindkét megközelítést. Így a vásárlóid választhatják ki az általuk preferált módszert.
A keresési, rendezési és szűrési lehetőségek hozzáadásához közvetlenül a táblázat elrendezéséhez menj a WooCommerce → Beállítások → Termékek → Terméktáblák menüpontba. Ezután görgessen le a táblázatvezérlők részhez, és konfigurálja az opciókat a preferenciáinak megfelelően:
Ebben a súgócikkben tudhat meg többet.
A szűrő widgetek használatához a Megjelenés → Widgetek menüpontra léphet. Ott négy új widgetet találsz a “Product Table:” előtaggal. Hozzáadhatja az összes widgetet, vagy csak azokat a konkrét szűrőket választhatja ki, amelyeket szeretne felvenni:
Itt egy példa arra, hogyan nézhet ki mindkét szűrőcsoport:
Hogyan hozzon létre egy egyéni WooCommerce kategóriaoldal dizájnt kóddal
Ha ért a PHP, HTML és CSS nyelvhez, akkor az is lehetséges, hogy egy egyéni WooCommerce kategóriaoldal dizájnt hozzon létre kóddal, WooCommerce plugin nélkül.
A téma vagy a gyermektéma archive-product.php fájljával kell dolgoznia. Ugyanezt a megközelítést használhatja az egyes termékoldalak szerkesztésére is a single-product fájlon keresztül vagy a webáruháza más részein keresztül.
Mivel sajnos, mivel az egyes változtatásokhoz közvetlenül a téma sablonfájljainak kódját kell szerkesztenie, ez a módszer nem elérhető a nem fejlesztők számára. Javasoljuk, hogy forduljon a Codeable-hez, ha segítségre van szüksége, vagy maradjon a fenti egyszerűbb táblázatos elrendezési módszernél.
Készítse el egyéni WooCommerce kategóriaoldal-tervezését még ma!
Az egyéni WooCommerce kategóriaoldal-tervezés létrehozásával a termékek megjelenítésének egy vásárlóbarát módját használhatja.
A táblázatos kategóriaoldal-tervezés használatával több terméket és az egyes termékekkel kapcsolatos több részletet tud megjeleníteni.
Azzal, hogy rengeteg hasznos keresési és szűrési lehetőséget is hozzáadhat, segítheti vásárlóit a termékek megtalálásában.
A vásárlók hatékonyabb összekapcsolásával az őket érdeklő termékekkel, több terméket adhat el, és növelheti áruháza bevételét.
A WooCommerce kategóriáinak táblázatos kialakításához használhatja a WooCommerce Product Table plugint. A telepítés egyszerű, és nincs szükséged különösebb technikai ismeretekre, mintha közvetlenül az archív sablonfájlt akarnád szerkeszteni.
Kezdje el még ma, és hozzon létre egy hatékonyabb módot a vásárlók számára a termékkategóriák böngészésére a WooCommerce áruházában
.