teljes útmutató a WooCommerce shortcodes-hoz

WooCommerce shortcodes

a WooCommerce shortcodes segítségével új és izgalmas módon jelenítheted meg a boltod adatait. A WooCommerce előre beépített rövid kódokkal rendelkezik, és bővítményeket telepíthet, hogy még többet adjon hozzá. Akár egy táblázatban szeretné felsorolni a termékeket, megjeleníteni a kosarat bárhol a webhelyén, vagy valami mást – Jó helyre jöttél!

valószínűleg korábban már találkozott rövid kódokkal, függetlenül attól, hogy új vagy a WordPress-ben, vagy már egy ideje használja. A rövid kódok, amint a neve is sugallja, rövid kóddarabok, amelyek valamilyen funkciót látnak el. A WooCommerce shortcodes például lehetővé teszi, hogy tiszta WooCommerce-rel kapcsolatos funkciókat adjon hozzá a WordPress oldalakhoz, bejegyzésekhez, oldalsávokhoz és widgetizált területekhez a webhelyén.

példa egy WooCommerce Terméktáblára variációkkal.
ez az áruház a WooCommerce terméktáblázat rövidkódját használja egy gyors, egyoldalas megrendelőlap létrehozásához

Ha a vásárlási élmény egyszerűsítésének módját keresi, akkor ezt megteheti a WooCommerce rövid kódok segítségével. Ezek segíthetnek a felhasználói folyamatok javításában, és optimalizálhatják online áruházát a konverziókhoz.

például a WooCommerce shortcodes segítségével:

  • megjelenítheti a legjobban értékelt termékek listáját a kezdőlapján.
  • mutassa be a kapcsolódó termékeket, amikor az ügyfél érdeklődést mutat egy termék iránt.
  • jelölje ki a kiemelt termékeket Gutenberg blokkokban, oldalsávokban, egyéb widgetizált területeken.

ezt szem előtt tartva Ebben a teljes útmutatóban elmagyarázzuk, hogyan használhatja a WooCommerce shortcodes-t a jobb felhasználói élmény biztosítása és az alsó sor növelése érdekében. Az út során azt is elmagyarázzuk, hogy mikor (és miért) kell használni az egyes shortcode-okat. Megnézzük azokat a rövid kódokat, amelyek magához a WooCommerce-hez tartoznak, valamint azokat a rövid kódokat, amelyeket más bővítményekkel is hozzáadhat.

hogyan kell használni WooCommerce shortcodes

Shortcodes néz ki, és a hang egy kicsit technikai, de ők valójában tervezték, hogy bárki használhatja. Nem kell semmilyen kódolási készség.

egyszerűen illessze be a rövidkódot a WordPress bármely szövegszerkesztőjébe, vagy egy”rövid kód”blokkba, ha Gutenberget vagy olyan oldalkészítőt használ, mint az Elementor vagy a Visual Composer:

WooCommerce terméktábla Gutenberg blokk
ez a weboldal hozzáadta a WooCommerce terméktábla rövidkódját (tárgyalt később ebben az oktatóanyagban) egy ‘rövid kód’ Gutenberg blokkhoz.

kombinálhatja a rövid kódokat, és több rövid kódot jeleníthet meg egyetlen oldalon. Kombinálhatja például a rendeléskövetési rövidkódot a felhasználói fiók rövid kódjával. Csak annyit kell tennie, hogy mindkét rövid kódot beilleszti ugyanazon az oldalon. Úgy nézne ki, mint ez:

WooCommerce One Page Checkout Plugin
ez a weboldal a WooCommerce checkout és a WooCommerce terméktáblázat rövidkódjait használja egy egyoldalas vásárlási élmény létrehozásához

WooCommerce Terméklista rövid kódok

vannak olyan rövid kódok is, amelyek különböző módon felsorolják a termékeket a boltban. Ezek extra rugalmasságot biztosítanak, így nem ragadnak meg a korlátozott nézetek, amelyeket a bolt és a kategória oldalain kap. Ehelyett a WooCommerce shortcodes segítségével felsorolhat egy vagy több terméket szó szerint bárhol a WordPress webhelyén – akár rács, akár táblázat alapú listanézetben.

