WooCommerce shortcodes voor in berichten en pagina’s

Wist je dat WooCommerce samenkomt met shortcodes waar je gebruik van kunt maken in je berichten en pagina’s? Ik heb het dan niet alleen over de shortcodes die WooCommerce gebruikt tijdens het installeren van de afrekenpagina’s en dergelijke.

Ik heb het over shortcodes waarmee je producten en andere dingen in berichten en pagina’s kunt krijgen. Dit kan handig zijn wanneer je bijvoorbeeld een blogpost maakt over een product en dit product ook wilt toevoegen in het artikel.

Helaas is er geen handige interface in de editor van WordPress waar je deze shortcodes kunt selecteren en eenvoudig kunt vinden. Je zal de shortcodes zelf in moeten vullen in een bericht of pagina. In dit artikel gaan we daarom de WooCommerce shortcodes behandelen.

WooCommerce shortcodes waar je vanaf moet blijven

Wanneer je WooCommerce installeert worden er meteen een viertal belangrijke pagina’s geïnstalleerd. Bij drie van deze pagina’s wordt een shortcode toegevoegd. Dit is bij de pagina’s:

• Afrekenen – [woocommerce_checkout]
• Mijn Account – [woocommerce_my_account]
• Winkelmand – [woocommerce_cart]

Wanneer je deze pagina’s wilt bewerken zal je de shortcode zien staan waar WooCommerce gebruik van maakt om de juiste informatie op de pagina te laden. Je kunt beter niets aan deze shortcodes veranderen om problemen te voorkomen.

WooCommerce shortcodes die je kunt gebruiken

Wanneer je producten wilt toevoegen aan een blogpost of als je zelf een unieke homepage wilt maken kun je gebruikmaken van allerlei verschillende shortcodes.

Er zijn WooCommerce shortcodes voor:

• 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

Zoals je ziet heb je dus alle mogelijkheden om een unieke homepage te maken of om een product aan een bepaalde pagina toe te voegen.

Shortcode recente producten

Het kan handig zijn om op de homepage van je website de recente producten te tonen. Wanneer je dit wilt doen kun je gebruikmaken van de volgende shortcode.

[recent_products per_page=”12″ columns=”4″]

Je hebt in dit geval ook nog de mogelijkheid om nog wat dingen aan te passen. Zo geeft per_page aan hoeveel producten er per pagina getoond mogen worden en columns geeft aan hoeveel kolommen van producten er naast elkaar mogen worden getoond.

Shortcode voor uitgelichte producten

In WooCommerce kun je zelf bepalen welke producten uitgelicht mogen worden. Met onderstaande shortcode kun je ervoor zorgen dat alleen de uitgelichte producten getoond worden op de pagina.

[featured_products per_page=”12″ columns=”4″]

Je kunt net als bij de recente producten het aantal kolommen per rij en het aantal producten per pagina aanpassen.

Shortcode voor specifieke producten

Heb je een blogpost geschreven over een bepaald product en wil je dat dit product ook in de pagina geladen wordt, dan kun je gebruikmaken van onderstaande shortcode in combinatie met het ID van het product.

[product id=”12″]

Het ID van het product kun je altijd vinden als je in WordPress naar het producten overzicht gaat en met je muis over een product heen beweegt.

Wil je meerdere specifieke producten in een pagina laden, dan is de shortcode iets anders en zal je ook meerdere IDs moeten invullen. De shortcode die je hiervoor kunt gebruiken is:

[products ids=”12, 21, 59, 101, 30″]

Shortcode voor producten in de uitverkoop

Wanneer je een overzicht van alle producten die in de uitverkoop zijn aan een pagina of bericht wilt toevoegen kun je dit bereiken met onderstaande shortcode:

[sale_products per_page=”12″]

Het aantal producten per pagina kun je hier wederom wijzigen en je kunt eventueel ook nog het aantal kolommen aangeven.

Shortcode bestverkochte producten

Wil je de bestverkochte producten laten zien op een bericht of pagina, dan is dit mogelijk met de volgende shortcode:

[best_selling_products per_page=”12″]

Net als bij de andere shortcodes kun je ook hier weer de shortcode aanpassen naar je eigen wens.

Shortcode best beoordeelde producten

Wil je jouw klanten een overzicht laten zien van de best beoordeelde producten, dan is dit ook helemaal geen probleem. Je kunt dit eenvoudig bereiken met de onderstaande shortcode:

[best_selling_products per_page=”12″]

Bij per_page kun je aangeven hoeveel producten je maximaal per pagina wilt laten weergeven.

Shortcode producten met bepaalde eigenschap

Wil je pagina’s maken van producten met een bepaalde eigenschap zonder dat je bezoekers gebruik hoeven te maken van een WooCommerce widget om de producten zelf te filteren?

Wanneer je een product toevoegt en eigenschappen meegeeft kun je met behulp van een shortcode ervoor zorgen dat alleen producten met een bepaalde eigenschap worden weergegeven op een pagina.

De shortcode die je hiervoor kunt gebruiken is:

[product_attribute attribute=’merk’ filter=’nike’]

In dit geval is “merk” de eigenschap en schakel je een filter in zodat alleen de product van het merk Nike getoond mogen worden.

Shortcode gerelateerde producten

Deze shortcode zal je niet snel nodig hebben omdat de meeste thema’s er al voor zorgen dat er gerelateerde producten te zien zijn op een productpagina. Het is echter wel mogelijk om de onderstaande shortcode te gebruiken om gerelateerde producten te laten zien.

[related_products per_page=”4″]

Je kunt hier wederom het aantal producten per pagina aangeven.

Shortcode productcategorieën

Indien je een speciale pagina wilt maken met een overzicht van alle productcategorieën van je webshop, dan kun je de volgende WooCommerce shortcode gebruiken:

[product_categories number=”12″ parent=”0″]

Number geeft aan hoeveel categorieën er getoond mogen worden en wanneer je parent op 0 hebt staan zal je alleen de hoofdcategorieën zien (geen subcategorieën).

Shortcode productpagina’s

Alle producten op je website krijgen hun eigen productpagina. De kans is daarom ook heel klein dat je de volgende shortcode gaat gebruiken, maar met onderstaande shortcode kun je ervoor zorgen dat een productpagina in een andere pagina van je website geladen wordt.

[product_page id=”10″]

Wanneer je gebruik wilt maken van deze shortcode moet je niet vergeten om het ID aan te passen naar het ID van het product waarvan je de productpagina wilt laden.

Shortcode product toevoegen aan winkelmand

Wanneer je in een bericht of pagina een knop wilt maken zodat je bezoeker een bepaald product in zijn of haar winkelmand kan plaatsen, dan kun je dit bereiken met de onderstaande shortcode:

[add_to_cart id=”10″]

Het enige wat je naast het toevoegen van deze shortcode nog moet doen is het ID vervangen voor het ID van het product die de bezoeker in de winkelmand kan stoppen.

Help, de shortcode wordt weergegeven als tekst

Het kan inderdaad voorkomen dat de shortcode als tekst wordt weergegeven. Het is dan niet zo dat er een probleem is met de shortcode, maar het komt simpelweg omdat het net als normale tekst wordt weergegeven.

Waar je in dit geval op moet letten is dat je het toevoegt in de Tekst editor van WordPress en niet in de visuele editor.

Wanneer je de WooCommerce shortcodes via de tekst editor plaatst zal het niet worden weergegeven als tekst en zal het wel gewoon werken. Het is daarom verstandig om dit altijd op deze manier te doen.