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.
De shortcode voor de product categorieën is ideaal voor op mijn homepage. Alleen geeft hij tussen haakjes de hoeveelheid producten in die categorie weer en markeert dit geel. Dat is nogal jammer, hoe zou je dat er uit kunnen krijgen?
Ben ik ook benieuwd naar…
Kun je oplossen met CSS. Om het gewoon weer wit te krijgen kun je het volgende toevoegen aan het style.css bestand van je thema:
Hoi ik heb in mijn wordpress admin (wp-admin/admin.php?page=wc-status ) een melding in het rood dat de “pagina bevat niet de shortcode: [woocommerce_my_account]” Deze staat er dus wel in heb hem zelfs verwijderd en handmatig weer ingezet de melding in de admin word nog steeds weegeven. wat doe ik fout?
Je kunt altijd bij WooCommerce -> Systeemstatus -> Tools de WooCommerce pagina’s opnieuw installeren. De melding zal waarschijnlijk wel weggaan als je dit doet.
Hallo Maikel, als je winkelwagen leeg is, dan staat er een knop ga terug naar winkel.
als ik hier op klik gebeurd er niets? hoe kan dit
Zo te zien is het je ondertussen al gelukt om het op te lossen. Zolang er een winkelpagina bestaat zal dit er zijn.
Hallo,
ik heb de add to cart shortcode in een pagina geplaatst in mijn wordpress website, maar de button en prijs verschijnt niet. De andere shortcodes werken wel. Wat kan hier de oorzaak van zijn?
Thx
Johan
Durf het helaas niet te zeggen. Wellicht gebruik je een verkeerd ID van het product?
De shortcode [add_to_cart id=”10″] blijft bij mij als tekst staan. Ongeacht ik ze plaats via de visuele of de tekst-editor. Waar kan dit aan liggen?
Ook met de plugin Woocommerce shortcodes 1.0.0. verschijnt de button niet.
Kan iemand me helpen?
De aanhalingstekens even opnieuw doen in de tekst editor zal het probleem oplossen.
Beste,
Op dit moment heb ik een pagina die verwijst naar mijn winkelmand met de shortcode [woocommerce_cart] helaas krijg ik een blanke pagina in plaats van een pagina met de artikelen, hoe kan ik dit oplossen?
Groeten Amy
Kun je een link naar je webshop plaatsen?
Hallo,
Is er ook een shortcode die 1 categorie per pagina kan weergeven?
Groet,
Desley
Je kunt de standaard shortcode voorzien van een extra term: [product_category category=”naamkomthier”]
kun je ook het aantal per pagina aanpassen bedoel van een catagorie op 1 pagina niet in de winkel
Ik begrijp je vraag niet helemaal. Wat wil je precies doen?
Ik heb een probleem met de button ‘verder winkelen’ op de afreken pagina van woocommerce. Deze button linkt nergens heen.. Hoe kan ik dit aanpassen?
Heb je het geprobeerd in een andere browser? Heb je een kennis gevraagd het te testen? Wellicht dat een plugin voor wat heibel zorgt.
Ben volop aan het testen …
Heb deze shortcode op mijn homepage staan >> [recent_products per_page=”12″ columns=”4″]
Echter in plaats van 12 producten en 4 kolommen verschijnt er slechts 1 product. Als ik de per_page=”12″ en de colums=”4″ weglaat verschijnen er wel meer producten. Wil het eigenlijk instellen op 4 – 4 maar dat lukt me niet meteen?
Wat doe ik fout?
sowieso kloppen de aanhalingstekens die je gebruikt niet. Je moet ze vervangen door normale ” en “
Hoi!
Ik heb geprobeerd om een aantal specifieke producten op mijn home-pagina te krijgen:
Kijk vooral hier eens naar:
[featured_products per_page=″4″ columns=”4″]
Best verkocht:
[best_selling_products per_page=″12″]
Nu krijg ik maar 1 kolom… Ik heb een viertal artikel uitgelicht, maar toch zie ik er maar eentje. En ook bij “Best verkocht” staat maar artikel, terwijl ik er meer verkocht heb. Waar komt dit door?
Gr. Iris
Hi guys,
Allereerst: wat een onwijs handige site met goede, bruikbare info! Ik heb een vraag en ik kon niet echt iets hierover vinden op de site, maar het gaat om het volgende: ik wil op mijn winkelpagina boven de producten een soort introducerende tekst toevoegen. Is dit mogelijk en zo ja, hoe?
Ik hoor het graag, alvast bedankt.
Aukje
Zoek de pagina die wordt gebruikt als winkel home, in de meeste gevallen heeft die gewoon ‘Winkel’ en plaats daar je tekst. Die komt dan vanzelf boven de producten te staan.
Hallo,
Ik probeer op mijn homepage 3 verschillende producten weer te geven.
Hiervoor gebruik ik short code:
[product id=”431″]
[product id=”432″]
[product id=”433″]
De ID komen overeen met het artikel maar op de homepage komen steeds 3 dezelfde artikelen te staan.
Wie kan mij helpen om 3 verschillende artikelen weer te geven?
Groeten,
Ik probeer op een pagina alle categorieën te laten zien met de volgende regel:
[product_categories number=”12″ parent=”0″]
Echter ik zie helemaal niks terwijl ik weet dat ik 8 categorieën heb. Moet ik hier nog iets anders bij zetten?
plaats ook geen resultaat.
Ik zou graag willen dat ik eigenlijk 2 rijen van 4 categorieën te zien zou krijgen. Als ik het in
http://www.haagplantenonline.nl/shop/test/
Alvast bedankt voor de juiste tip?
hallo,
Wanneer ik naar mijn winkelmandje ga (en er geen producten in zitten) zegt hij:
Je winkelmand is momenteel leeg.
Terug naar winkel
Hoe kan ik de terug naar winkel button verwijderen? Hij stuurt mij dan namelijk naar een pagina waarop ik niet wil dat de bezoeker terecht komt
Alvast bedankt!
dank voor de waardevolle informatie, maar hoe kan ik producten toevoegen op de website met 2 opties. In dit geval wil ik van een bepaald merk producten met een bepaalde eigenschap uitgelicht hebben.
Het is me wel gelukt met de genoemde code om de producten van het merk weer te geven, maar hoe zorg ik dat er hierin een selectie kan worden aangebracht.