Woocommerce shortcodes : hoe te gebruiken in je WordPress webshop

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on print

Wat zijn shortcodes ?

WordPress-shortcodes zijn een krachtige functie om met weinig moeite coole dingen te doen. Je kan er vrijwel alles mee doen. Met shortcodes is het inbedden van interactieve elementen of het maken van complexe pagina designs net zo eenvoudig als het invoegen van een enkele regel code.

Als je bijvoorbeeld een galerij wilt toevoegen, hoef je alleen maar de volgende code in te voeren:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Dit zal een galerij met de genoemde afbeeldings-ID’s opleveren. Het zal 4 kolommen hebben en hun maximale grootte zal ‘medium’ zijn (zoals gedefinieerd door WordPress). Er is geen behoefte aan lelijke HTML-code.

image gallery with shortcode

Met behulp van sneltoetsen zijn er geen ingewikkelde scripts meer nodig. Zelfs als je weinig tot geen ervaring met programmering hebt, kan je moeiteloos dynamische inhoud toevoegen met behulp van shortcodes.

Ze zijn erg populair bij WordPress-ontwikkelaars, omdat ze enorm helpen bij het automatiseren van het maken van content en het ontwerpen ervan. Shortcodes zijn voor WordPress programmeurs wat Macro’s zijn voor data-analisten, of Keyboard Shortcuts voor professionele grafische ontwerpers.

In een notendop, Shortcode = Shortcut + Code.

Ook woocommerce maakt uitgebreid gebruik van shortcodes. Dit zal je toelaten verschillende elementen van woocommerce op te roepen op de pagina’s en berichten waar je dit wil.

Sinds versie 3.6 bevat WooCommerce verschillende product blokken voor Gutenberg. Deze zijn eenvoudiger te configureren dan de traditionele shortcodes.

Voorbeeld van een woocommerce shortcode

Er zijn tientallen shortcodes voor woocommerce. Maar ze hebben uiteraard allemaal betrekking op functies van je webshop.

Zou het bijvoorbeeld niet leuk zijn om producten te tonen in je blogpost ? Stel dat je een artikel schrijft over hoe mooi de winter kan zijn, het ijs en de sneeuw, de landschappen, skieën, …

Welke producten zou je nu willen tonen in dit artikel ? Juist de warme kleding voor de winter. Dat zou je kunnen doen met de volgende shortcode :

[products limit="8" columns="4" category="winter, ski" cat_operator="OR"]

Zoals je kan zien, is de basis shortcode “products”. Deze shortcode heeft een aantal parameters die je zelf kan instellen :

  • limit = hoeveel producten moeten er getoond worden
  • columns = hoeveel kolommen wil je gebruiken
  • category : uit welke productcategorie wil je selecteren (in dit geval 2, gescheiden door een komma)
  • cat_operator : maak een keuze uit “en” of “of”.

Vrij vertaald : Maak een selectie van 8 producten uit de productcategorie “winter” of “ski” en toon ze in 4 kolommen.

woocommerce shortcode

Zoals je kan zien zijn shortcodes niet statisch maar dynamisch : je kan ze namelijk aanpassen via parameters om telkens een ander resultaat te tonen.

Alle woocommerce shortcodes

Er zijn verschillende groepen van shortcodes in WordPress. De eerste groep zijn de “pagina shortcodes”.

We sommen hieronder de belangrijkste shortcodes op. Voor een volledig overzicht, kan je best kijken op de woocommerce shortcodes pagina.

pagina shortcodes

Deze codes kunnen op verschillende pagina’s van je website gebruikt worden. Ze roepen telkens een basisfunctie van woocommerce op :

shopping cart of winkelkar

[woocommerce_cart]

Als je dit gebruikt, wordt het winkelkar getoond. Een opsomming van alle producten die je in je winkelkarretje virtueel gelegd hebt.

cart shortcode

checkout of afrekenen

[woocommerce_checkout]
shortcode chekout

Order tracking form

[woocommerce_order_tracking]
shortcode order tracking

product shortcodes

De [producten] shortcode is een van onze meest robuuste shortcodes. Je kan er gigantisch veel mee doen. Bovenstaand voorbeeld is er een praktische toepassing van.

De [producten] shortcode stelt u in staat om producten weer te geven op basis van post ID, SKU, categorieën, attributen, met ondersteuning voor paginering, willekeurig sorteren, en productlabels.

De [producten] shortcode kan dus de “oudere” shortcodes vervangen zoals [featured_products], [sale_products], [best_selling_products], [recent_products], [product_attribute], en [top_rated_products].

We moeten dus gaan werken met de verschillende attributen of eigenschappen van de [producten] shortcode. 

