WooCommerce shortcodes die je kunt gebruiken

Shortcodes in WooCommerce zijn direct aanwezig nadat je WooCommerce op jouw website hebt geïnstalleerd.

Je kunt deze WooCommerce shortcodes gebruiken in al je berichten en pagina’s, waardoor je opeens een tal van handige mogelijkheden krijgt.

Zo kun je bijvoorbeeld met behulp van de shortcodes zelf een unieke homepage maken met je eigen indeling of producten verwerken in artikelen die over het desbetreffende product gaan.

De mogelijkheden zijn eindeloos als je maar weet welke shortcodes beschikbaar zijn. In dit artikel laat ik je daarom graag zien welke WooCommerce shortcodes je allemaal kunt gebruiken en wat deze shortcodes precies doen.

WooCommerce shortcodes op de standaard-pagina’s

Laten we beginnen met de WooCommerce shortcodes die je te zien krijgt op de pagina’s die automatisch door WooCommerce gegenereerd worden.

De pagina’s Afrekenen, Mijn Account en Winkelmand bevatten allemaal een shortcode. Het is aan te raden om hier vooral vanaf te blijven, want dit staat allemaal goed ingesteld.

Mocht je per ongeluk toch iets wijzigen, dan is het natuurlijk wel handig om te weten welke shortcodes op deze pagina’s gebruikt worden, zodat je het weer terug kunt zetten. De volgende shortcodes worden gebruikt:

• Op de pagina Afrekenen:  [woocommerce_checkout]
• Op de pagina Mijn Account: [woocommerce_my_account]
• Op de pagina Winkelmand: [woocommerce_cart]

WooCommerce shortcodes waar je iets mee kunt

Naast bovenstaande WooCommerce shortcodes zijn er allerlei andere shortcodes waar je iets mee kunt doen om de berichten of pagina’s van je webshop te verbeteren.

Hieronder volgt een lijst waar shortcodes voor zijn. Ik zal al deze shortcodes stuk voor stuk behandelen en laten zien hoe het er op je webshop uit zal zien.

• Bestelnummer volgen
• Recente producten
• Uitgelichte producten
• Specifieke producten
• Producten in de uitverkoop
• Bestverkochte producten
• Best beoordeelde producten
• Producten met bepaalde eigenschap
• Gerelateerde producten
• Productpagina’s
• Productcategorieën
• Product toevoegen aan winkelmand
• Notificaties op normale pagina’s

Extra mogelijkheden met de WooCommerce shortcodes

Voordat we met het overzicht van alle shortcodes beginnen wil ik alvast melden dat je bij veel shortcodes van WooCommerce extra mogelijkheden hebt. In de shortcode zitten dan nog wat extra parameters verwerkt, waarmee je bepaalde dingen kunt aangeven.

Extra codes binnenin de shortcode die je te zien kunt krijgen zijn:
Per_page: Hiermee kun je aangeven hoeveel producten er op een pagina getoond mogen worden.

Columns: Hiermee kun je het aantal kolommen aangeven dat naast elkaar mag staan.

Order: Hiermee kun je kiezen voor “asc” of “desc”. Ascending gaat van laag naar hoog (1, 2, 3; a, b, c). Descending gaat van hoog naar laag (3, 2, 1; c, b, a).

Orderby: Hiermee kun je aangeven op wat voor manier de volgorde bepaald moet worden. Standaard is dit op datum (date), maar er zijn nog veel meer mogelijkheden. Zie de WordPress codex om alle parameters te bekijken die je kunt gebruiken.

Tot zover de extra mogelijkheden die je regelmatig tegen zal komen bij de WooCommerce shortcodes. Laten we nu bekijken welke shortcodes er allemaal zijn en wat de shortcodes laten zien.

WooCommerce bestelnummer volgen shortcode

Wanneer je klanten van jouw webshop de mogelijkheid wilt geven om te kijken wat de status van hun bestelling is, dan kun je de “bestelnummer volgen” shortcode gebruiken van WooCommerce. Het enige wat je hoeft te doen is een pagina aanmaken en de volgende shortcode in te voeren.

[woocommerce_order_tracking]

Vervolgens kan de klant zijn of haar bestelnummer in combinatie met het e-mailadres van de bestelling invoeren en op “Volgen” klikken.

Wanneer de gegevens kloppen wordt vervolgens de status van de bestelling getoond (zoals het in WooCommerce staat) en krijgt de klant ook alle bestelgegevens te zien.

WooCommerce recente producten shortcode

Wanneer je zelf een unieke homepage wilt maken met je eigen indeling, dan kan de WooCommerce shortcode voor recente producten zeker van pas komen. Je kunt hiervoor de onderstaande shortcode gebruiken:

[recent_products per_page="12" columns="4"]

In deze shortcode geef je aan dat er 12 recente producten getoond mogen worden in 4 kolommen. Het zal er ongeveer als volgt uitzien op je website, alleen dan zal je natuurlijk 12 producten zien in plaats van 4.

WooCommerce uitgelichte producten shortcode

Je kunt op je WooCommerce-webshop instellen welke producten je wilt uitlichten. Wanneer je dit gedaan hebt, kun je met behulp van onderstaande shortcode de producten oproepen in een bericht of pagina.