WooCommerce termékek rövid kódja

a WooCommerce rendelkezik egy rövid kóddal, amely lehetővé teszi bizonyos termékek felsorolását rács elrendezésben:

. Más paramétereket is hozzáadhat hozzá (például az orderby és az oszlopok) az előtér megjelenésének testreszabásához.

több WooCommerce termék megjelenítése

kiválaszthatja a soronként felsorolni kívánt termékek számát. Például, ha hat terméket szeretne megjeleníteni három oszlopban, dátum szerint növekvő sorrendben, akkor a rövidkódot használja: . Hasonlóképpen, a termékek csökkenő sorrendben történő megjelenítéséhez egyszerűen az ASC-t DESC-re cserélné.

WooCommerce quick view shortcode

a shortcode zökkenőmentesen működik a WooCommerce Quick View Pro plugin. Ez hozzáadja a Gyors nézet gombokat a termékek listájához, amely gyors módja annak, hogy az emberek az aktuális oldal elhagyása nélkül vásárolhassanak:

több WooCommerce termék megjelenítése gyorsnézet gombokkal

mindössze annyit kell tennie, hogy telepíti a WooCommerce Quick View Pro plugint a WordPress webhelyére, és automatikusan hozzáadja a gyorsnézet gombokat a front-endhez. Így az ügyfelek megtekinthetik a termék attribútumait és variációit, és termékeket adhatnak a kosárba anélkül, hogy az egyetlen termékoldalra navigálnának.

olvassa el a WooCommerce Quick View Pro rövid kódjának teljes útmutatóját.

Quick view lightboxot

WooCommerce Quick View
Hozzáadás quick view gombot a WooCommerce termékek hiány.

WooCommerce product table shortcode

míg a beépített WooCommerce products shortcode elég rugalmas, csak lehetővé teszi, hogy megjelenítse őket egy rács elrendezés. Ez nem ideális azoknak az üzleteknek, amelyek oldalanként több terméket szeretnének megjeleníteni, például ha gyors egyoldalas megrendelőlapot vagy nagykereskedelmi áruházat hoz létre. Ebben az esetben lehet, hogy jobb, ha egy termék táblázat shortcode.

bár maga a WooCommerce nem rendelkezik terméktábla rövid kóddal, könnyen hozzáadhat egyet a WooCommerce terméktábla bővítménnyel. Az Alapvető Rövid kód a , és ezt több mint 50 rövid kód opcióval konfigurálhatja.

tekintse meg a WooCommerce Terméktáblával kapott rövid kód opciók teljes listáját.

WooCommerce kosárba shortcode

WooCommerce jön egy beépített shortcode, amely lehetővé teszi, hogy helyezze be a Kosárba gombot egy adott termék bárhol tetszik. Egyszerűen adja hozzá annak a terméknek az azonosítóját és/vagy SKU-ját, amelyet meg szeretne jeleníteni a Kosárba gomb:

Ha meg szeretné adni a termék árát, akkor használja:

Ár/kosár gomb opció a WooCommerce Shortcodes pluginben

egyszerű termékek esetén ez egy kosárba helyezés gombot jelenít meg.

változó termékek esetén megjelenik egy”opciók kiválasztása”gomb:

az ár/kosár gomb előnézete A kezelőfelületen

személy szerint ez nem tetszik, mert az ügyfeleknek meg kell látogatniuk az egyetlen termék oldalt a variációk kiválasztásához. Jobb, ha a WooCommerce terméktáblázatot használjuk egy vagy több változó termék felsorolásához egy táblázatban, kiegészítve a variációs legördülő listákkal:

> WooCommerce árazási táblázat plugin variációs legördülő listákkal

így az ügyfelek kiválaszthatják az opciókat, és hozzáadhatják a kosárhoz azon az oldalon, amelyen jelenleg vannak.

termékkategória rövid kód

a termékkategória rövid kódja egy adott kategóriából származó termékeket sorol fel szabványos rácselrendezésben.

egy adott kategóriából származó termékek megjelenítése gyors nézet gombokkal

Ez a rövid kód:


Ha nem tetszik a rács elrendezése, vagy ha jobban szeretné ellenőrizni, hogy milyen információkat jelenítsen meg az egyes termék, akkor használhatja a WooCommerce terméktábla shortcode helyett. A WooCommerce terméktábla bővítményhez tartozik egy kategória rövid kód opció, amellyel csak meghatározott kategóriákból származó termékeket sorolhat fel:


A beépített rövid kóddal ellentétben, amely a WooCommerce-hez tartozik, kiválaszthatja, hogy mely információs oszlopokat jelenítse meg az egyes termékekről, és lehetővé teszi az ügyfelek számára, hogy közvetlenül a terméktáblázatból válasszanak variációkat és válasszanak mennyiségeket. Ez sokkal gyorsabbá teszi a vásárlást, és növeli a konverziós arányt.

WooCommerce termékkategóriák rövid kód

a termékkategóriák rövid kódjai a termékkategóriákat sorolják fel, nem pedig a bennük lévő termékeket. Például:

felsorolja a WooCommerce 4 kategóriáját, név szerint rendezve.

a WooCommerce termékkategóriák bemutatása rövid kóddal

vessünk egy pillantást néhány attribútumra és a termékkategóriákhoz tartozó rövid kódokra:

  • limit szabályozza a megjelenített kategóriák számát.
  • az orderby szabályozza a rendezési sorrendet; a” név “és a” dátum ” érvényes opciók.
  • a sorrend a termékkategóriák sorrendjét jelenti, azaz “ASC”vagy ” DESC”.
  • oszlopok a kategóriák szerinti oszlopok számát mutatják.a
  • hide_empty termékkategóriák elrejtésére szolgál termékek nélkül.a
  • parent csak felső szintű termékkategóriákat jeleníthet meg.a
  • azonosítók azt jelentik, hogy a kategóriaazonosítók csak a kimenet által megadott eredmények szerint állíthatók be.

legutóbbi termékek

a WooCommerce legutóbbi termékek rövid kódja megjeleníti azokat a termékeket, amelyeket nemrég adott hozzá az online áruházához.

Ez a rövid kód a legújabb termékekhez:


Ha azonban meg szeretné jeleníteni a termék tényleges dátumát az online áruházba, vagy ha szeretné, hogy a termék megjelenjen több ellenőrzés, akkor használhatja a WooCommerce terméktábla plugin helyett.

egyszerűen rendelje meg a terméktáblát dátum szerint csökkenő sorrendben, és használja a termékkorlátot, hogy ellenőrizze, hány terméket kell tartalmaznia:


a WooCommerce legutóbbi termékeinek megjelenítése dátum szerint

Ha egy dátum oszlopot tartalmaz a táblázatban, akkor az ügyfelek könnyen láthatják, hogy mely termékek kerültek nemrég az áruházba.

Kiemelt termékek

a WooCommerce Kiemelt termékek rövid kódja lehetővé teszi a Kiemelt termékek listázását a bolt többi részétől elkülönítve. Használja a Kiemelt termékek listázására bárhol, például blogbejegyzésekben vagy más oldalakon.

a Kiemelt termékek olyan WooCommerce termékek, amelyek mellett kék csillag ikon található az összes termék oldalon:

Ez a rövid kód a Kiemelt termékek bemutatásához: . A kimenetnek így kell kinéznie:

ismét, ha nem tetszik a Képrács, akkor felsorolhatja a kiemelt termékeket a WooCommerce Product Table plugin shortcode helyett:


Ez a lista a következő felsorolja a kiemelt termékeket egy táblázat elrendezésében, a plugin beállításai oldalon választott információoszlopokkal.

WooCommerce eladó termékek shortcode

az eladó termékek shortcode segítségével kirakat termékek jelenleg eladó. Könnyen megjelenítheti őket a rövid kód használatával:


sorolja fel az összes eladó WooCommerce terméket

legnépszerűbb termékek shortcode

használja a következő WooCommerce shortcode-ot, hogy megjelenítse minden idők legkelendőbb termékeit egy rácsban:

sorolja fel az összes legkelendőbb terméket WooCommerce shortcodes használatával

a gyorsnézet gombok megjelennek az előlapon, ha a WooCommerce Quick View Pro plugint telepítette a WordPress webhelyére.

