De wereld van e-commerce draait om flexibiliteit. Een succesvolle webwinkel moet in staat zijn om snel te veranderen, zich aan te passen en specifieke producten direct onder de aandacht te brengen. Hoewel veel winkeleigenaren denken dat hiervoor een ontwikkelaar nodig is, maakt een krachtige, ingebouwde tool in WooCommerce dit juist heel eenvoudig: de WooCommerce product shortcode. Met deze simpele maar veelzijdige tool kunt u producten weergeven, aangepaste grids maken en dynamische pagina's bouwen zonder ook maar één regel code te schrijven.
Deze uitgebreide handleiding leert je hoe je de [products] . Je leert hoe je de attributen ervan gebruikt om prachtige, gepersonaliseerde productweergaven te creëren voor elke pagina, bericht of widgetgebied. Of je nu een beginner bent die een paar producten aan je homepage wil toevoegen of een gevorderde gebruiker die een complexe, filterbare landingspagina moet bouwen, dit artikel is je complete naslagwerk.
De basisprincipes: uw essentiële WooCommerce-shortcodelijst
Voordat we dieper ingaan op de [producten] , laten we eerst begrijpen wat shortcodes zijn en wat hun rol is in WordPress. Een shortcode is een klein stukje code tussen vierkante haakjes, zoals [shortcode] . WordPress vervangt dit als placeholder door dynamische inhoud of functionaliteit wanneer de pagina wordt weergegeven. Je kunt shortcodes overal gebruiken waar je tekst kunt toevoegen, inclusief in de klassieke editor, Gutenberg-blokken en paginabouwers zoals Elementor .
Hoewel onze focus ligt op de [producten] , biedt WooCommerce een complete lijst met shortcodes voor essentiële winkelpagina's. Deze shortcodes worden meestal geplaatst op de pagina's die WooCommerce automatisch aanmaakt tijdens de installatie:
[woocommerce_cart]– Toont de inhoud van de winkelwagenpagina.[woocommerce_checkout]– Toont het afrekenformulier.[woocommerce_my_account]– Toont het accountdashboard van de klant.[woocommerce_order_tracking]– Biedt een formulier waarmee klanten hun bestellingen kunnen volgen.
De [products] is de meest veelzijdige van allemaal. Het is de sleutel tot het weergeven van producten op pagina's en berichten anders dan de hoofdpagina van de webshop. De basisstructuur is simpelweg [products] . Op zichzelf toont deze shortcode een raster van je nieuwste producten. De echte kracht zit hem echter in de attributen.
Ontdek meer: Hoe u een WordPress-winkelwagen instelt voor probleemloze online verkoop
Transformeer uw productpagina's met krachtige shortcodes
Breng je WooCommerce-webshop tot leven met dynamische lay-outs en een naadloze winkelervaring.
De anatomie van de [producten] Shortcode
De ware flexibiliteit van de WooCommerce-productshortcode schuilt in de attributen. Attributen zijn parameters die je tussen de vierkante haken toevoegt om te bepalen welke producten worden weergegeven en hoe ze eruitzien. Je kunt ze zien als opdrachten die specifieke instructies voor de shortcode geven.
Hier volgt een kort overzicht van de meest gebruikte attributen. Dit is de essentiële lijst met shortcodes voor WooCommerce-producten.
| Attribuut | Functie | Mogelijke waarden |
beperken | Hiermee wordt het aantal weer te geven producten ingesteld. | Elk positief geheel getal (bijv 8, 12) |
kolommen | Hiermee wordt het aantal kolommen in het raster ingesteld. | 1 naar 6 |
bestellen door | Specificeert hoe producten worden gesorteerd. | datum , titel , id , populariteit , beoordeling , rand |
volgorde | Hiermee wordt de sorteervolgorde bepaald. | ASC (Oplopend) of DESC (Aflopend) |
id's | Toont specifieke producten op basis van ID. | Door komma's gescheiden lijst van product-ID's (bijv "1,2,3") |
SKU's | Toont specifieke producten op basis van SKU. | Door komma's gescheiden lijst van product-SKU's (bijv. "hoodie-01,tee-02" ) |
categorie | Filteren op productcategorie-slug of ID. | Door komma's gescheiden lijst van categorienamen (bijv. "kleding,accessoires" ) |
te koop | Toont producten die momenteel in de aanbieding zijn. | WAAR |
zichtbaarheid | Filteren op productzichtbaarheid. | zichtbaar , catalogus , zoeken , aanbevolen |
pagineren | Hiermee kunt u paginering inschakelen voor een productlijst. | WAAR |
klas | Voegt een aangepaste CSS-klasse toe aan het raster. | Elke CSS-klassennaam (bijvoorbeeld "my-custom-grid" ) |
Gebruik altijd rechte aanhalingstekens ( "" ) rond je attribuutwaarden. Een veelgemaakte fout is het gebruik van gekrulde aanhalingstekens, waardoor de shortcode niet meer werkt.
Lees ook: Hoe los je het probleem op dat WooCommerce-producten niet worden weergegeven op de winkelpagina: snelle oplossingen
Productselectie onder de knie krijgen: praktische en geavanceerde voorbeelden van het gebruik van shortcodes
Bekijk nu praktijkvoorbeelden van WooCommerce-productshortcodes en leer hoe je ze effectief kunt gebruiken. Deze voorbeelden helpen je bij het creëren van dynamische, aangepaste productsecties op elke pagina.
Uitgelichte producten weergeven
De WooCommerce shortcode voor uitgelichte producten is een geweldige manier om je bestverkochte of gepromote artikelen op de homepage te presenteren. Je moet producten eerst als 'uitgelicht' markeren in het WooCommerce-dashboard om deze shortcode te kunnen gebruiken. Ga naar 'Producten', beweeg de muis over een artikel en klik op het sterpictogram. De ster wordt blauw, wat aangeeft dat het product is uitgelicht.
Shortcode: [products visibility="featured"]
Deze shortcode toont alle producten die je als 'uitgelicht' hebt gemarkeerd. Je kunt hem combineren met andere kenmerken om de weergave te verfijnen.
Voorbeeld: Toon 8 aanbevolen producten in een raster van 4 kolommen, willekeurig gesorteerd. [products visibility="featured" limit="8" columns="4" orderby="rand"]
Specifieke producten op basis van ID of SKU
Soms moet je één of twee specifieke producten weergeven, bijvoorbeeld in een blogpost of op een landingspagina . Hier komt de WooCommerce product-ID shortcode goed van pas. Je kunt het 'ids' attribuut gebruiken met een door komma's gescheiden lijst van product-ID's.
Shortcode: [products ids="12, 35, 78"]
Je kunt ook product-SKU's gebruiken, die zijn vaak makkelijker te onthouden.
Shortcode: [products skus="shirt-01, pants-02"]
Zo vind je product-ID's en SKU's: Ga in je WordPress-dashboard naar WooCommerce → Producten. De product-ID verschijnt in een kleine kolom naast de productnaam. Je kunt ook met je muis over de producttitel bewegen om de ID in de URL te zien. De SKU vind je op de bewerkingspagina van het product onder het gedeelte 'Productgegevens'.
Filteren op categorie
De shortcode voor productcategorieën in WooCommerce is een van de krachtigste attributen. Hiermee kunt u secties creëren die specifiek zijn gewijd aan een bepaald producttype, zoals een sectie 'Nieuwe T-shirts' of een pagina 'Accessoires'.
Shortcode: [products category="t-shirts"]
Om de slug van een categorie te vinden, ga je naar WooCommerce → Producten → Categorieën . De slug is een URL-vriendelijke naam voor de categorie.
Voorbeeld: Toon 9 producten uit de categorieën "hoodies" en "t-shirts" in 3 kolommen. [products category="hoodies, t-shirts" limit="9" columns="3"]
Producten in de aanbieding en bestsellers worden weergegeven
Een aparte pagina voor sales is een uitstekende marketingstrategie. Dit kunt u eenvoudig doen met een shortcode.
Shortcode voor 'In de aanbieding': [products on_sale="true"]
Op dezelfde manier kunt u uw best presterende producten presenteren.
Shortcode voor bestsellers: [products best_selling="true"]
Filters combineren voor aangepaste weergaven
De echte magie ontstaat wanneer je meerdere kenmerken combineert. Dit stelt je in staat om nauwkeurige en aantrekkelijke productoverzichten te creëren.
Voorbeeld: Toon de 12 populairste, afgeprijsde producten uit de categorie "kleding" in 4 kolommen. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]
Deze gedetailleerde controle stelt u in staat een unieke winkelervaring te creëren die klanten betrokken houdt.
Geavanceerde weergaveopties: paginering, sortering en aangepaste opmaak
Met de WooCommerce-productshortcode kunt u producten selecteren en hun weergave en gedrag op een pagina bepalen.
Paginering voor grote productlijsten
Paginatie is nodig voor pagina's met veel producten om lange laadtijden en een slechte gebruikerservaring . Het `paginate` lost dit perfect op.
Shortcode: [products paginate="true" per_page="12"]
Het attribuut `per_page` `paginate` om te specificeren hoeveel items er op elke pagina worden weergegeven. Dit is een cruciaal element van de WooCommerce-productshortcode met pagineringsfunctionaliteit.
Sorteren en ordenen
Je kunt de volgorde van je producten bepalen met behulp van de attributen orderby en order
orderby="price": Sorteert producten op prijs.orderby="rating": Sorteert op gemiddelde klantbeoordeling.orderby="popularity": Sorteert op het aantal aankopen.orderby="rand": Schudt de producten willekeurig door elkaar bij elke paginalading.
De volgorde. Dit attribuut bepaalt de sorteerrichting. Gebruik "order="ASC" voor oplopend (bijv. van laag naar hoog) en " order="DESC" voor aflopend (bijv. van hoog naar laag).
Voorbeeld: Toon 10 producten, gesorteerd op hoogste beoordeling eerst. [products limit="10" orderby="rating" order="DESC"]
Styling op maat met lessen
Voor ontwerpers en ontwikkelaars is het `class`- attribuut een krachtig hulpmiddel voor het aanpassen van WooCommerce-productshortcodes. Hiermee kunt u een unieke CSS-klasse aan de wrapper van het productraster. Zo kunt u aangepaste styling toepassen op de uitvoer van uw shortcode zonder andere productrasters op uw site te beïnvloeden.
Shortcode: [products class="hero-products"]
Vervolgens kunt u in uw aangepaste CSS deze klasse gebruiken: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }
Compatibiliteitstips
De WooCommerce-productshortcode werkt met de klassieke editor, de Gutenberg-blokeditor (via een speciaal "Shortcode"-blok) en de meeste gangbare paginabouwers. De shortcode is bovendien responsief, wat betekent dat hij zich aanpast aan verschillende schermformaten. Test je shortcodes echter altijd op zowel desktop als mobiel om er zeker van te zijn dat ze correct worden weergegeven.
Strategische toepassingsvoorbeelden: waar en waarom productshortcodes te gebruiken
De syntax kennen is één ding; hem strategisch gebruiken is iets heel anders. Hier zijn een paar ideeën om je webwinkel te verbeteren met behulp van de WooCommerce product shortcode .
- Homepage: Maak aparte secties aan voor 'Nieuwe artikelen', 'Bestsellers' en 'Aanbiedingen' om bezoekers direct naar uw belangrijkste producten te leiden.
- Blogberichten: Voeg een enkel product of een kleine productgrid in een blogbericht in. Als je een blogbericht schrijft over het stylen van een nieuwe jas, gebruik dan een shortcode om die specifieke jas en andere bijpassende producten direct onder het bericht weer te geven.
- Landingspagina's per categorie: Maak aangepaste landingspagina's voor een specifieke categorie. U kunt unieke teksten toevoegen en vervolgens een shortcode gebruiken om alleen de producten uit die categorie weer te geven.
- Marketing landingspagina's: Voor een nieuwe campagne kunt u een landingspagina maken met producten die een specifieke tag hebben of uit een nieuwe collectie komen. Gebruik hiervoor een aangepaste WooCommerce-productshortcode om conversies te stimuleren.
Lees meer: Hoe voeg je een fooi-optie toe aan de WooCommerce-betaalpagina?
Best practices voor probleemoplossing en optimalisatie
Zelfs met een simpele tool zoals een shortcode kunnen er problemen ontstaan. Hier lees je hoe je veelvoorkomende problemen kunt oplossen en ervoor kunt zorgen dat je website goed presteert.
- Controleer op typefouten: Een ontbrekende haak, een typefout in een attribuutnaam of onjuiste aanhalingstekens kunnen ervoor zorgen dat de shortcode als platte tekst wordt weergegeven. Controleer je code nogmaals.
- ID's en slugs vinden: Zorg ervoor dat u de juiste product-ID's, SKU's en categorie-slugs gebruikt. De eenvoudigste manier om dit te controleren is via het WordPress-dashboard.
- Caching en prestaties: Het weergeven van te veel producten met één shortcode kan uw site vertragen. Gebruik de
`limit`en`paginate`om het aantal producten te beperken. Gebruik een goede caching-plugin om de laadtijden van pagina's te versnellen.
- Geavanceerde behoeften: Als u dynamische filtering, AJAX-paginering of andere complexe functies nodig hebt, heeft u mogelijk een speciale plugin nodig. Tools zoals WooCommerce Product Table of WooCommerce Product Filters kunnen de functionaliteit van de shortcode aanzienlijk uitbreiden.
Conclusie: Uw toolkit voor dynamische productweergaven in WooCommerce
De WooCommerce-productshortcode is een gamechanger voor webwinkeliers. Het biedt een eenvoudige maar krachtige manier om dynamische, aantrekkelijke en volledig gepersonaliseerde productpresentaties op uw website te creëren. Door de [products] -shortcode en de bijbehorende attributen te beheersen, kunt u uw statische pagina's omtoveren tot overtuigende marketingtools.
Begin met de basis, zoals een sectie met uitgelichte producten op je homepage, en experimenteer vervolgens met meer geavanceerde combinaties om unieke landingspagina's te bouwen en producten strategisch in je blogcontent te integreren. Met deze shortcode creëer je een professionele en gebruiksvriendelijke webwinkel zonder ook maar één regel code te hoeven schrijven. Voeg deze handleiding toe aan je favorieten en begin vandaag nog met het verbeteren van je productpresentaties!
Veelgestelde vragen over WooCommerce-productshortcodes
Wat is een WooCommerce-shortcode?
Een WooCommerce-shortcode is een klein stukje tekst tussen vierkante haakjes (bijvoorbeeld [products]). WordPress vervangt dit door dynamische content uit je WooCommerce-winkel, zoals productlijsten, winkelwageninhoud of afrekenformulieren.
Hoe gebruik ik de shortcode-lijst voor WooCommerce-producten?
Je gebruikt de shortcodelijst voor WooCommerce-producten door de [products] en de bijbehorende attributen toe te voegen aan een pagina, bericht of widgetgebied op je WordPress-website. Elk attribuut stelt je in staat om de productweergave te filteren of aan te passen.
Hoe kan ik producten uit een specifieke categorie weergeven?
Je kunt het categoriekenmerk gebruiken binnen de [products] . Bijvoorbeeld: [products category="clothing"] toont alle producten uit de categorie "kleding". Dit is de WooCommerce shortcode voor productcategorieën.
Kan ik producten op basis van een specifieke tag of eigenschap weergeven met behulp van een shortcode?
Ja. De [products] ondersteunt filteren op tag-slugs ( tag="new-collection" ) en zelfs op aangepaste attributen en hun termen. Dit biedt een zeer hoge mate van controle over welke producten u weergeeft.
Hoe gebruik ik een shortcode voor uitgelichte producten in WooCommerce?
Om de WooCommerce shortcode voor uitgelichte producten te gebruiken, markeer je producten eerst als uitgelicht door op het sterpictogram ernaast in de productlijst te klikken. Gebruik vervolgens de shortcode [products visibility="featured"] op elke pagina of elk bericht.
