E-handelens verden kører på fleksibilitet. En succesfuld onlinebutik skal kunne ændre, tilpasse og fremhæve specifikke produkter med et øjebliks varsel. Selvom mange butiksejere mener, at dette kræver en udvikler, er sandheden, at et kraftfuldt, indbygget værktøj i WooCommerce gør det nemt: WooCommerce-produkt-shortcoden. Dette enkle, men alsidige værktøj giver dig mulighed for at vise produkter, oprette brugerdefinerede gitre og bygge dynamiske sider uden at skrive en eneste linje kode.
Denne omfattende guide vil lære dig, hvordan du mestrer [products] . Du lærer at bruge dens attributter til at skabe fantastiske, brugerdefinerede produktvisninger til enhver side, indlæg eller widget-område. Uanset om du er nybegynder, der ønsker at tilføje et par produkter til din hjemmeside, eller en avanceret bruger, der har brug for at bygge en kompleks, filtrerbar landingsside, er denne artikel din komplette reference.
Grundlæggende: Din liste over essentielle WooCommerce-shortcodes
Før vi dykker ned i [produkter] , lad os forstå, hvad shortcodes er, og deres rolle i WordPress. En shortcode er et lille stykke kode omsluttet af firkantede parenteser, som f.eks. [shortcode] . WordPress erstatter den som en pladsholder med dynamisk indhold eller funktionalitet, når siden vises. Du kan bruge shortcodes overalt, hvor du kan tilføje tekst, inklusive i den klassiske editor, Gutenberg-blokke og sidebyggere som Elementor .
Selvom vores fokus er på [produkter] , kommer WooCommerce med en komplet liste over WooCommerce shortcodes til vigtige butikssider. Disse shortcodes placeres normalt på de sider, som WooCommerce opretter automatisk under opsætningen:
[woocommerce_cart]– Viser indholdet af indkøbskurvens side.[woocommerce_checkout]– Viser betalingsformularen.[woocommerce_my_account]– Viser kundens kontodashboard.[woocommerce_order_tracking]– Giver kunderne en formular til at spore deres ordrer.
Shortcoden [products] er den mest alsidige af dem alle. Den er nøglen til at vise produkter på andre sider og indlæg end den primære butikside. Dens grundlæggende struktur er simpelthen [products] . Denne shortcode vil i sig selv vise et gitter over dine nyeste produkter. Den virkelige styrke kommer dog fra dens attributter.
Udforsk yderligere: Sådan opsætter du en WP-indkøbskurv til problemfrit onlinesalg
Transformer dine produktsider med effektive shortcodes
Giv din WooCommerce-butik liv med dynamiske layouts og problemfri shoppingoplevelser.
Anatomien af [produkter] shortcoden
Den sande fleksibilitet ved WooCommerce-produkt-shortcoden kommer fra dens attributter. Attributter er parametre, du tilføjer i de firkantede parenteser for at kontrollere, hvilke produkter der vises, og hvordan de ser ud. Du kan tænke på dem som kommandoer, der giver specifikke shortcode-instruktioner.
Her er et hurtigt overblik over de mest almindelige attributter, du vil bruge. Dette er din essentielle liste over shortcodes til WooCommerce-produkter.
| Attribut | Fungere | Mulige værdier |
begrænse | Angiver antallet af produkter, der skal vises. | Ethvert positivt heltal (f.eks 8, 12) |
kolonner | Angiver antallet af kolonner i gitteret. | 1 til 6 |
bestil efter | Angiver, hvordan produkter sorteres. | dato , titel , id , popularitet , bedømmelse , rand |
bestille | Angiver sorteringsrækkefølgen. | ASC (Stigende) eller DESC (Faldende) |
id'er | Viser specifikke produkter efter ID. | Kommasepareret liste over produkt-ID'er (f.eks "1,2,3") |
skus | Viser specifikke produkter efter SKU. | Kommasepareret liste over produkt-SKU'er (f.eks. "hættetrøje-01, t-shirt-02" ) |
kategori | Filtrer efter produktkategori, slug eller ID. | Kommasepareret liste over kategorisneglene (f.eks. "tøj, tilbehør" ) |
på udsalg | Viser produkter, der i øjeblikket er på udsalg. | ægte |
sigtbarhed | Filtrer efter produktsynlighed. | synlig , katalog , søgning , fremhævet |
paginér | Aktiverer paginering for en produktliste. | ægte |
klasse | Tilføjer en brugerdefineret CSS-klasse til gitteret. | Ethvert CSS-klassenavn (f.eks. "my-custom-grid" ) |
Husk altid at bruge lige anførselstegn ( " ) omkring dine attributværdier. En almindelig fejl er at bruge krøllede anførselstegn, da disse vil ødelægge shortcoden.
Læs også: Sådan rettes WooCommerce-produkter, der ikke vises på butikssiden: Hurtige løsninger
Mastering af produktvalg: Praktiske og avancerede shortcode-brugsscenarier
Se nu på eksempler på shortcodes til WooCommerce-produkter fra den virkelige verden, og lær, hvordan du bruger dem effektivt. Disse eksempler hjælper dig med at oprette dynamiske, brugerdefinerede produktsektioner på enhver side.
Viser udvalgte produkter
WooCommerce-shortcoden for fremhævede produkter er en fantastisk måde at fremvise dine bedst sælgende eller promoverede varer på forsiden. Du skal først markere produkter som "fremhævet" i WooCommerce-dashboardet for at bruge den. Gå til "Produkter", hold musen over en vare, og klik på stjerneikonet. Stjernen bliver blå, hvilket indikerer, at produktet er fremhævet.
Kortkode: [products visibility="featured"]
Denne shortcode viser alle produkter, du har markeret som fremhævede. Du kan kombinere den med andre attributter for at forfine visningen.
Eksempel: Vis 8 udvalgte produkter i et gitter med 4 kolonner, sorteret tilfældigt. [products visibility="featured" limit="8" columns="4" orderby="rand"]
Specifikke produkter efter ID eller SKU
Nogle gange skal du vise et eller to specifikke produkter, måske i et blogindlæg eller en landingsside . Det er her, WooCommerce-produkt-ID-shortcoden er praktisk. Du kan bruge ids- attributten med en kommasepareret liste over produkt-ID'er.
Kortkode: [produkt-id'er="12, 35, 78"]
Du kan også bruge produktets SKU'er, som kan være nemmere at huske.
Kortkode: [products skus="skjorte-01, bukser-02"]
Sådan finder du ID'er og SKU'er: I dit WordPress-dashboard skal du navigere til WooCommerce → Produkter. Produkt-ID'et vises i en lille kolonne ud for produktnavnet. Du kan også holde musen over produkttitlen for at se ID'et i URL'en. SKU'et findes på produktets redigeringsside under afsnittet "Produktdata".
Filtrering efter kategori
WooCommerce-produktkategoriens shortcode er en af de mest kraftfulde attributter. Den giver dig mulighed for at oprette sektioner dedikeret til en bestemt produkttype, f.eks. en "Nye T-shirts"-sektion eller en "Tilbehør"-side.
Kortkode: [produktkategori="t-shirts"]
For at finde en kategoris slug, gå til WooCommerce → Produkter → Kategorier . Slug'en er et URL-venligt navn for kategorien.
Eksempel: Vis 9 produkter fra kategorierne "hættetrøjer" og "t-shirts" i 3 kolonner. [products category="hættetrøjer, t-shirts" limit="9" columns="3"]
Visning af udsalgs- og bedst sælgende produkter
At oprette en dedikeret side til salg er en god markedsføringsstrategi. Du kan nemt gøre dette med en shortcode.
Kortkode til udsalg: [products on_sale="true"]
På samme måde kan du fremvise dine bedst præsterende produkter.
Kortkode for bedst sælgende: [products best_selling="true"]
Kombinering af filtre til brugerdefinerede skærme
Den virkelige magi opstår, når du kombinerer flere attributter. Dette giver dig mulighed for at skabe præcise og engagerende produktgitre.
Eksempel: Vis de 12 mest populære produkter på udsalg fra kategorien "tøj" i 4 kolonner. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]
Denne detaljerede kontrol giver dig mulighed for at skabe en unik shoppingoplevelse, der holder kunderne engagerede.
Avancerede visningsindstillinger: Paginering, sortering og brugerdefineret styling
WooCommerce-produktets shortcode udvælger produkter og styrer deres udseende og opførsel på en side.
Paginering for store produktlister
Du har brug for paginering til sider med mange produkter for at undgå lange indlæsningstider og en dårlig brugeroplevelse . Paginate- attributten håndterer dette perfekt.
Kortkode: [produkter paginate="true" per_page="12"]
Attributten per_page fungerer sammen med paginate for at angive, hvor mange elementer der vises på hver side. Dette er et afgørende element i WooCommerce-produktets shortcode med pagination-funktionalitet.
Sortering og bestilling
Du kan diktere rækkefølgen af dine produkter ved hjælp af orderby og order .
orderby="price": Sorterer produkter efter deres pris.orderby="rating": Sorterer efter gennemsnitlig kundebedømmelse.orderby="popularitet": Sorterer efter antal køb.orderby="rand": Blander produkterne tilfældigt ved hver sideindlæsning.
order order ) dikterer sorteringsretningen. order="ASC" for stigende (f.eks. lav til høj pris) og order="DESC" for faldende (f.eks. høj til lav pris).
Eksempel: Vis 10 produkter sorteret efter højeste bedømmelse først. [products limit="10" orderby="rating" order="DESC"]
Brugerdefineret styling med klasser
For designere eller udviklere class- attributten et effektivt værktøj til tilpasning af WooCommerce-produkters shortcodes. Den giver dig mulighed for at tilføje en unik CSS-klasse til produktgitterets wrapper. Dette giver dig mulighed for at anvende brugerdefineret styling på din shortcode-output uden at påvirke andre produktgitter på dit websted.
Kortkode: [products class="hero-products"]
Så kan du i din brugerdefinerede CSS målrette mod denne klasse: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }
Kompatibilitetstips
WooCommerce-produktets shortcode fungerer med den klassiske editor, Gutenberg-blokeditoren (ved hjælp af en dedikeret "Shortcode"-blok) og de fleste større sidebyggere. Den er også designet til at være responsiv, hvilket betyder, at den tilpasser sig forskellige skærmstørrelser. Test dog altid dine shortcodes på desktop og mobil for at sikre, at de vises korrekt.
Strategiske brugsscenarier: Hvor og hvorfor man skal bruge produkt-shortcodes
At kende syntaksen er én ting; at bruge den strategisk er noget andet. Her er nogle ideer til at forbedre din butik ved hjælp af WooCommerce-produktets shortcode .
- Hjemmeside: Opret dedikerede sektioner til "Nye varer", "Bedst sælgende" og "På udsalg" for at guide besøgende til dine vigtigste produkter med det samme.
- Blogindlæg: Integrer et enkelt produkt eller et lille produktgitter i et blogindlæg. Hvis du skriver et blogindlæg om at style en ny jakke, skal du bruge en shortcode til at vise den specifikke jakke og andre komplementære produkter direkte under indlægget.
- Kategorilandingssider: Opret brugerdefinerede landingssider til en bestemt kategori. Du kan tilføje unik tekst og derefter bruge en shortcode til kun at vise produkterne fra den pågældende kategori.
- Marketinglandingssider: Til en ny kampagne kan du oprette en landingsside, der indeholder produkter med et specifikt tag eller fra en ny kollektion, ved hjælp af en skræddersyet WooCommerce-produktshortcode for at generere konverteringer.
Læs mere: Sådan tilføjer du en drikkepengemulighed på WooCommerce-kassesiden
Bedste fremgangsmåder for fejlfinding og optimering
Selv med et simpelt værktøj som en shortcode kan der opstå problemer. Sådan løser du almindelige problemer og sikrer, at dit websted fungerer godt.
- Tjek for tastefejl: En manglende parentes, en tastefejl i et attributnavn eller forkerte anførselstegn kan medføre, at shortcoden vises som almindelig tekst. Dobbelttjek din kode.
- Find ID'er og slugs: Sørg for at bruge de korrekte produkt-ID'er, SKU'er og kategorislugs. Den nemmeste måde at bekræfte disse på er i WordPress-dashboardet.
- Caching og ydeevne: Hvis du viser for mange produkter med en enkelt shortcode, kan det gøre dit websted langsommere. Brug
limitogpaginatetil at kontrollere antallet af produkter. Brug et godt caching-plugin til at fremskynde sideindlæsningstiden.
- Avancerede behov: Hvis du har brug for dynamisk filtrering, AJAX-pagination eller andre komplekse funktioner, kan du have brug for et dedikeret plugin. Værktøjer som WooCommerce Product Table eller WooCommerce Product Filters kan udvide shortcodens funktionalitet betydeligt.
Konklusion: Din værktøjskasse til dynamiske WooCommerce-produktvisninger
WooCommerce-produkt-shortcoden er revolutionerende for butiksejere. Den giver en simpel, men effektiv måde at skabe dynamiske, engagerende og meget tilpassede produktvisninger på tværs af dit websted. Ved at mestre [products] -shortcoden og dens attributter kan du omdanne dine statiske sider til overbevisende merchandise-værktøjer.
Start med det grundlæggende, som f.eks. en sektion med fremhævede produkter på din hjemmeside, og eksperimenter derefter med mere avancerede kombinationer for at bygge unikke landingssider og strategisk integrere produkter i dit blogindhold. Denne shortcode giver dig mulighed for at oprette en professionel og brugervenlig onlinebutik uden at røre ved nogen kode. Bogmærk denne guide, og begynd at bygge bedre produktpræsentationer i dag!
Ofte stillede spørgsmål om WooCommerce-produktshortcode
Hvad er en WooCommerce shortcode?
En WooCommerce-shortcode er et lille stykke tekst omsluttet af firkantede parenteser (f.eks. [produkter]). WordPress erstatter dette med dynamisk indhold fra din WooCommerce-butik, såsom produktlister, indkøbskurvsindhold eller betalingsformularer.
Hvordan bruger jeg WooCommerce-produktets shortcode-liste?
Du bruger WooCommerce-produkt-shortcodelisten ved at tilføje [products] og dens attributter til enhver side, indlæg eller widget-område på dit WordPress-websted. Hver attribut giver dig mulighed for at filtrere eller tilpasse produktvisningen.
Hvordan kan jeg vise produkter fra en bestemt kategori?
Du kan bruge category i [products] . For eksempel [products category="clothing"] vise alle produkter fra kategorien "tøj". Dette er shortcoden for WooCommerce-produktkategorien.
Kan jeg vise produkter fra et specifikt tag eller en attribut ved hjælp af en shortcode?
Ja. [products] understøtter filtrering efter tag-slugs ( tag="new-collection" ) og endda efter brugerdefinerede attributter og deres termer. Dette giver en meget høj grad af kontrol over, hvilke produkter du viser.
Hvordan bruger jeg en WooCommerce-shortcode til fremhævede produkter?
For at bruge WooCommerce-shortcoden for fremhævede produkter skal du først markere produkter som fremhævede ved at klikke på stjerneikonet ud for dem i produktlisten. Brug derefter shortcoden [products visibility="featured"] på en hvilken som helst side eller i et hvilket som helst opslag.
