WooCommerce Shortcodes – Tutorial og masser af eksempler
WooCommerce shortcodes er måske ikke kendt af alle. Selv hvis du har en WooCommerce-butik, er det måske en funktion, du ikke er stødt på, og du er endnu ikke klar over, hvor nyttige de kan være til at strø produktreferencer og købskald til handlingsknapper ud over hele dit websted.
WooCommerce shortcodes er små kodestumper, som du kan placere hvor som helst på dit websted for at vise WooCommerce-produkter eller kald til handling som f.eks. “Køb nu”-knapper. Der er et væld af anvendelser for disse, og vi ønskede at indarbejde nogle gode eksempler direkte i vores Shoptimizer WooCommerce-tema. De bør også fungere inden for ethvert tema med WooCommerce installeret.
Det er det, vi vil se på i denne tutorial, så du hurtigt kan springe til et eksempel.
Brug af en WooCommerce shortcode til at tilføje produkter til forsiden
Visning af dine mest populære produkter overalt
Skabelse af et gitter af varer, der er til salg
Sådan vises WooCommerce-kategoriliste shortcode
Sådan inkluderes specifikke produkter i et blogindlæg med en genvejskode
Indførelse af blot et enkelt produkt i et blogindlæg (omfatter brugerdefineret CSS)
Anvendelse af WooCommerce-genvejskoden Tilføj til indkøbskurv
Sådan opretter du en ordresporingsside med en WooCommerce-genvejskode
Hvad er WooCommerce-genvejskoden til indkøbskurv?
Lad os komme i gang!
Anvendelse af en WooCommerce shortcode til at tilføje produkter til hjemmesiden
Det første oplagte sted, hvor WooCommerce shortcodes er nyttige, er på din hjemmeside. Dette er et ideelt sted at vise et dynamisk opdateret gitter af dine nyeste produkter. Når først shortkoden er blevet tilføjet, behøver du ikke redigere den igen.
Den vil automatisk vise de seneste produkter, hvilket giver din hjemmeside en frisk ny følelse, hver gang du tilføjer nye varer til din butik.
Dette er den WooCommerce shortcode, som vi bruger på Shoptimizer-hjemmesiden til at vise de seneste tilføjelser:
1
For at beskrive de enkelte attributter:
Grænse – antallet af produkter, der skal vises
Kolonner – antallet af kolonner. Dette bør være baseret på antallet af produkter, der vises.
Orderby – du kan ordne disse efter dato, id, post__in, menu_order, popularitet, rand, rating og title.
Order – dette er enten i aftagende rækkefølge (DESC) eller opstigende (ASC).
Synlighed – de produkter, der kan ses i shoppen og søgeresultaterne.
Resultat:
Denne WooCommerce shortcode resulterer i et pænt gitter med 8 produkter, opdelt i 4 kolonner. Hvis du ønsker dette er meget hver til at ændre til et gitter af f.eks. 3. Du kan justere grænseværdien til 6 og kolonneværdien til 3 for at holde det pænt ud.
Anvendelse af seneste produkter WooCommerce shortcode
Visning af produkterne i en bestemt rækkefølge
Men hvad nu hvis du ønsker at vise dem i en bestemt rækkefølge?
Det var svært at finde dette i WooCommerce’s dokumentation, men efter lidt gravearbejde fandt jeg løsningen.
1
Dette vil vise varerne startende med produktet med ID 23, den næste er ID 13 osv.
Visning af de mest populære produkter ved hjælp af WooCommerce shortcodes
Sådan som du kan vise de nyeste varer, er det også muligt at vise dine bedst sælgende produkter. Dette er igen dynamisk opdateret og er fantastisk til at vise sæsonbestemte populære gaveideer.
Du kan bruge følgende WooCommerce shortcode til dette:
1
Resultat:
Resultat:
Visning af de mest populære produkter i din butik
Skabelse af et gitter med varer, der er på udsalg
Næst skal vi oprette en helt ny side og kalde den ‘Udsalgsvarer til mænd’ – den skal udelukkende vise udsalgsvarer med kategorien Mænd. Sådan ser det ud på vores live-temademo. Vi ønsker, at denne side automatisk skal udfyldes med alle nedsatte prisvarer inden for kategorien Mænd i WooCommerce.
Jeg bruger denne WooCommerce shortcode til at gøre det.
1
Jeg har ikke så mange produkter i denne kategori, så at sætte grænsen til 100 er mere end nok og dækker eventuelle yderligere varer, der tilføjes senere. De vigtigste yderligere variabler er on_sale=”true” og category=”men”, som kun oplister salgsvarer inden for den førnævnte kategori. Hvis man udelader det specifikke kategorivælgernavn, vises blot alle udsalgsvarer i alle kategorier. Dette passer måske bedre til netop din WooCommerce-butik.
Resultat:
Visning af udsalgsvarer
Sådan vises WooCommerce-kategoriliste shortcode
Det er også muligt ikke kun at vise produkter via WooCommerce shortcodes. Du kan også vise kategorier. Hvis du ønsker at oprette en side, der viser alle dine produktkategorier, er det virkelig nemt. Du skal bare bruge denne WooCommerce shortcode.
1
Dette vil vise alle dine kategorier, og resultatet ligner nedenstående skærmbillede, hvis du ligesom mig har tilføjet en kategori miniaturebillede til hver kategori.
Resultat:
Resultat af brug af WooCommerce-kategori-genvejskoden
Men hvad nu, hvis du kun vil vise bestemte kategorier?
Du kan bruge en anden genvejskode til at gøre dette. Det er den samme grundlæggende struktur som de andre shortcodes i WooCommerce. Du oplister kategori-id’erne, adskilt med kommaer.
1
Hvordan kan jeg vide, hvilke id’er mine kategorier har?
Du skal gå til: Produkter > Kategorier > og klikke ind på en kategori. Du vil se ID’et i url’en i din browser. For eksempel tag_ID=95, så 95 er kategoriens ID.
Find produktkategoriens ID
Sådan inkluderer du specifikke produkter i et blogindlæg med en shortcode
Et aspekt, som ofte overses, er, at WordPress grundlæggende er en fantastisk bloggingplatform. Mange e-handelsbutikker begår den fejl ikke at skrive ofte nok eller endda ikke at have en veldefineret indholdsstrategi i første omgang. Det er ikke en samtale for denne artikel, men en hurtig og nem ting at gøre er at tilføje direkte købshandlinger til produkter, der er nævnt i et blogindlæg.
Hvis vi tager denne artikel som et eksempel – lad os sige, at den nævner tre must-have jakker, der skal købes denne sæson. Hvordan ville du gå til at tilføje disse specifikke produkter til artiklen.
Det første skridt er at finde det unikke ID for hvert produkt. Det kan du gøre ved at gå til Produkter og holde musen hen over den pågældende vare.
Hold musen hen over et produkt for at afsløre ID
Du kan se i eksemplet ovenfor, at dette særlige produkts ID er 677. Gør det samme for to andre produkter og skriv ID’erne for hvert produkt ned.
Når vi tænker på en WooCommerce shortcode til dette, vil vi blot oprette en ny snippet baseret på det foregående eksempel, men med eksplicit henvisning til disse tre produkt-ID’er.
1
Du vil se, at de tre numre er adskilt med kommaer. De vises i den rækkefølge, du angiver. Jeg bruger columns=”3″, da der er tre id’er opført. Hvis jeg skulle vise fire elementer, ville jeg ændre dette til columns=”4″.
Det bliver mere tricky, hvis jeg ønskede at vise et større antal elementer, hvis det var 9 for eksempel, kan det se bedst ud opdelt i 3 rækker af 3. Det er op til dig.
Resultat:
Visning af specifikke produkter inden for et blogindlæg
Tilføjelse af blot et enkelt produkt til et blogindlæg (inkluderer brugerdefineret CSS)
Hvis vi ønsker at tilføje blot et enkelt produkt til et indlæg, vil det optage hele bredden af indholdet – hvilket ville se lidt mærkeligt ud. Jeg vil gerne lade det flyde til højre og lade teksten flyde rundt om det.
Først og fremmest ser WooCommerce shortcode med kun ét produkt således ud.
1
Og nu noget brugerdefineret CSS, som du kan tilføje: Udseende > Tilpas > Tilpas > Yderligere CSS. Bemærk tilstedeværelsen af en media query, hvilket betyder, at stilen træder i kraft på viewports over 768px. Så på mindre skærme vil produktet være i fuld bredde.
1
2
3
4
5
6
7
8
9
@media kun skærm og (min-bredde: 768px) {
.single-post ul.products.columns-1 {
max-width: 300px;
float: right;
border-left: 1px solid #e2e2e2e2e2e2;
padding-left: 40px;
margin-left: 50px;
}
}
Resultat:
Resultatet af dette, ser ud som nedenstående skærmbillede. Du kan også se det live på dette indlæg på Shoptimizer-demositet.
At tilføje et enkelt produkt til et blogindlæg – resultat af brugerdefineret CSS
Anvendelse af WooCommerce tilføj til kurv shortcode
Hvis du ikke ønsker at vise hele produktet, er der en måde at vise bare købsknappen på. På det samme indlæg helt nede i bunden kan du se, hvordan det ser ud i Shoptimizer WooCommerce-temaet.
Den WooCommerce tilføj til kurv shortcode til dette er simpelthen:
1
Du skal endnu engang bare bytte ID’et for det produkt, du ønsker at vise.
Resultat:
Visning af WooCommerce tilføj til kurv shortcode inden for et blogindlæg
I Shoptimizer, ved at bruge denne shortcode, henter du automatisk den knapfarve, der er indstillet i customizer og tilføjer en flot skygge. Dette hjælper med at løfte den fra siden og giver definition i forhold til de andre elementer, hvilket får den til at skille sig mere ud.
Sådan opretter du en ordresporingsside med en WooCommerce shortcode
En side, som ikke bliver tilføjet som standard i WooCommerce, er ordresporingssiden. Du skal selv oprette den, ja, ved hjælp af en WooCommerce Shortcode.
I Shoptimizer kan du gøre dette ved at oprette en ny side kaldet Order Tracking og tilføje en ny shortcode-blok til indholdet. Dette er den shortcode du skal inkludere:
1
Du skal også ændre dropdown-menuen Skabelon i højre side til Fuld bredde. Resultatet vil se således ud:
Ordresporing i WooCommerce
Hvad er WooCommerce kurv shortcode?
Når du installerer WooCommerce, får du automatisk oprettet et par sider til dig, hvis du bruger deres indbyggede guide. Det drejer sig om siderne Cart, Checkout og My Account. Du er måske klar over, at disse også bruger WooCommerce shortcodes. Det er alt, hvad der skal til for at oprette disse sider.
WooCommerce-kortkoden til indkøbskurven er simpelthen denne:
1
Resultat:
Dette resulterer i den indkøbskurvsside, der er oprettet for dig.
WooCommerce cart shortcode-resultat
Vigtigt: Sørg for, at dette er blevet indstillet til at være siden Cart i WooCommerce’s indstillinger. WooCommerce > Settings > Advanced