Ha inkább egy tábla elrendezést szeretne, akkor a legnépszerűbb vagy népszerű termékeket is felsorolhatja a WooCommerce terméktáblázat rövid kódjával, mint ez:


olvassa el a teljes bemutatónkat arról, hogyan lehet felsorolni a népszerű termékeket a WooCommerce Terméktáblával.

Legjobban értékelt termékek

a legjobban értékelt termékek rövid kódját a WooCommerce beépített értékeléseivel és értékeléseivel együtt használhatja a legjobban értékelt termékek bemutatásához. Használja a rövid kódot:


WooCommerce shortcode a legjobban értékelt termékekhez

a WooCommerce terméktáblázat shortcode használatával táblázatnézetben is felsorolhatja a legjobban értékelt termékeket:


kapcsolódó termékek shortcode

a kapcsolódó termékek olyan termékek listája, amelyek hasonlóak ahhoz a termékhez, amelyet az ügyfél böngészi. Ezek közvetlenül a fő termék alatt jelennek meg az egyetlen termék oldalon, de a WooCommerce kapcsolódó termékek rövid kódjával máshol felsorolhatja a kapcsolódó termékeket.

kapcsolódó termékek egyetlen termékoldalon

használja a rövid kódot a kapcsolódó termékek megjelenítéséhez bárhol a WordPress webhelyén.

kosárba helyezés gomb shortcode

a A WooCommerce shortcode segítségével megjelenítheti az árat és a kosárba helyezés gombot egyetlen termékhez az azonosítója alapján. Így néz ki a kezelőfelületen:

> kosárba helyezés oldal WooCommerce

érdemes ezt hozzáadni az online áruház egy widgetizált területéhez vagy egy blogbejegyzéshez.

Kosárba gomb egy blogbejegyzésben
példa a Kosárba gomb rövid kódjára egy blogbejegyzésben

Ez a rövid kód a WooCommerce Quick View Pro bővítménnyel működik. Ha mindkét bővítményt együtt használja, a gyorsnézet gombok a kosárba helyezés gombok mellett jelennek meg. Ez akkor ideális, ha változó termékeket jelenít meg, vagy ha azt szeretné, hogy az ügyfelek módosíthassák a mennyiséget, mielőtt hozzáadnák a kosárba. Az ügyfelek további információkat tekinthetnek meg a termékről, kiválaszthatják a mennyiségeket és a variációkat, és hozzáadhatják a kosárhoz a quick view lightbox segítségével. Ez az eredeti oldalon tartja őket, ahelyett, hogy külön termékoldalra vinné őket.

ha inkább több termékhez szeretné megjeleníteni a kosárba helyezés gombjait, vagy ha nem tetszik az alapértelmezett formátum a nagy képpel, akkor használhatja a WooCommerce Terméktáblát.

válassza ki, mely oszlopokat szeretné felvenni a terméktáblába (győződjön meg róla, hogy tartalmazza a kosárba oszlopot!) és használja a rövidkódot, hogy bárhová beilleszthesse. Az include opcióval kiválaszthatja, hogy mely termékeket vegye fel, például:

megjeleníthetem a rövid kódokat a rövid kódokon belül?

néha érdemes rövid kódokat beágyazni – például hozzáadni a WordPress audio player rövid kódját, hogy az beágyazott zenelejátszót adjon a termékek listájához.

a WooCommerce rövid kódokat általában nem lehet beágyazni. Ezt azonban úgy érheti el, hogy a WooCommerce terméktáblázat rövidkódját használja a termékek felsorolásához, és további rövid kódokat ad hozzá a terméktáblázatban megjelenített mezőkhöz.

tegyük fel például, hogy 8 terméket szeretne felsorolni, mindegyikhez beágyazott audiolejátszóval. Hozzáadhatja az audiolejátszót a termék rövid vagy hosszú leírása mezőkhöz, és ezeket oszlopként jelenítheti meg a táblázatban. Ezután a WooCommerce terméktáblázat rövid kódjával felsorolja ezeket a konkrét termékeket, beleértve a rövid vagy hosszú leírás oszlopot, amely tartalmazza az audiolejátszókat.

WooCommerce audio store table

