WooCommerce kortkoder kan du visa information från din butik i nya och spännande sätt. WooCommerce kommer förbyggd med kortkoder, och du kan installera plugins för att lägga till mer. Oavsett om du vill lista produkter i en tabell, visa vagnen var som helst på din webbplats eller något annat – du har kommit till rätt ställe!
Du har antagligen stött på kortkoder tidigare, oavsett om du är ny på WordPress eller har använt den under en tid. Kortkoder är, som namnet antyder, korta kodstycken som utför någon form av funktion. WooCommerce-kortkoder låter dig till exempel lägga till snygga WooCommerce-relaterade funktioner till WordPress-sidor, inlägg, sidofält och widgetiserade områden på din webbplats.
Om du letar efter ett sätt att förenkla shoppingupplevelsen kan du göra detta med WooCommerce-kortkoder. De kan hjälpa dig att förbättra köp av användarflöden och optimera din webbutik för konverteringar.
Du kan till exempel använda WooCommerce-kortkoder för att:
- visa en lista över dina högst rankade produkter på din hemsida.
- visa upp relaterade produkter när en kund uttrycker intresse för en produkt.
- markera utvalda produkter i Gutenberg-block, sidofält, andra widgetiserade områden.
med detta i åtanke kommer vi i den här kompletta guiden att förklara hur du kan använda WooCommerce-kortkoder för att leverera bättre användarupplevelser och öka din bottenlinje. Längs vägen kommer vi också att förklara när (och varför) du ska använda varje kortkod. Vi tittar på kortkoderna som följer med WooCommerce själv och kortkoder som du kan lägga till med andra plugins.
hur man använder WooCommerce-kortkoder
kortkoder ser ut och låter lite tekniska, men de är faktiskt utformade för alla att använda. Du behöver inga kodningsförmågor.
sätt bara in kortkoden i någon textredigerare i WordPress eller till ett”kortkod” – block om du använder Gutenberg eller en sidbyggare som Elementor eller Visual Composer:
Du kan kombinera kortkoder och visa flera kortkoder på en enda sida. Du kan till exempel kombinera kortkoden för Orderspårning med kortkoden för användarkontot. Allt du behöver göra är att infoga båda kortkoderna på samma sida. Det skulle se ut så här:
WooCommerce produktlista kortkoder
det finns också kortkoder för att lista produkter på olika sätt i din butik. Dessa ger extra flexibilitet, så du är inte fast med de begränsade vyerna som du får på butiks-och kategorisidorna. Istället kan du använda WooCommerce – kortkoder för att lista en eller flera produkter bokstavligen var som helst på din WordPress-webbplats-antingen i ett rutnät eller tabellbaserad listvy.
WooCommerce produkter kortkod
WooCommerce har en kortkod som låter dig lista specifika produkter i ett rutnät layout:
. Du kan också lägga till andra parametrar i den (till exempel orderby och kolumner) för att anpassa front-end-utseendet.
Du kan välja antalet produkter som ska listas per rad. Om du till exempel vill visa sex produkter i tre kolumner ordnade efter datum i stigande ordning, skulle du använda kortkoden: . På samma sätt, för att visa produkter i fallande ordning, skulle du helt enkelt ersätta ASC med DESC.
WooCommerce quick view kortkod
kortkod fungerar sömlöst med WooCommerce Quick View Pro plugin. Detta lägger quick view knappar till listan över produkter som ett snabbt sätt att tillåta människor att göra sina inköp utan att lämna den aktuella sidan:
allt du behöver göra är att installera WooCommerce Quick View Pro plugin till din WordPress webbplats och det kommer automatiskt att lägga Snabbvy knappar till front-end. På så sätt kan kunder se produktegenskaper och variationer och lägga till produkter i kundvagnen utan att navigera till den enda produktsidan.
Läs vår kompletta guide till WooCommerce Quick View Pro kortkod.
WooCommerce produkttabell kortkod
medan den inbyggda WooCommerce produkter kortkod är ganska flexibel, det bara låter dig visa dem i ett rutnät layout. Det är inte idealiskt för butiker som vill visa fler produkter per sida, till exempel om du skapar ett snabbt beställningsformulär på en sida eller Grossistbutik. Isåfall, du kan vara bättre med en produkt tabell kortkod.
medan WooCommerce själv inte har en produkttabell kortkod, kan du enkelt lägga till en med WooCommerce Product Table plugin. Den grundläggande kortkoden är och du kan konfigurera detta med över 50 kortkodsalternativ.
visa den fullständiga listan över kortkod alternativ som du får med WooCommerce produkttabell.
WooCommerce lägg i varukorgen kortkod
WooCommerce levereras med en inbyggd kortkod som låter dig infoga en Lägg i varukorgen knapp för en specifik produkt var du vill. Lägg bara till ID och / eller SKU för den produkt du vill visa knappen Lägg i varukorg för:
om du vill inkludera produktpriset, använd sedan:
för enkla produkter, kommer detta att visa en Lägg i varukorgen knappen.
för variabla produkter kommer det att visa en ”Välj alternativ” – knapp:
personligen tycker jag inte om det här eftersom kunderna måste besöka den enda produktsidan för att välja sina variationer. Det är bättre att använda WooCommerce produkttabell för att lista en eller flera variabla produkter i en tabell, komplett med variation dropdowns:
På så sätt kan kunderna välja alternativ och lägga till i kundvagnen från sidan de är för närvarande på.
produktkategori kortkod
produktkategorin kortkod listar produkter från en viss kategori i en vanlig rutnätslayout.
detta är kortkoden för det:
Om du inte gillar rutnätslayouten eller om du vill ha mer kontroll över vilken information som ska visas om varje produkt, då kan du använda WooCommerce-produkttabellen kortkod istället. WooCommerce Product Table plugin levereras med en kategori kortkod alternativ, som du kan använda för att lista produkter från specifika kategorier endast:
Till skillnad från den inbyggda kortkod som kommer med WooCommerce, kan du välja vilka kolumner av information som ska visas om varje produkt, och ge kunderna möjlighet att välja varianter och välja kvantiteter direkt från produkttabellen. Detta gör shopping mycket snabbare och ökar din omvandlingsfrekvens.
WooCommerce produktkategorier kortkod
produktkategorierna kortkoder listar dina produktkategorier, i stället för produkterna inom dem. Exempelvis:
listar alla 4 av dina WooCommerce-kategorier, ordnade efter namn.
Låt oss ta en titt på några av de attribut och kortkoder som går med produktkategorier:
- gräns styr antalet kategorier som visas.
- orderby styr sorteringsordningen;” namn ”och” datum ” är giltiga alternativ.
- order representerar ordningen på produktkategorier, dvs ”ASC”eller ” DESC”.
- kolumner visar antalet kolumner som kategorierna är ordnade i.
- hide_empty används för att dölja produktkategorier utan produkter.
- förälder kan du bara visa upp toppnivå produktkategorier.
- id representerar att Kategori ID kan ställas in enligt endast utdata specificerade resultat.
senaste produkter
kortkoden för WooCommerce senaste produkter visar de produkter du nyligen har lagt till i din webbutik.
det här är kortkoden för de senaste produkterna:
men om du vill visa det faktiska datumet för produkten lades till i din webbutik, eller om du vill mer kontroll, då kan du använda WooCommerce product table plugin istället.
beställ bara produkttabellen efter datum i fallande ordning och använd produktgränsnumret för att kontrollera hur många produkter som ska inkluderas:
om du inkluderar en datumkolumn i tabellen kan kunderna enkelt se vilka produkter som nyligen lagts till i butiken.
utvalda produkter
med kortkoden för utvalda produkter för WooCommerce kan du lista utvalda produkter separat från resten av din butik. Använd den för att lista utvalda produkter var du vill, till exempel i blogginlägg eller andra sidor.
utvalda produkter är WooCommerce-produkter som har en blå stjärnikon bredvid dem på sidan alla produkter:
detta är kortkoden för att visa upp utvalda produkter: . Utgången ska se ut så här:
återigen, om du inte gillar bilden grid kan du lista utvalda produkter med WooCommerce produkttabell plugin kortkod istället:
detta listar presenterade produkter i en tabelllayout, med vilken informationskolumner du valde på sidan plugin-inställningar.
WooCommerce sale products kortkod
Försäljningsprodukterna kortkod låter dig visa upp produkter som för närvarande säljs. Du kan enkelt visa dem med kortkoden:
bästsäljande produkter kortkod
använd följande WooCommerce-kortkod för att visa dina bästsäljande produkter i ett rutnät:
snabbvynsknapparna visas på framsidan om du har WooCommerce Quick View Pro-plugin installerat på din WordPress-webbplats.
Om du föredrar en tabelllayout kan du också lista bästsäljande eller populära produkter med WooCommerce-produkttabellen kortkod så här:
Läs vår fullständiga handledning om hur du listar populära produkter med WooCommerce-produkttabell.
Topprankade produkter
Du kan använda Topprankade produkter kortkod tillsammans med WooCommerce inbyggda recensioner och betyg funktion för att visa upp dina Topprankade produkter. Använd kortkoden:
Du kan också lista Topprankade produkter i en tabellvy med hjälp av WooCommerce-produkttabellen kortkod:
relaterade produkter kortkod
relaterade produkter är en lista över produkter som liknar den produkt som kunden surfar. Dessa kommer att dyka upp direkt under huvudprodukten på den enskilda produktsidan, men du kan använda kortkoden för WooCommerce-relaterade produkter för att lista relaterade produkter någon annanstans.
använd kortkoden för att visa relaterade produkter var som helst på din WordPress-webbplats.
lägg i varukorgen knapp kortkod
WooCommerce kortkod kan du visa priset och lägg i varukorgen knappen för en enda produkt baserat på dess ID. Så här ser det ut på framsidan:
Du kan överväga att lägga till detta i ett widgetiserat område i din webbutik eller ett blogginlägg.
denna kortkod fungerar med WooCommerce Quick View Pro plugin. När du använder båda insticksprogrammen tillsammans visas snabbvisningsknapparna bredvid knapparna Lägg till i kundvagn. Detta är perfekt om du visar variabla produkter eller om du vill att kunderna ska kunna ändra kvantiteten innan du lägger till i kundvagnen. Kunderna kan se extra information om produkten, välja kvantiteter och variationer och lägga till i kundvagnen från en Snabbvy lightbox. Detta håller dem på originalsidan istället för att ta dem till en separat produktsida.
om du hellre vill visa Lägg till i kundvagn knappar för flera produkter, eller om du inte gillar standardformatet med den stora bilden, då kan du använda WooCommerce produkttabell istället.
Välj vilka kolumner du vill inkludera i produkttabellen (se till att du inkluderar kolumnen add-to-cart!) och använd kortkod för att infoga den var du vill. Använd alternativet Inkludera för att välja vilka produkter som ska inkluderas, till exempel:
kan jag visa kortkoder inom kortkoder?
Ibland kanske du vill bo kortkoder-till exempel för att lägga till kortkoden för WordPress audio player så att den lägger till en inbäddad musikspelare i listan över produkter.
Du kan normalt inte bo i WooCommerce-kortkoderna. Du kan dock uppnå detta genom att använda WooCommerce Product Table-kortkoden för att lista produkter och lägga till andra kortkoder i fälten som du visar i produkttabellen.
till exempel, låt oss säga att du vill lista 8 produkter, med en inbäddad ljudspelare för var och en. Du kan lägga till ljudspelaren i produktens korta eller långa beskrivningsfält och visa dessa som kolumner i tabellen. Du använder sedan WooCommerce-produkttabellen kortkod för att lista de specifika produkterna, inklusive den korta eller långa beskrivningskolumnen som innehåller ljudspelarna.
för att få kortkoder från andra plugins att fungera i produktabellen, se till att du aktiverar alternativet ”kortkoder” på sidan Woocommerce Product Table settings:
WooCommerce sida kortkoder
låt oss börja med att ta en titt på några av de vanligaste WooCommerce sida kortkoder. Dessa skapar automatiskt hela sidor, till exempel kundvagnen eller kassan.
WooCommerce kundvagn
WooCommerce kundvagn kortkod – – låter dig visa kundens kundvagn på din WordPress webbplats front-end. Du kan lägga till den på WordPress-sidor eller inlägg eller visa den i widgetiserade områden (till exempel sidofältet).
det kommer att se ut så här på front-end:
När du installerar och aktiverar WooCommerce på din WordPress – webbplats skapar den automatiskt några sidor åt dig-inklusive kundvagnssidan, som använder denna kortkod. Du kan använda kortkoden för att lägga vagnen till ytterligare delar av din webbplats.
WooCommerce checkout page
Du kan använda WooCommerce checkout – kortkoden – -för att skapa en komplett kassasida på din e-handelswebbplats. Denna sida skapas också automatiskt för dig när du installerar WooCommerce. Du kan också använda kortkoden för att infoga kassan någon annanstans (till exempel under en produktabell för att skapa shopping på en sida).
WooCommerce checkout-kortkoden innehåller faktureringsinformation, orderinformation och möjlighet att skicka till en annan adress.
WooCommerce order tracking
WooCommerce låter butiksägare skapa en orderspårningssida med kortkod. Även om den här sidan inte kommer med WooCommerce ur rutan kan du helt enkelt skapa en ny sida och infoga kortkoden i textredigeraren för att skapa din egen. Det ska se ut så här på framsidan:
WooCommerce användarkontosida
WooCommerce skapar automatiskt en mitt kontosida när du först installerar den på din webbplats. Detta görs med kortkod. Du kan använda kortkoden för att infoga kontoområdet på ytterligare platser på hela webbplatsen.
kortkoden för mitt konto fungerar som ett inloggnings-och registreringsformulär för inloggade användare. Som ett resultat kan du också använda detta som en WooCommerce-inloggningskod.
Lägg till WooCommerce-kortkoder lättare med en verktygsfältsknapp
även om du kan hitta alla typer av WooCommerce-kortkodsplugin på webben rekommenderar vi att du använder det gratis WooCommerce-kortkodsplugin från WooThemes. En gång installerat och aktiverat, lägger denna plugin en TinyMCE rullgardinsmenyn till WordPress textredigerare för att ge dig enkel tillgång till alla inbyggda WooCommerce kortkoder. Detta sparar du behöva kopiera och klistra in kortkoder.
När du har aktiverat WooCommerce-Kortkodsplugin ser du en ny kortkodsknapp i din WordPress-textredigerare. När du klickar på den här knappen visas en rullgardinslista som innehåller alla vanliga WooCommerce-kortkoder:
felsökning av WooCommerce-kortkoder
ibland klistrar du in rätt WooCommerce-kortkod i textredigeraren men den visas inte rätt utgång. Kontrollera i så fall att du inte av misstag bädde in kortkoden i <pre> – taggar. Du kan ta bort dessa taggar genom att gå in i HTML-textredigeraren.
bästa WooCommerce-kortkoder för produkttabell
innan vi avslutar, här är en snabb uppdelning av de mest användbara inbyggda WooCommerce-kortkoderna som du kan använda med WooCommerce-Produktabell-plugin och WooCommerce Quick View Pro-plugins:
| 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. | ||
| ingen | användarkonto sida | visar en ’mitt konto’ sida för användare | ||
| WooCommerce produkttabell | produktpris/varukorg knapp | lägger till en produktpris (eller lägg i varukorg) knapp i produkttabellen. | ||
| WooCommerce Quick View Pro | flera produkter kortkod | visar flera (valda) produkter på en sida eller ett inlägg med quick view-knappar. | ||
| WooCommerce Quick View Pro | produktkategori | visar specifika produktkategorier på framsidan av webbplatsen. | ||
| WooCommerce Quick View Pro | produktkategori efter Slug | Visar produkter från en viss produktkategori tillsammans med snabbvysknappar. | ||
| WooCommerce Quick View Pro | senaste produkter | visar en lista över de senaste produkterna som du har lagt till i din webbutik tillsammans med snabbvyn knappar. | ||
| WooCommerce Quick View Pro | Utvalda Produkter | visar en lista över utvalda produkter med snabbvynsknappar. | ||
| WooCommerce Quick View Pro | Försäljningsprodukt | visar en lista över alla produkter som säljs med snabbvynsknappar. | ||
| WooCommerce Quick View Pro | bästsäljande produkt | visar en lista över dina bästsäljande produkter med quick view-knappar. | ||
| WooCommerce Quick View Pro | topprankad produkt | visar en lista över dina Topprankade produkter med snabbvysknappar. | ||
| WooCommerce Quick View Pro | relaterad produkt | visar en lista över relaterade produkter med snabbvysknappar på enskilda produktsidor. | ||
| WooCommerce Quick View Pro | visar en”Lägg i varukorg” – knapp på en enda produkt med Produkt-ID |
Supercharge din WooCommerce-butik med kortkoder!
WooCommerce-kortkoder är små kodavsnitt som låter dig lägga till snygga funktioner i din webbutik. Du kan lägga till dem i butikssidor, inlägg eller widgetiserade områden på din webbplats (till exempel sidofältet). Vissa WooCommerce-kortkoder stöder också parametrar som du kan använda för att anpassa utgången.
men inte alla WooCommerce-kortkoder ger en bra användarupplevelse. Istället för att klistra in dem som de är, kan du överväga att använda dem tillsammans med WooCommerce Product Table plugin eller WooCommerce Quick View Pro plugin.
det är till exempel det enda sättet att låta kunder välja kvantiteter och variationer utanför produktsidan, och det låter dig visa extra information om varje produkt och styra bildstorleken. Om du vill ha extra flexibilitet kan du installera WooCommerce-produkttabellen och börja experimentera med dess 50+ kortkodsalternativ. Detta ger dig ett mer snyggt och organiserat utseende på fronten samtidigt som din webbplats förbättrar kundens shoppingupplevelse.
för att sammanfatta, WooCommerce kortkoder kan du förbättra köparens resa, se fler produkter på en gång, och gör det enkelt för kunderna att snabbt navigera genom kassan. Du kan också prova andra WooCommerce kortkod plugins (som WooCommerce kupong kortkoder) som låter dig utnyttja avancerade funktioner som att lägga kupongkoder till din webbutik.