Wil je producten op een zelfgekozen WordPress-pagina tonen? Met een WooCommerce shop shortcode plaats je eenvoudig een productoverzicht, productcategorie, aanbieding of selectie van producten op vrijwel iedere pagina van je webshop.
Shortcodes zijn vooral handig wanneer je werkt met de klassieke WordPress-editor, Elementor, WPBakery of een thema waarin je zelf pagina’s samenstelt. Door een korte code toe te voegen, laat WooCommerce automatisch de bijbehorende producten zien.
In deze handleiding ontdek je welke WooCommerce shop shortcodes beschikbaar zijn, hoe je ze gebruikt en hoe je een complete aangepaste winkelpagina maakt.
Wat is een WooCommerce shop shortcode?
Een WooCommerce shortcode is een korte opdracht tussen vierkante haakjes. WordPress herkent deze opdracht en vervangt hem aan de voorkant van de website door dynamische WooCommerce-inhoud.
Een voorbeeld is:
[products]
Deze shortcode toont een overzicht met producten. Door extra instellingen aan de shortcode toe te voegen, bepaal je onder andere:
Hoeveel producten worden getoond;
Hoeveel kolommen het overzicht krijgt;
Uit welke categorie producten worden geladen;
Welke sortering wordt gebruikt;
Of paginering wordt toegevoegd;
Of alleen aanbiedingen of bestsellers verschijnen.
De shortcode [products] is tegenwoordig de belangrijkste productshortcode van WooCommerce. Verschillende oudere shortcodes, zoals shortcodes voor recente producten, aanbiedingen en bestsellers, kunnen met instellingen binnen deze ene shortcode worden opgebouwd.
Bestaat er een officiële WooCommerce shop shortcode?
Een veelgemaakte vergissing is het gebruik van een shortcode zoals:
[woocommerce_shop]
Deze shortcode bestaat niet in de standaardversie van WooCommerce.
De officiële WooCommerce-winkelpagina werkt als een productarchief. De pagina gebruikt een template uit WooCommerce of het actieve WordPress-thema. Daarom hoeft de normale shoppagina meestal geen shortcode of andere inhoud te bevatten.
Wil je op een andere pagina een vergelijkbaar productoverzicht plaatsen? Gebruik dan:
[products]
WooCommerce maakt bij de installatie automatisch belangrijke pagina’s aan, waaronder de winkel, winkelwagen, afrekenpagina en accountpagina. De standaard winkelpagina heeft geen shortcode nodig, omdat het productoverzicht door het archieftemplate wordt geladen.
Alle producten tonen met een shortcode
De eenvoudigste WooCommerce shop shortcode is:
[products]
Deze code toont alle producten die zichtbaar mogen zijn in de webshop.
Bij een grote webshop is het niet verstandig om alle producten tegelijk te laden. Gebruik daarom een limiet en paginering:
[products limit="12" columns="4" paginate="true"]
Hiermee worden twaalf producten per pagina getoond, verdeeld over vier kolommen. Onderaan verschijnt navigatie waarmee bezoekers naar de volgende productpagina kunnen gaan.
Betekenis van de instellingen
limit="12"bepaalt hoeveel producten worden geladen;columns="4"verdeelt de producten over vier kolommen;paginate="true"activeert paginering.
Vier kolommen werkt meestal goed op desktop. De mobiele weergave wordt doorgaans automatisch aangepast door het WooCommerce-thema.
Producten uit een categorie tonen
Wil je alleen producten uit een bepaalde categorie laten zien? Gebruik dan het categorie-attribuut:
[products category="schoenen" limit="12" columns="4"]
Vervang schoenen door de slug van jouw productcategorie.
De slug is niet altijd hetzelfde als de zichtbare categorienaam. Je vindt deze via:
WordPress-dashboard → Producten → Categorieën
Staat de categorie bijvoorbeeld op:
jouwdomein.nl/product-categorie/herenschoenen/
Dan is de slug meestal:
herenschoenen
De shortcode wordt dan:
[products category="herenschoenen" limit="12" columns="4" paginate="true"]
Je kunt ook verschillende categorieën combineren:
[products category="schoenen,kleding,accessoires" limit="12" columns="4"]
WooCommerce ondersteunt hiervoor onder andere categorie-slugs, tags, product-ID’s, SKU’s en productattributen.
Een enkele productcategorie tonen
WooCommerce beschikt daarnaast over de shortcode:
[product_category category="schoenen"]
Deze shortcode toont producten uit één opgegeven categorie.
Een uitgebreider voorbeeld is:
[product_category category="schoenen" limit="12" columns="4" orderby="date" order="DESC"]
Hiermee worden maximaal twaalf producten uit de categorie schoenen getoond. De nieuwste producten verschijnen als eerste.
Hoewel [product_category] nog steeds beschikbaar is, biedt [products] meestal meer mogelijkheden en een flexibelere opbouw.
Productcategorieën tonen
Wil je geen losse producten, maar een overzicht van productcategorieën tonen? Gebruik dan:
[product_categories]
Een praktische versie is:
[product_categories number="12" columns="4" parent="0"]
Deze shortcode toont maximaal twaalf hoofdcategorieën in vier kolommen.
De instelling parent="0" zorgt ervoor dat alleen hoofdcategorieën worden weergegeven. Zonder deze instelling kunnen ook subcategorieën in het overzicht verschijnen.
Je kunt lege categorieën zichtbaar maken met:
[product_categories number="12" columns="4" hide_empty="0"]
Standaard verbergt WooCommerce categorieën waaraan nog geen producten zijn gekoppeld. De categorie-shortcodes ondersteunen instellingen voor onder andere het aantal categorieën, kolommen, bovenliggende categorieën en sortering.
Aanbiedingen tonen met een WooCommerce shortcode
Voor een actiepagina of kortingsblok gebruik je:
[products on_sale="true" limit="8" columns="4"]
Hiermee worden maximaal acht producten met een actieve aanbiedingsprijs getoond.
Je kunt de nieuwste aanbiedingen eerst tonen:
[products on_sale="true" limit="8" columns="4" orderby="date" order="DESC"]
Deze shortcode is geschikt voor pagina’s zoals:
Aanbiedingen;
Sale;
Acties;
Weekdeals;
Opruiming;
Black Friday.
Plaats boven het productoverzicht een korte, unieke introductietekst. Dat helpt zoekmachines begrijpen waar de pagina over gaat en voorkomt dat de pagina uitsluitend uit producten bestaat.
Bestverkochte producten tonen
Met de volgende shortcode toon je populaire producten:
[products best_selling="true" limit="8" columns="4"]
WooCommerce gebruikt hiervoor de verkoopgegevens uit bestellingen.
Deze selectie kun je bijvoorbeeld plaatsen op:
De homepage;
Een categoriepagina;
Een landingspagina;
Een pagina met populaire producten;
Een blogartikel met productadvies.
Gebruik best_selling niet tegelijkertijd met on_sale of top_rated. Deze speciale selecties kunnen met elkaar conflicteren.
Uitgelichte producten tonen
Producten die in WooCommerce als uitgelicht zijn gemarkeerd, toon je met:
[products visibility="featured" limit="8" columns="4"]
Je markeert een product als uitgelicht via het productoverzicht in WordPress. Klik daar op het sterretje naast het gewenste product.
Deze shortcode is handig voor:
Aanbevolen producten;
Nieuwe collecties;
Producten met een hoge marge;
Seizoensproducten;
Handmatig geselecteerde artikelen.
Omdat je zelf bepaalt welke producten uitgelicht zijn, heb je volledige controle over het overzicht.
Producten op ID tonen
Wil je een handmatige selectie maken? Gebruik dan de product-ID’s:
[products ids="123,456,789" columns="3"]
De opgegeven producten worden in drie kolommen getoond.
Je vindt het product-ID door in WordPress naar Producten → Alle producten te gaan en met de muis over de productnaam te bewegen. Onder de producttitel verschijnt het ID.
Deze methode is geschikt wanneer je een vaste selectie wilt tonen, bijvoorbeeld:
Producten uit een koopgids;
Bijpassende accessoires;
Een samengestelde collectie;
Aanbevolen producten binnen een blog;
Producten van een bepaalde campagne.
Producten op SKU tonen
Je kunt producten ook selecteren met hun SKU of artikelnummer:
[products skus="SKU-001,SKU-002,SKU-003" columns="3"]
Dit is handig wanneer je met grote productimports werkt en de SKU’s eenvoudiger kunt terugvinden dan de interne WordPress-ID’s.
Controleer altijd of iedere SKU uniek is. Dubbele of ontbrekende SKU’s kunnen ervoor zorgen dat producten niet correct worden gevonden.
Producten sorteren
Met orderby bepaal je de volgorde van de producten.
Nieuwste producten eerst
[products limit="12" columns="4" orderby="date" order="DESC"]
Producten op titel
[products limit="12" columns="4" orderby="title" order="ASC"]
Populaire producten eerst
[products limit="12" columns="4" orderby="popularity" order="DESC"]
Producten met de beste beoordeling
[products limit="12" columns="4" orderby="rating" order="DESC"]
Producten in willekeurige volgorde
[products limit="12" columns="4" orderby="rand"]
Houd er rekening mee dat willekeurige sortering minder goed kan werken wanneer een cacheplugin dezelfde versie van de pagina blijft tonen. In dat geval zien bezoekers mogelijk steeds dezelfde productvolgorde. WooCommerce ondersteunt onder andere sortering op titel, datum, ID, menuvolgorde, populariteit, willekeur en beoordeling.
Een volledig product tonen op een pagina
Met de shortcode [product_page] kun je een volledige productpagina binnen een andere WordPress-pagina plaatsen.
Op basis van een product-ID:
[product_page id="123"]
Op basis van een SKU:
[product_page sku="SKU-001"]
De volledige productinformatie wordt geladen, waaronder de productafbeelding, prijs, omschrijving en bestelknop.
Gebruik deze shortcode zorgvuldig. Wanneer dezelfde productinhoud op meerdere URL’s verschijnt, kunnen vergelijkbare of dubbele pagina’s ontstaan. Voor de meeste webshops is het beter om bezoekers naar de normale productpagina te sturen.
Alleen een bestelknop tonen
Wil je alleen een prijs en knop voor een bepaald product plaatsen? Gebruik dan:
[add_to_cart id="123"]
Je kunt ook een eigen opmaak instellen:
[add_to_cart id="123" style="border:1px solid #ddd; padding:15px;"]
Deze optie is handig voor blogartikelen, landingspagina’s en tijdelijke campagnes waarbij je geen volledig productoverzicht nodig hebt.
WooCommerce bevat daarnaast de shortcode [add_to_cart_url], waarmee de URL voor het toevoegen van een specifiek product kan worden opgevraagd.
Belangrijke WooCommerce pagina-shortcodes
Naast productoverzichten bevat WooCommerce verschillende shortcodes voor belangrijke webshoppagina’s.
Winkelwagen
[woocommerce_cart]
Deze shortcode toont de inhoud van de winkelwagen.
Afrekenen
[woocommerce_checkout]
Hiermee wordt het volledige afrekenproces weergegeven.
Mijn account
[woocommerce_my_account]
Deze shortcode toont het accountgedeelte, bestellingen, adressen en andere klantgegevens.
Bestelling volgen
[woocommerce_order_tracking]
Hiermee kunnen klanten de status van een bestelling opzoeken.
Winkelmeldingen
[shop_messages]
Deze shortcode toont WooCommerce-meldingen op pagina’s die normaal gesproken geen onderdeel zijn van WooCommerce. Denk aan de melding dat een product aan de winkelwagen is toegevoegd.
Deze pagina-shortcodes zijn onderdeel van WooCommerce Core. Voor winkelwagen en afrekenen zijn tegenwoordig ook speciale WooCommerce-blokken beschikbaar.
WooCommerce shortcode toevoegen in Elementor
Gebruik je Elementor? Voeg dan een shortcode als volgt toe:
Open de gewenste pagina met Elementor;
Zoek in de widgets naar Shortcode;
Sleep de Shortcode-widget naar de juiste positie;
Plak bijvoorbeeld
[products limit="12" columns="4"];Klik op Bijwerken;
Controleer het resultaat aan de voorkant van de website.
Gebruik bij voorkeur de officiële Shortcode-widget. Een shortcode in een gewone teksteditor kan soms als zichtbare tekst worden weergegeven in plaats van uitgevoerd.
Shortcode toevoegen in Gutenberg
In de WordPress-blokeditor gebruik je het blok Shortcode:
Open de pagina of het bericht;
Klik op het plusteken;
Zoek naar “Shortcode”;
Voeg het blok toe;
Plak de WooCommerce shortcode;
Publiceer of update de pagina.
WooCommerce richt zich tegenwoordig steeds meer op blokken. Shortcodes blijven beschikbaar, maar voor nieuwe webshops kan het Product Collection-blok flexibeler zijn.
WooCommerce shop shortcode werkt niet
Wordt de shortcode niet correct weergegeven? Controleer dan de volgende punten.
WooCommerce is niet actief
De shortcodes werken alleen wanneer WooCommerce is geïnstalleerd en geactiveerd.
Verkeerde aanhalingstekens
Gebruik rechte aanhalingstekens:
category="schoenen"
Gebruik geen gebogen typografische aanhalingstekens, omdat WordPress deze soms niet correct verwerkt.
Verkeerde categorie-slug
Gebruik de slug en niet automatisch de zichtbare naam van de categorie.
Goed:
[products category="herenschoenen"]
Mogelijk fout:
[products category="Herenschoenen voor heren"]
Producten staan verborgen
Controleer de cataloguszichtbaarheid van het product. Een verborgen product verschijnt niet automatisch in een normale productshortcode.
Cache toont een oude versie
Leeg de cache van WordPress, de cacheplugin, de server en eventueel de CDN.
Thema of plugin veroorzaakt een conflict
Test tijdelijk met een standaard WordPress-thema en schakel niet-noodzakelijke plugins één voor één uit. Maak vooraf altijd een back-up of voer de test uit op een stagingomgeving.
Is een shortcode goed voor SEO?
Een WooCommerce shop shortcode is niet automatisch goed of slecht voor SEO. De kwaliteit van de volledige pagina bepaalt uiteindelijk hoe goed deze kan presteren.
Voeg daarom altijd waardevolle content toe rond het productoverzicht:
Schrijf een unieke introductie;
Gebruik één duidelijke H1;
Verwerk relevante H2- en H3-koppen;
Voeg interne links toe;
Optimaliseer productafbeeldingen;
Schrijf unieke categorie- en productteksten;
Voeg een FAQ toe;
Voorkom dunne pagina’s met uitsluitend producten.
Een sterke opbouw is bijvoorbeeld:
SEO-geoptimaliseerde introductie;
Belangrijkste voordelen of categorie-informatie;
Productoverzicht via shortcode;
Uitgebreide koopinformatie;
Veelgestelde vragen;
Interne links naar relevante categorieën.
Op deze manier combineer je gebruiksgemak met inhoud die bezoekers en zoekmachines helpt.
Veelgestelde vragen over WooCommerce shop shortcodes
Wat is de beste WooCommerce shop shortcode?
Voor de meeste productoverzichten is [products] de beste keuze. Deze shortcode ondersteunt categorieën, tags, SKU’s, product-ID’s, aanbiedingen, bestsellers, sortering, kolommen en paginering.
Welke shortcode toont alle WooCommerce-producten?
Gebruik:
[products limit="12" columns="4" paginate="true"]
Hiermee worden producten verdeeld over verschillende pagina’s.
Kan ik de normale WooCommerce-winkelpagina met een shortcode maken?
De standaard winkelpagina gebruikt een productarchieftemplate en heeft geen shortcode nodig. Voor een aangepaste pagina kun je [products] gebruiken.
Hoe toon ik alleen producten uit één categorie?
Gebruik bijvoorbeeld:
[products category="schoenen" limit="12" columns="4"]
Vervang schoenen door de juiste categorie-slug.
Hoe toon ik alleen aanbiedingen?
Gebruik:
[products on_sale="true" limit="8" columns="4"]
Kan ik een WooCommerce shortcode in Elementor gebruiken?
Ja. Plaats de shortcode in de officiële Shortcode-widget van Elementor.
Wat is het verschil tussen WooCommerce-blokken en shortcodes?
Blokken bieden een visuele manier om productoverzichten op te bouwen. Shortcodes zijn compacte tekstcodes en zijn vooral handig binnen klassieke editors, pagebuilders en bestaande websites.
WooCommerce shop shortcode
Met een WooCommerce shop shortcode kun je producten, categorieën, aanbiedingen en handmatige productselecties op vrijwel iedere WordPress-pagina tonen.
Voor de meeste toepassingen gebruik je:
[products limit="12" columns="4" paginate="true"]
Door attributen zoals category, ids, skus, on_sale, best_selling en visibility toe te voegen, stel je het productoverzicht volledig naar wens samen.
Houd er rekening mee dat de standaard WooCommerce-winkelpagina geen aparte shortcode nodig heeft. Deze pagina werkt als productarchief. Wil je een eigen landingspagina of een aangepast winkeloverzicht bouwen, dan is de shortcode [products] de meest flexibele oplossing.
