Shortcodes zijn kleine, handige code snippets die je kunt invoegen in je WordPress website om de functionaliteit uit te breiden. We hebben al eens een algemene introductie over shortcodes in WordPress geschreven, maar in deze uitgebreide blogpost gaan we het specifiek hebben over shortcodes in WooCommerce. Sinds versie 3.6 bevat de WooCommerce core meerdere blokken. Die zijn wat makkelijker aan te passen dan shortcodes, dus als je de blok editor gebruikt raden we aan om gewoon blokken te gebruiken. Werk je nog met de klassieke editor of is er (nog) geen WooCommerce blok beschikbaar voor jouw specifieke toepassing, dan bieden WooCommerce shortcodes uitkomst. Deze kunnen worden ingevoegd in pagina’s, berichten, widgets en themabestanden en maken het mogelijk om verschillende elementen van je online shop op een snelle en eenvoudige manier weer te geven. Of het nu gaat om het weergeven van je producten, het beheren van winkelwagentjes of het customizen van gebruikersaccounts, je kunt ontzettend veel met shortcodes doen zonder dat je je hoeft te verdiepen in programmeren. Hieronder belichten we de verschillende shortcodes voor WooCommerce en geven we praktische voorbeelden van hoe je deze in jouw webshop kunt toepassen.
WooCommerce shortcodes: deze heb je nodig
I: WooCommerce product shortcodes
II: WooCommerce winkelpagina shortcodes
III: WooCommerce winkelwagen & checkout shortcodes
IV: WooCommerce gebruikersaccount shortcodes
I: WooCommerce product shortcodes
Met WooCommerce product shortcodes kun je productlijsten, uitgelichte producten of recent toegevoegde producten op je website weergeven.
Recente producten
Met de WooCommerce recent products shortcode kun je recent toevoegde producten op je website weergeven:
[ recent_products per_page="4" columns="4" ]
Door het per_page attribuut te veranderen kun je het aantal weergegeven producten aanpassen. Het columns attribuut bepaalt in hoeveel kolommen de producten getoond worden.
Uitgelichte producten
Met de WooCommerce featured products shortcode kun je de bestverkopende of meest populaire producten in je WooCommerce shop uitlichten:
[ featured_products per_page="4" columns="4" ]
Net als met de WooCommerce recent products shortcode kun je de per_page en columns attributen naar wens aanpassen.
Individuele producten
Wil je een specifiek product of een selectie van individuele producten weergeven, dan kun je de WooCommerce products shortcode gebruiken:
[ product_id=”96” ]
Vervang het cijfer tussen de aanhalingstekens met het product ID. Wil je meerdere producten weergeven, dan kun je de ID’s scheiden door komma’s.
Product categorieën
Door je producten aan categorieën toe te wijzen, kunnen je bezoekers makkelijker vinden wat ze zoeken. Met de WooCommerce product categories shortcode kun je producten uit een specifieke categorie weergeven.
[ product_category category="category-slug" per_page="4" columns="4" ]
II: WooCommerce winkelpagina shortcodes
Met de WooCommerce winkelpagina shortcode kun je producten rangschikken op basis van populariteit, beoordeling, prijs of datum van toevoeging. Dat zou er zo uit kunnen zien:
[ products orderby="price" order="ASC" columns="4" products="16" ]
In dit voorbeeld worden de producten gerangschikt op basis van prijs, van laag naar hoog, in een grid layout van 4 kolommen met maximaal 16 producten per pagina.
Je kunt deze shortcode eenvoudig uitbreiden met extra attributen, zoals het category attribuut:
[ products category="books" orderby="popularity" order="DESC" columns="3" products="12" ]
In de bovenstaande shortcode variatie worden de meest populaire producten uit de ‘boeken’ categorie weergegeven, in een grid layout van 3 kolommen, met maximaal 12 producten per pagina.
III: WooCommerce winkelwagen & checkout shortcodes
Winkelwagen
Met de WooCommerce cart shortcode kun je het winkelwagentje op elke gewenste plek neerzetten, zowel in pagina’s en berichten als in widget area’s. Zo kunnen bezoekers tijdens het shoppen altijd makkelijk zien wat er in hun winkelwagen zit:
[ woocommerce_cart ]
Afrekenen
Met de WooCommerce checkout shortcode kun je het afrekenproces op elke pagina van je website weergeven:
[ woocommerce_checkout ]
IV: WooCommerce gebruikersaccount shortcodes
Mijn account
De WooCommerce my account shortcode geeft de ‘Mijn account’ content weer met standard instellingen. Je kunt de inhoud aanpassen met verschillende attributen. In het onderstaande voorbeeld worden tot de 4 laatste bestellingen weergegeven van de ingelogde gebruiker:
[ woocommerce_my_account order_count=”4″ current_user=”true” ]
Mijn account bewerken
Met de WooCommerce edit account shortcode kun je de accountgegevens van de gebruiker op een alternatieve plek weergeven. Gebruikers kunnen hun gegevens ook bewerken. Met het redirect attribuut kun je indien gewenst een doorverwijzing naar de succespagina instellen.
[ woocommerce_edit_account redirect=”https://www.jouwwinkel.nl/succes_pagina” ]
Bestelling volgen
Met de WooCommerce order tracking shortcode kun je de feature weergeven waarmee klanten hun bestelling kunnen volgen:
[ woocommerce_order_tracking ]
Tot slot
We hebben hierboven alleen de belangrijkste standaard shortcodes voor WooCommerce beschreven. Heb je behoefte aan andere shortcodes voor het toevoegen van specifieke features, dan kun je gebruik maken van een van de vele gratis en premium WooCommerce extensies.
