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.

pasted image 0 8 Handige woocommerce shortcodes voor je WordPress webshop

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.

Het principe is dus simpel : je plakt een shortcode in je Gutenberg editor via de shortcode Block en klaar. Op de frontend van de website zal de shortcode dan uitgevoerd worden en tonen wat je wilde bereiken met de gekozen shortcode.

Alle shortcodes zijn compatibel met de meeste page builders zoals Gutenberg, Elementor en Visual Page Composer.

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.

pasted image 0 7 Handige woocommerce shortcodes voor je WordPress webshop

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.

pasted image 0 6 Handige woocommerce shortcodes voor je WordPress webshop

checkout of afrekenen

[woocommerce_checkout]
pasted image 0 9 Handige woocommerce shortcodes voor je WordPress webshop

Order tracking form

De shortcode “woocommerce order tracking” laat je toe om in de backend (als gebruiker) om de status van je verzending te controleren. Dit moet door de uitbater van de webshop uiteraard ingevoerd worden.

[woocommerce_order_tracking]
pasted image 0 11 Handige woocommerce shortcodes voor je WordPress webshop

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 die je kunt gebruiken waar en wanneer je maar wilt :

[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.
[related_products limit=”12″] - toont gerelateerde producten

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)

Add to cart button

Soms wil je ergens op een pagina niet de volledige product gegevens tonen maar enkel de “bestel” button van een bepaald product. Dat kan je doen door gebruik te maken van onderstaande shortcode :

[add_to_cart id="694"] : de "ID" parameter is de unieke ID van het desbetreffende product

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.

pasted image 0 10 Handige woocommerce shortcodes voor je WordPress webshop

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).

Interessante WordPress plugins met allerlei woocommerce shortcodes

Naast de blokken die standaard aanwezig zijn in Gutenberg, kna je ook gebruik maken van plugins om je arsenaal aan woocommerce shortcodes nog beter te gebruiken in je website. Het principe is vrij simpel : door de installatie van de plugin, krijg je extra shortcodes ter beschikking die je dan zoals je zelf wil kan gebruiken op verschillende pagina’s.

Deze plugin helpt je om wat extra functionaliteit aan je woocommerce site toe te voegen in de vorm van een “wish list”. Je activeert de functionaliteit door de shortcode toe te voegen op de pagina’s waar je de funcionaliteit wil activeren.

Standaard is de login en inschrijven functionaliteit van WordPress en Woocommerce vrij “rudimentair”. Met deze plugin maak je “sexy” formulieren om in te loggen en te registreren. Ook hier gebruik je de meegeleverde shortcodes op de plaats dat je ze plakt in de code.

https://wordpress.org/plugins/woo-shortcodes-kit/

Deze plugin centraliseert alle woocommerce shortcodes op een interessante manier. En voegt nog extra shortcodes toe om de ervaring van je webshop klanten te optimaliseren maar ook te personaliseren.

Deze plugin laat je toe om “wish lists” door je bezoekers te laten maken. Hierdoor kunnen ze later terugkomen en alsnog bestellen.Je roept het commando “toevoegen” aan je wenslijst op via shortcode.

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.

Interessante Lectuur

Veelgestelde vragen

Wat zijn shortcodes

Shortcode is een manier om in WordPress op een simpele manier moeilijke code uit te voeren.

Heeft Gutenberg Woocommerce shortcodes ?

Gutenberg heeft alle standaard Woocommerce shortcodes. Die worden automatisch geïnstalleerd als Woocommerce geactiveerd wordt”