[featured_products per_page="4" columns="4"]

In dit geval zeg je met deze shortcode dat er 4 uitgelichte producten weergegeven mogen worden in 4 kolommen naast elkaar. De producten zien er verder gewoon normaal uit op de webshop, zoals je hieronder ook kunt zien.

WooCommerce shortcode om een product te tonen

Wanneer je een webshop hebt kan ik je alleen maar aanraden om ook vooral artikelen te schrijven over je producten. Op deze manier laat je namelijk zien dat je verstand van zaken hebt en daarnaast kan het je ook extra bezoekers opleveren.

Het is alleen zonde om niet van de gelegenheid gebruik te maken om ook het product te promoten waar je over schrijft. Je zou daarom onderstaande shortcode kunnen gebruiken, om het product in je artikel te tonen.

[product id="99"]

Zoals je ziet staat er een ID ingevuld. Het ID van een product is altijd te achterhalen op de overzichtspagina van de producten. Het enige wat je hoeft te doen is met je muis over een product heen bewegen en je zal het nummer zien staan.

Het is overigens ook mogelijk om een product te tonen met behulp van een SKU die je zelf hebt ingevuld bij het product. De shortcode zal in dat geval als volgt zijn:

[product sku="FOO"]

Op je website zal het product er als volgt uitzien in een artikel:

Ideaal natuurlijk, want mensen kunnen het product op deze manier nog steeds meteen in het winkelmandje stoppen.

Toont bij jou het product niet, terwijl je 100% zeker weet dat je alles goed hebt ingevuld? Controleer dan of de productzichtbaarheid niet op verborgen staat. Meer informatie hierover kun je vinden in het artikel “WooCommerce producten niet zichtbaar“.

Meerdere producten tonen met een shortcode

Schrijf je in een artikel over meerdere producten of wil je op een bepaalde pagina van je website een aantal specifieke producten tonen, dan kun je dit met een net iets andere shortcode als hierboven bereiken.

[products ids="1, 2, 3, 4, 5"] [products skus="foo, bar, baz" orderby="date" order="desc"]

Je kunt zoals je ziet wederom voor een ID of SKU kiezen en je moet de verschillende producten altijd scheiden met komma. Verder heb je hier ook de standaard mogelijkheid om aan te geven in hoeveel kolommen het getoond mag worden en dat soort dingen.

In winkelmand knop shortcode

Je kunt complete producten tonen in een bericht of pagina. Het is in sommige gevallen echter handiger om gewoon een “in winkelmand” knop op de pagina te tonen. Om dit te realiseren kun je de volgende shortcode gebruiken:

[add_to_cart id="99"]

Het is hier wederom mogelijk om gebruik te maken van een SKU en daarnaast kun je met “style=” ook nog CSS aan de in winkelmand knop toevoegen om de vormgeving veranderen.

In winkelmand URL shortcode

Aan deze shortcode zullen je bezoekers niks hebben, maar zelf kun je met deze shortcode wel achter iets nuttigs komen.

[add_to_cart_url id="99"]

Met deze shortcode kun je ontdekken welke URL je kunt gebruiken om een tekstlink te maken, waarmee je een product in de winkelmand kunt stoppen.

Met bovenstaande informatie weten we dat we voor het product met ID 99, we ?add-to-cart=99 achter de URL van het bericht moeten plakken, om een in winkelmand tekstlink te maken.

WooCommerce productcategorie shortcode

Met onderstaande shortcode kun je meerdere producten van een categorie tonen door de slug van een categorie in de shortcode toe te voegen.

[product_category category="hoodies"]

Op deze manier kun je dus eventueel zelf hele unieke productcategorieën maken, omdat je de rest van de pagina naar wens kunt indelen. De producten worden gewoon op de standaard manier getoond.

Weet je niet hoe je een slug van een productcategorie kunt vinden om in de shortcode te plaatsen? Je kunt de slug van een productcategorie vinden door naar “Producten -> categorieën” te gaan. In het overzicht op de pagina staat vervolgens ook netjes de slug.

Productcategorieën tonen met een shortcode

Met de shortcode hierboven kun je de producten van een productcategorie laten zien. Wanneer je echter op een pagina de productcategorieën wilt tonen in een overzicht, dan kun je dit bereiken met onderstaande shortcode:

[product_categories number="12" parent="0"]

Number geeft in dit geval aan hoeveel productcategorieën er getoond mogen worden en met parent op 0 zorg je ervoor dat alleen de hoofdcategorieën zichtbaar zijn en de subcategorieën verborgen blijven.

Verder kun je ook nog dingen als “ids” en “hide_empty” toevoegen aan deze shortcode. Met ids kun je met id’s aangeven welke specifieke productcategorieën je wilt laten zien, terwijl je met hide_empty=1 de lege categorieën kunt verbergen.

WooCommerce productpagina shortcode

Het is gewoon mogelijk met een shortcode om een complete productpagina in een andere pagina te krijgen. Mocht je dus ooit in de situatie komen waar je dit graag zou willen, dan kun je dit eenvoudig doen met behulp van een ID of SKU van het product en de volgende WooCommerce shortcode:

[product_page id="99"] [product_page sku="FOO"]

Het resultaat is natuurlijk gewoon hetzelfde als hoe de normale productpagina eruit ziet. Behalve dan dat je het natuurlijk in een andere situatie gebruikt.

Producten in de aanbieding shortcode

Heb je producten in de aanbieding en wil je deze op een aparte pagina tonen, zonder dat je hier een extra categorie voor hoeft aan te maken? De onderstaande WooCommerce shortcode is dan ideaal.

[sale_products per_page="12"]

We geven hier zoals je ziet weer netjes aan dat er maximaal 12 producten op een pagina getoond mogen worden. Verder kun je in deze shortcode wederom aangeven hoeveel kolommen er naast elkaar mogen staan en op wat voor manier het gesorteerd moet worden.

Het productoverzicht dat geladen wordt aan de hand van deze shortcode ziet er verder gewoon uit zoals je gewend bent.

Best verkochte producten shortcode

Wanneer je zelf een homepage maakt, dan is de best verkochte producten shortcode zeker een aanrader. Op deze manier kun je jouw bezoekers meteen kennis laten maken met de producten die het het beste doen. De shortcode die je kunt gebruiken is:

[best_selling_products per_page="12"]

Het zal je niet verbazen dat je hier wederom de nodige dingen kunt aanpassen. Stel dan ook gerust het aantal producten per pagina en hoeveel kolommen je naast elkaar wilt hebben naar wens in. Het is verder gewoon een normaal productoverzicht.

Gerelateerde producten shortcode

Je kunt per product de gerelateerde producten instellen, maar vaak is het toch net even iets fijner als dit automatisch wordt toegevoegd. Diverse thema’s zorgen hier zelf al voor, maar anders kun je dit bereiken met behulp van onderstaande shortcode:

[related_products per_page="12"]

In tegenstelling tot de andere shortcodes heeft het geen nut om deze shortcode op een bericht of pagina te plaatsen. Er kunnen tenslotte geen gerelateerde producten getoond worden als het niet om een product gaat.

Je kunt deze shortcode op de productpagina toevoegen. Zo kun je het bijvoorbeeld onder de lange beschrijving plaatsen.

Best beoordeelde producten shortcode

Wanneer je WooCommerce reviews hebt ingeschakeld op je website, dan kan het een leuke toevoeging zijn om op een bepaalde pagina van je website te laten zien welke producten het best beoordeeld zijn.

Je kunt de best beoordeelde producten eenvoudig toevoegen met behulp van onderstaande shortcode:

[top_rated_products per_page="12"]

Het is verder wederom gewoon een producten overzicht pagina, zoals je van WooCommerce gewend bent.

Product met specifieke eigenschappen shortcode

Wanneer je gebruik maakt van producteigenschappen in WooCommerce, dan is er ook een handige shortcode waarmee je producten met een specifieke producteigenschap kunt laten zien.

De shortcode die je kunt gebruiken is:

[product_attribute attribute="kleur" filter="zwart"]

Zoals je in de shortcode ziet is kleur de eigenschap en zwart de term. Met behulp van deze shortcode laat je dus alle producten zien, waarbij je een eigenschap kleur en de term zwart hebt ingevuld.

Je kunt het verder natuurlijk zo gek maken als je het zelf wilt aan de hand van de producteigenschappen van je eigen website. Deze shortcode doet overigens precies hetzelfde als wat je kunt doen met behulp van de gelaagde navigatie widget. Meer informatie hierover kun je in het artikel “WooCommerce widgets” lezen.

WooCommerce notificaties op normale pagina’s

Wanneer je shortcodes gebruikt op normale pagina’s, dan wil je wellicht ook de notificaties van WooCommerce inschakelen. Ik heb het dan over notificaties als “x product is toegevoegd aan je winkelmand”.

De shortcode die je kunt gebruiken om dit te bereiken is:

[shop_messages]

Wat als een shortcode niet goed werkt?

Wanneer je er 100% zeker van bent dat je de shortcode goed hebt ingevoerd en het ziet er toch niet helemaal goed uit, dan moet je even een kleine controle uitvoeren.

Ga naar de tekst editor van WordPress door rechtsboven in de editor op “Tekst” te klikken. Controleer vervolgens of rondom de shortcode de tags <pre> zijn toegevoegd, dit komt namelijk regelmatig voor als je een shortcode plakt via de visuele editor.

Wanneer je de <pre> tags rondom de shortcode ziet staan, dan moet je deze verwijderen en kun je de pagina opnieuw opslaan. De shortcode zal als het goed is nu perfect werken.

Moet alles met shortcodes?

Vind je het niet prettig om met shortcodes te werken? WooCommerce heeft sinds 2018 een plugin die werkt in combinatie met de nieuwe editor van WordPress. Je krijgt hiermee de mogelijkheid om WooCommerce blokken toe te voegen die zo’n beetje hetzelfde kunnen als veel shortcodes.

Wil je meer informatie over WooCommerce blokken in de editor? Bekijk dan het artikel WooCommerce blocks voor Gutenberg.