ahhoz, hogy más pluginek rövid kódjai működjenek a terméktáblán belül, feltétlenül engedélyezze a “rövid kódok” opciót a WooCommerce terméktábla beállításai oldalon:

rövid kódok opció a WooCommerce Terméktáblázatban

WooCommerce oldal rövid kódok

kezdjük azzal, hogy megnézzük a leggyakoribb WooCommerce oldal rövid kódjait. Ezek automatikusan teljes oldalakat hoznak létre, például a kosarat vagy a pénztárat.

WooCommerce bevásárlókosár

a WooCommerce bevásárlókosár shortcode – – lehetővé teszi, hogy megjelenítse az ügyfél bevásárlókosarátját a WordPress webhelyének kezelőfelületén. Hozzáadhatja a WordPress oldalakhoz vagy bejegyzésekhez, vagy megjelenítheti widgetizált területeken (például az oldalsávon).

valahogy így fog kinézni a kezelőfelületen:

a WooCommerce bevásárlókosár Front-end előnézete

amikor telepíti és aktiválja a WooCommerce – t a WordPress weboldalára, automatikusan létrehoz néhány oldalt az Ön számára-beleértve a KOSÁR oldalt, amely ezt a rövid kódot használja. A rövid kód segítségével hozzáadhatja a kosarat a webhely további részeihez.

WooCommerce checkout page

a WooCommerce checkout shortcode – – segítségével teljes fizetési oldalt hozhat létre az e-kereskedelmi webhelyén. Ez az oldal automatikusan létrejön az Ön számára a WooCommerce telepítésekor. A rövid kód segítségével a pénztárat máshova is beillesztheti (például egy terméktábla alá egyoldalas vásárlás létrehozásához).

a WooCommerce checkout oldal előnézete

a WooCommerce checkout shortcode tartalmazza a számlázási adatokat, a megrendelés részleteit és a másik címre történő szállítás lehetőségét.

WooCommerce rendeléskövetés

a WooCommerce lehetővé teszi az áruházak tulajdonosainak, hogy rendeléskövető oldalt hozzanak létre a rövid kód használatával. Bár ez az oldal nem tartozik a WooCommerce-hez a dobozból, egyszerűen létrehozhat egy új oldalt, és beillesztheti a rövid kódot a szövegszerkesztőbe, hogy létrehozhassa sajátját. Valahogy így kell kinéznie a kezelőfelületen:

Rendeléskövetési oldal a WooCommerce-ben

WooCommerce felhasználói fiók oldal

a WooCommerce automatikusan létrehoz egy Saját fiók oldalt, amikor először telepíti azt a webhelyére. Ez a rövid kód használatával történik. A rövid kód segítségével beillesztheti a fiókterületet a webhely további helyeire.

a My Account shortcode bejelentkezési és regisztrációs űrlapként szolgál a kijelentkezett felhasználók számára. Ennek eredményeként ezt WooCommerce bejelentkezési rövid kódként is használhatja.

My Account page in WooCommerceSaját Fiók oldal WooCommerce

Add WooCommerce shortcodes könnyebben egy eszköztár gomb

míg megtalálható mindenféle WooCommerce shortcodes plugin az interneten, javasoljuk, hogy az ingyenes WooCommerce Shortcodes plugin által WooThemes. A telepítés és aktiválás után ez a plugin hozzáad egy TinyMCE legördülő gombot a WordPress szövegszerkesztőhöz, hogy könnyű hozzáférést biztosítson az összes beépített WooCommerce rövid kódhoz. Ez ment, hogy másolja be a shortcodes.

a WooCommerce Shortcodes plugin aktiválása után egy új shortcode gomb jelenik meg a WordPress szövegszerkesztőjében. Miután rákattintott erre a gombra, megjelenik egy legördülő lista, amely tartalmazza az összes szabványos WooCommerce rövidkódot:

ooCommerce Rövidkódok ikon a szövegszerkesztőben

hibaelhárítás WooCommerce rövid kódok

néha beilleszti a megfelelő WooCommerce rövidkódot a szövegszerkesztőbe, de nem jelenik meg a helyes kimenet. Ebben az esetben ellenőrizze, hogy nem véletlenül ágyazta-e be a rövidkódot a <pre> címkékbe. Ezeket a címkéket eltávolíthatja a HTML szövegszerkesztőbe való belépéssel.

