E-handelns värld bygger på flexibilitet. En framgångsrik webbutik måste kunna ändra, anpassa och lyfta fram specifika produkter på ett ögonblick. Även om många butiksägare tror att detta kräver en utvecklare, är sanningen att ett kraftfullt, inbyggt verktyg i WooCommerce gör det enkelt: WooCommerce-produktens shortcode. Detta enkla men mångsidiga verktyg låter dig visa produkter, skapa anpassade rutnät och bygga dynamiska sidor utan att skriva en enda rad kod.
Den här omfattande guiden lär dig hur du bemästrar [products] . Du lär dig att använda dess attribut för att skapa fantastiska, anpassade produktpresentationer för alla sidor, inlägg eller widgetområden. Oavsett om du är nybörjare som vill lägga till några produkter på din startsida eller en avancerad användare som behöver bygga en komplex, filtrerbar landningssida, är den här artikeln din kompletta referens.
Grunderna: Din lista över viktiga WooCommerce-shortcodes
Innan vi dyker in på [produkter] , låt oss förstå vad kortkoder är och deras roll i WordPress. En kortkod är en liten kodbit inom hakparenteser, som [kortkod] . WordPress ersätter den som en platshållare med dynamiskt innehåll eller funktionalitet när sidan visas. Du kan använda kortkoder var som helst där du kan lägga till text, inklusive i den klassiska redigeraren, Gutenberg-block och sidbyggare som Elementor .
Medan vårt fokus ligger på [produkter] , kommer WooCommerce med en komplett lista över WooCommerce-kortkoder för viktiga butikssidor. Dessa kortkoder placeras vanligtvis på de sidor som WooCommerce skapar automatiskt under installationen:
[woocommerce_cart]– Visar innehållet på varukorgssidan.[woocommerce_checkout]– Visar utcheckningsformuläret.[woocommerce_my_account]– Renderar kundens kontoöversikt.[woocommerce_order_tracking]– Tillhandahåller ett formulär för kunder att spåra sina beställningar.
Kortkoden [products] är den mest mångsidiga av dem alla. Den är nyckeln till att visa produkter på andra sidor och inlägg än huvudsidan för butiken. Dess grundläggande struktur är helt enkelt [products] . Denna kortkod visar i sig ett rutnät över dina senaste produkter. Den verkliga kraften kommer dock från dess attribut.
Utforska vidare: Hur man konfigurerar en WP-kundvagn för smidig onlineförsäljning
Förvandla dina produktsidor med kraftfulla kortkoder
Ge din WooCommerce-butik liv med dynamiska layouter och sömlösa shoppingupplevelser.
Anatomin hos kortkoden [produkter]
Den verkliga flexibiliteten hos WooCommerce-produktens shortcode kommer från dess attribut. Attribut är parametrar som du lägger till inom hakparenteserna för att styra vilka produkter som visas och hur de ser ut. Du kan tänka på dem som kommandon som ger specifika shortcode-instruktioner.
Här är en snabb titt på de vanligaste attributen du kommer att använda. Detta är din viktigaste lista över shortcodes för WooCommerce-produkter.
| Attribut | Fungera | Möjliga värden |
begränsa | Anger antalet produkter som ska visas. | Vilket positivt heltal som helst (t.ex 8, 12) |
kolumner | Anger antalet kolumner i rutnätet. | 1 till 6 |
beställ efter | Anger hur produkter sorteras. | datum , titel , id , popularitet , betyg , rand |
beställa | Ställer in sorteringsordningen. | ASC (Stigande) eller DESC (Fallande) |
id:n | Visar specifika produkter efter ID. | Kommaavgränsad lista med produkt-ID:n (t.ex "1,2,3") |
skus | Visar specifika produkter efter SKU. | Kommaavgränsad lista över produkt-SKU:er (t.ex. "hoodie-01, tee-02" ) |
kategori | Filtrerar efter produktkategori, slug eller ID. | Kommaavgränsad lista över kategorisnäckor (t.ex. "kläder, accessoarer" ) |
på rea | Visar produkter som just nu är på rea. | sann |
synlighet | Filter efter produktsynlighet. | synlig , katalog , sök , presenterad |
paginera | Aktiverar paginering för en produktlista. | sann |
klass | Lägger till en anpassad CSS-klass i rutnätet. | Valfritt CSS-klassnamn (t.ex. "my-custom-grid" ) |
Kom ihåg att alltid använda raka citattecken ( " ) runt dina attributvärden. Ett vanligt misstag är att använda lockiga citattecken, vilket förstör kortkoden.
Läs också: Så här åtgärdar du WooCommerce-produkter som inte visas på butikssidan: Snabba lösningar
Bemästra produktval: Praktiska och avancerade användningsområden för kortkod
Titta nu på verkliga exempel på shortcodes för WooCommerce-produkter och lär dig hur du använder dem effektivt. Dessa exempel hjälper dig att skapa dynamiska, anpassade produktsektioner på vilken sida som helst.
Visar utvalda produkter
WooCommerce-shortcoden för utvalda produkter är ett utmärkt sätt att visa upp dina bästsäljande eller marknadsförda varor på startsidan. Du måste först markera produkter som "utvalda" i WooCommerce-instrumentpanelen för att använda den. Gå till "Produkter", håll muspekaren över en vara och klicka på stjärnikonen. Stjärnan blir blå, vilket indikerar att produkten är utvald.
Kortkod: [products visibility="featured"]
Denna shortcode visar alla produkter du har markerat som utvalda. Du kan kombinera den med andra attribut för att förfina visningen.
Exempel: Visa 8 utvalda produkter i ett rutnät med 4 kolumner, sorterade slumpmässigt. [products visibility="featured" limit="8" columns="4" orderby="rand"]
Specifika produkter efter ID eller SKU
Ibland måste du visa en eller två specifika produkter, kanske i ett blogginlägg eller en landningssida . Det är här WooCommerce-produkt-ID-shortcoden kommer väl till pass. Du kan använda ids- attributet med en kommaseparerad lista med produkt-ID:n.
Kortnummer: [produkt-ID:n="12, 35, 78"]
Du kan också använda produktens SKU:er, vilka kan vara lättare att komma ihåg.
Kortkod: [products skus="tröja-01, byxor-02"]
Så här hittar du ID:n och SKU:n: I din WordPress-instrumentpanel navigerar du till WooCommerce → Produkter. Produkt-ID:t visas i en liten kolumn bredvid produktnamnet. Du kan också hålla muspekaren över produkttiteln för att se ID:t i URL:en. SKU:n finns på produktens redigeringssida under avsnittet "Produktdata".
Filtrering efter kategori
WooCommerce-shortcoden för produktkategorier är en av de mest kraftfulla attributen. Den låter dig skapa sektioner dedikerade till en specifik produkttyp, som en sektion för "Nya T-shirts" eller en sida för "Accessoarer".
Kortnummer: [produktkategori="t-shirts"]
För att hitta en kategoris slug, gå till WooCommerce → Produkter → Kategorier . Sluggen är ett URL-vänligt namn för kategorin.
Exempel: Visa 9 produkter från kategorierna ”hoodies” och ”t-shirts” i 3 kolumner. [products category="hoodies, t-shirts" limit="9" columns="3"]
Visar rea- och bästsäljande produkter
Att skapa en dedikerad sida för försäljning är en bra marknadsföringsstrategi. Du kan enkelt göra detta med en shortcode.
Kortkod för rea: [products on_sale="true"]
På samma sätt kan du visa upp dina bäst presterande produkter.
Kortkod för bästsäljande: [products best_selling="true"]
Kombinera filter för anpassade skärmar
Den verkliga magin uppstår när du kombinerar flera attribut. Detta gör att du kan skapa exakta och engagerande produktrutnät.
Exempel: Visa de 12 mest populära produkterna på rea från kategorin ”kläder” i fyra kolumner. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]
Denna detaljerade kontroll låter dig skapa en unik shoppingupplevelse som håller kunderna engagerade.
Avancerade visningsalternativ: Paginering, sortering och anpassad stil
WooCommerce-produktens shortcode väljer produkter och styr deras utseende och beteende på en sida.
Sidnumrering för stora produktlistor
Du behöver paginering för sidor med många produkter för att undvika långa laddningstider och en dålig användarupplevelse . paginate hanterar detta perfekt.
Kortkod: [produkter paginate="true" per_page="12"]
Attributet per_page fungerar tillsammans med paginate för att ange hur många artiklar som visas på varje sida. Detta är en viktig del av WooCommerce-produktens shortcode med paginationsfunktion.
Sortering och ordning
Du kan diktera ordningen på dina produkter med hjälp av attributen orderby och order
orderby="price": Sorterar produkter efter pris.orderby="rating": Sorterar efter genomsnittligt kundbetyg.orderby="popularity": Sorterar efter antal köp.orderby="rand": Blandar produkterna slumpmässigt vid varje sidinläsning.
order order ) dikterar sorteringsriktningen. order="ASC" för stigande (t.ex. lågt till högt pris) och order="DESC" för fallande (t.ex. högt till lägst pris).
Exempel: Visa 10 produkter sorterade efter högsta betyg först. [products limit="10" orderby="rating" order="DESC"]
Anpassad styling med klasser
För designers eller utvecklare class- attributet ett kraftfullt verktyg för anpassning av WooCommerce-produkters shortcode. Det låter dig lägga till en unik CSS-klass i produktrutnätets omslag. Detta låter dig tillämpa anpassad stil på din shortcode-utdata utan att påverka andra produktrutnät på din webbplats.
Kortkod: [products class="hero-products"]
Sedan kan du i din anpassade CSS rikta in dig på den här klassen: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }
Kompatibilitetstips
WooCommerce-produktens shortcode fungerar med den klassiska editorn, Gutenbergs blockredigerare (med ett dedikerat "Shortcode"-block) och de flesta större sidbyggare. Den är också utformad för att vara responsiv, vilket innebär att den anpassar sig till olika skärmstorlekar. Testa dock alltid dina shortcodes på dator och mobil för att säkerställa att de visas korrekt.
Strategiska användningsfall: Var och varför man ska använda produktkortkoder
Att känna till syntaxen är en sak; att använda den strategiskt är en annan. Här är några idéer för att förbättra din butik med hjälp av WooCommerce-produktens shortcode .
- Hemsida: Skapa dedikerade avsnitt för "Nyheter", "Bästsäljare" och "Rea" för att omedelbart vägleda besökare till dina viktigaste produkter.
- Blogginlägg: Bädda in en enskild produkt eller ett litet produktrutnät i ett blogginlägg. Om du skriver ett blogginlägg om att styla en ny jacka, använd en shortcode för att visa den specifika jackan och andra kompletterande produkter direkt under inlägget.
- Landningssidor för kategorier: Skapa anpassade landningssidor för en specifik kategori. Du kan lägga till unik text och sedan använda en shortcode för att bara visa produkter från den kategorin.
- Marknadsföringslandningssidor: För en ny kampanj kan du skapa en landningssida som innehåller produkter med en specifik tagg eller från en ny kollektion, med hjälp av en skräddarsydd WooCommerce-produktshortcode för att driva konverteringar.
Läs mer: Så här lägger du till ett dricksalternativ på WooCommerce-kassasidorna
Bästa praxis för felsökning och optimering
Även med ett enkelt verktyg som en shortcode kan problem uppstå. Så här löser du vanliga problem och säkerställer att din webbplats presterar bra.
- Kontrollera skrivfel: En saknad hakparentes, ett skrivfel i ett attributnamn eller felaktiga citattecken kan göra att kortkoden visas som vanlig text. Dubbelkolla din kod.
- Hitta ID:n och slugs: Se till att du använder rätt produkt-ID:n, SKU:n och kategorislugs. Det enklaste sättet att verifiera dessa är i WordPress instrumentpanel.
- Cachning och prestanda: Att visa för många produkter med en enda shortcode kan göra din webbplats långsammare. Använd
limitochpaginateför att kontrollera antalet produkter. Använd ett bra cachning-plugin för att snabba upp sidans laddningstider.
- Avancerade behov: Om du behöver dynamisk filtrering, AJAX-sidning eller andra komplexa funktioner kan du behöva ett dedikerat plugin. Verktyg som WooCommerce Product Table eller WooCommerce Product Filters kan avsevärt utöka shortcodens funktionalitet.
Slutsats: Din verktygslåda för dynamiska WooCommerce-produktdisplayer
WooCommerce-produktkoden är banbrytande för butiksägare. Den erbjuder ett enkelt men kraftfullt sätt att skapa dynamiska, engagerande och mycket anpassade produktpresentationer på din webbplats. Genom att bemästra [products] och dess attribut kan du förvandla dina statiska sidor till övertygande merchandisingverktyg.
Börja med grunderna, som en sektion med utvalda produkter på din hemsida, och experimentera sedan med mer avancerade kombinationer för att bygga unika landningssidor och strategiskt bädda in produkter i ditt blogginnehåll. Den här shortcoden låter dig skapa en professionell och användarvänlig webbutik utan att behöva röra någon kod. Bokmärk den här guiden och börja bygga bättre produktpresentationer idag!
Vanliga frågor om WooCommerce-produktens shortcode
Vad är en WooCommerce-shortcode?
En WooCommerce-shortcode är en liten textbit inom hakparenteser (t.ex. [produkter]). WordPress ersätter detta med dynamiskt innehåll från din WooCommerce-butik, till exempel produktlistor, varukorgsinnehåll eller kassaformulär.
Hur använder jag WooCommerce-produktens shortcode-lista?
Du använder WooCommerce-produktens shortcode-lista genom att lägga till [products] och dess attribut på valfri sida, inlägg eller widget-område på din WordPress-webbplats. Varje attribut låter dig filtrera eller anpassa produktvisningen.
Hur kan jag visa produkter från en specifik kategori?
Du kan använda category i [products] . Till exempel [products category="clothing"] alla produkter från kategorin "kläder". Detta är kortkoden för WooCommerce-produktkategorin.
Kan jag visa produkter från en specifik tagg eller ett specifikt attribut med hjälp av en shortcode?
Ja. [products] stöder filtrering efter tagg-slugs ( tag="new-collection" ) och till och med efter anpassade attribut och deras termer. Detta ger en mycket hög nivå av kontroll över vilka produkter du visar.
Hur använder jag en WooCommerce-shortcode för utvalda produkter?
För att använda WooCommerces kortkod för utvalda produkter, markera först produkter som utvalda genom att klicka på stjärnikonen bredvid dem i produktlistan. Använd sedan kortkoden [products visibility="featured"] på valfri sida eller inlägg.