Hieronder volgt een lijstje met de meest belangrijke : 

  • limit : aantal producten te tonen
  • columns : het aantal kolommen dat getoond moet worden
  • paginate (false of true) : zet de paginering op of af. Te gebruiken samen met “limit”
  • orderby : gesorteerd op een bepaalde parameter (datum, id, menu_order, popularity, rand (toeval), rating, title
  • skus : een lijst van product sku’s of stock keeping units (een unieke identifier van een product)
  • ids : een lijst van producten gebaseerd op de ID van een product
  • category : een lijst van categorieën van producten, gescheiden door een komma
  • cat_operator : gebruik de komma in de category parameter met “en” of “of”.
  • tag : een lijst van tags, gescheiden door een komma
  • order : sorteren oplopend (ASC) of aflopend (DESC)
  • class : een css klasse die je zelf kan toevoegen
  • on_sale : filtert op producten met een korting
  • best_selling  : selectie van de best verkopende producten
  • top_rated  : selectie van de producten met de meeste positieve waarderingen

Enkele voorbeelden :

[products limit=”4” columns=”2” category=”badkledij”]

Toon 4 producten van de category “badkledij” in 2 kolommen.

[products limit=”6” columns=”3” ids=”1,2,3,4,5” orderby=”popularity”]

Toon 6 producten in 3 kolommen van de producten met als ID 1 of 2 of 3 of 4  of 5 en sorteer op populariteit

[products limit=”4” columns=”4” category=”zwembroek, bikini” cat_operator=”OR” orderby=”title” class=”watersport”]

Toon 4 producten in 4 kolommen van de categorie “zwembroek” of “bikini” en sorteer op titel. Geef de output een css klasse “watersport” mee.

Zoals je hierboven kan zien, kan je best veel doen met deze shortcode.

product search : zoeken van producten

De zoekfunctie voor producten is standaard meegeleverd met de woocommerce plugin. De volgende shortcodes kunnen hierbij gebruikt worden :

[woocommerce_product_search] : activeert de producten zoekfunctie

Gebruik deze verkorte code om een tekstveld te tonen dat overeenkomende resultaten weergeeft terwijl je zoekt. 

Standaard toont het de producttitels, een korte beschrijving bij elke invoer, de prijzen van de producten en het toont ook de “Toevoegen aan winkelwagen” knoppen voor elke invoer. 

Je kan het overal op je site gebruiken en je klanten de mogelijkheid bieden om eenvoudig producten te zoeken en toe te voegen aan de winkelwagen.

Daarnaast heb je nog de volgende shortcodes :

[woocommerce_product_filter] - toont een live product zoek filter
[woocommerce_product_filter_attribute] - toont een live product Attribute Filter.
[woocommerce_product_filter_category] - toont een live product Categorie Filter.
[woocommerce_product_filter_price] - toont een live productprijsfilter.
[woocommerce_product_filter_tag] - toont een live product tag filter.
[woocommerce_product_filter_sale] - toont een live filter voor producten met kortingen
[woocommerce_product_filter_reset] - toont een knop om alle live filters te wissen.

Misschien is het de moeite nog een aparte post te maken rond de product zoek- en filtermogelijkheden. 👍

product category shortcodes

Er zijn er twee : 

[product_category] : toont de producten van een bepaalde categorie (wordt eigenlijk al gedaan door de “products” shortcode)
[product_categories] : toont alle product categorieën

Welke parameters kan je deze shortcodes meegeven ? (ze zijn bijna identiek als bij de “products” shortcode)

  • ids : lijst van id’s van categorieën die je wil selecteren (gescheiden met komma)
  • limit : hoeveel categorieën wil je tonen
  • columns : het aantal kolommen dat je wil
  • hide_empty : in “true”, worden de categorieën die geen producten hebben verborgen
  • order_by : sorteren op naam, id , slug of menu_order
  • parent : toon enkel de categorieën van een bepaalde hoofdcategorie.
  • order : oplopend (ASC) of aflopend sorteren (DESC)

Enkele voorbeelden :

[product_categories limit=”4” columns=”4” hide_empty=”true”]

Toon 4 categorieën in 4 kolommen én elke getoonde categorie moet op zijn minst 1 product hebben

[product_categories limit=”8” columns=”2” order=”DESC” order_by=”title”]

Toon 8 categorieën in 2 kolommen en sorteer ze op titel aflopend (van z naar a dus)

Woocommerce blocks voor Gutenberg

Sinds de invoering van Gutenberg als de standaard tekst editor van WordPress, zijn bovenstaande shortcodes nog wel aanwezig maar kunnen ze vervangen worden door zogenaamde Gutenberg blocks.

De volgende blocks zijn standaard aanwezig bij de installatie van Woocommerce :

  • Aanbevolen producten: Selecteer en toon een enkel product in een nieuw “high-impact” formaat. Controleer de uitlijning van de tekst, toon of verberg de prijs en de beschrijving, voeg een kleur overlay toe, verander de oproep van de knop in actie, geef een aangepaste hoogte op, of overschrijf de productfoto.
  • Individuele, handgekozen producten: Zoek en toon meerdere producten naar keuze in een raster.
  • Bestsellers/top-rated: Toon een raster van uw best verkopende producten, filterbaar per categorie.
  • Nieuwste producten: Toon een raster van uw nieuwste producten, filterbaar per categorie.
  • Verkoop producten: Toon een raster van te koop aangeboden producten, filterbaar per categorie.
  • Producten met specifieke kenmerken of voorwaarden: Laat producten zien die meerdere of specifieke attributen hebben gekregen.
  • Filter producten op basis van prijs en attributen (eigenschappen).

Hopelijk ben je nu wat wijzer geworden in het wereldje van de shortcodes van woocommerce. Als je specifieke vragen hebt, kan je ons zeker een mailtje sturen.


Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on email
Email
Share on print
Print

Download e-book

Download gratis ons gratis "Praktisch Wordpress handboek"

Mailbox Marketing Favicon
Woocommerce en WordPress : a match made in heaven ?

Download ons gratis e-boek ! Boordevol praktische tips & tricks voor woocommerce.