A legjobb WooCommerce rövid kódok a Terméktáblához

mielőtt befejeznénk, itt található a leghasznosabb beépített WooCommerce rövid kódok gyors bontása, amelyeket a WooCommerce Product Table plugin és a WooCommerce Quick View Pro bővítményekkel használhat:

Plugin Required Shortcode name WooCommerce shortcode Description
None Shopping Cart Displays a shopping cart on the front-end of the website
None Checkout Page Displays a complete checkout page.
None Order Tracking Displays an order tracking form for your e-commerce website.
nincs Felhasználói Fiók oldal megjelenít egy ‘Saját fiók’ oldalt a felhasználók számára
WooCommerce terméktábla termék ára/kosár gomb hozzáadja a termék ára (vagy Kosárba) gombot a terméktáblához.
WooCommerce Quick View Pro több termék rövid kód több (kiválasztott) terméket jelenít meg egy oldalon vagy bejegyzésben gyorsnézet gombokkal.
WooCommerce Quick View Pro termékkategória konkrét termékkategóriákat jelenít meg a weboldal előlapján.
WooCommerce Quick View Pro termékkategória csiga szerint egy adott termékkategóriából származó termékeket jelenít meg a gyorsnézet gombokkal együtt.
WooCommerce Quick View Pro legutóbbi termékek megjeleníti az online áruházhoz hozzáadott legújabb termékek listáját a gyorsnézet gombokkal együtt.
WooCommerce Quick View Pro Kiemelt termékek megjeleníti a Kiemelt termékek listáját a gyorsnézet gombokkal.
WooCommerce Quick View Pro eladó Termék megjeleníti az összes eladó termék listáját a gyorsnézet gombokkal.
WooCommerce Quick View Pro legkelendőbb termék megjeleníti a legkeresettebb termékek listáját a Gyors nézet gombokkal.
WooCommerce Quick View Pro Legjobban értékelt termék megjeleníti a legjobban értékelt termékek listáját a Gyors nézet gombokkal.
WooCommerce Quick View Pro kapcsolódó termék a kapcsolódó termékek listáját jeleníti meg a Gyors nézet gombokkal egyetlen termékoldalon.
WooCommerce Quick View Pro megjeleníti a”Kosárba”gombot egyetlen terméken, a termékazonosító használatával

töltse fel a termék azonosítóját WooCommerce áruház rövid kódokkal!

WooCommerce shortcodes apró kódrészletek segítségével hozzá ügyes funkciók az online áruház. Felveheti őket a webhely oldalainak, bejegyzéseinek vagy widgetizált területeinek (például az oldalsávnak). Néhány WooCommerce shortcode támogatja azokat a paramétereket is, amelyek segítségével testreszabhatja a kimenetet.

azonban nem minden WooCommerce shortcode nyújt jó felhasználói élményt. Ahelyett, hogy beillesztené őket, fontolja meg a WooCommerce Product Table plugin vagy a WooCommerce Quick View Pro plugin mellett.

például ez az egyetlen módja annak, hogy az ügyfelek a termékoldalon kívül válasszanak mennyiségeket és variációkat, és lehetővé teszi, hogy további információkat jelenítsen meg az egyes termékekről, és szabályozza a képméretet. Ha extra rugalmasságot szeretne, akkor telepítheti a WooCommerce Terméktáblát, és elkezdhet kísérletezni az 50+ shortcode opcióival. Ez egy tisztább és szervezettebb megjelenést biztosít a kezelőfelületen, miközben biztosítja, hogy webhelye javítsa az ügyfél vásárlási élményét.

WooCommerce termék táblázat
a WooCommerce shortcodes megjelenítése rendezett és rendezett módon!

összefoglalva, a WooCommerce shortcodes segítségével javíthatja a vevő útját, több terméket láthat egyszerre, és megkönnyíti az ügyfelek számára a fizetési folyamat gyors navigálását. Kipróbálhat más WooCommerce shortcode bővítményeket is (például WooCommerce Kupon Shortcodes), amelyek lehetővé teszik a fejlett funkciók kihasználását, például kuponkódok hozzáadását az online áruházhoz.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.