Complete gids voor WooCommerce shortcodes

WooCommerce is de populairste e-commerce plugin voor WordPress, waarmee miljoenen bedrijven hun websites kunnen omtoveren tot prachtige online winkels. Maar veel mensen zijn zich echter niet bewust van de mogelijkheden van de shortcodes.

Deze gids legt alles uit wat je moet weten over WooCommerce shortcodes, van essentiële shortcodes om producten weer te geven en winkelwagentjes te beheren tot geavanceerde aanpassingen voor een gebruikerservaring op maat.

Laten we eens kijken hoe deze kleine stukjes code je e-commerce website aanzienlijk kunnen beïnvloeden.

Wat zijn shortcodes?

Shortcodes werden geïntroduceerd in WordPress 2.5 in 2008. Het zijn kleine stukjes code tussen vierkante haakjes, zoals deze: [shortcode]. Ze fungeren als placeholders die WordPress vertellen om een specifieke functie uit te voeren of bepaalde inhoud dynamisch weer te geven.

In plaats van bijvoorbeeld handmatig een complex productraster te coderen, kun je een shortcode gebruiken om het direct te maken en weer te geven op je website. Dit bespaart tijd en vermindert de kans op fouten, waardoor het gemakkelijker wordt om je site te onderhouden en bij te werken.

In de loop der jaren zijn shortcodes steeds krachtiger en veelzijdiger geworden. WooCommerce maakt gebruik van deze functie en biedt een reeks shortcodes die specifiek zijn afgestemd op e-commerce functionaliteit.

Aan de slag met WooCommerce shortcodes

Om WooCommerce shortcodes te gebruiken op je WordPress site, moet je ervoor zorgen dat de WooCommerce plugin geïnstalleerd en geactiveerd is.

Om dat te doen log je in op je WordPress dashboard, navigeer je naar Plugins > Add new en zoek je naar “WooCommerce” Klik vervolgens op Install now bij de WooCommerce plugin en activeer hem.

Tot slot kun je de WooCommerce installatiewizard volgen om basisinstellingen te configureren, zoals winkelgegevens, betaalmethoden en verzendopties.

Wanneer je de WooCommerce plugin installeert, wordt je WordPress site automatisch bijgewerkt met de pagina’s Cart, Checkout en My account. Je kunt echter nog veel meer doen met je producten, en dat is wat we zullen onderzoeken met shortcodes.

De basissyntaxis van shortcodes

WooCommerce shortcodes bevatten vaak extra attributen om hun uitvoer aan te passen. Dit is de basisstructuur:

[shortcode attribute1="value1" attribute2="value2"]

De shortcode [products limit="4" columns="2"] geeft bijvoorbeeld vier producten weer in een tweekoloms lay-out.

Hoe je shortcodes toevoegt aan berichten, pagina’s en widgets

Shortcodes kunnen bijna overal in WordPress worden toegevoegd. Je kunt ze toevoegen aan een bericht of pagina door ze eenvoudigweg te typen of te plakken in elke teksteditor binnen WordPress of in een shortcodeblok als je Gutenberg of een paginabouwer gebruikt.

Laten we voor deze gids Gutenberg gebruiken:

1. Navigeer naar Posts of Pages in het WordPress dashboard.
2. Open het bericht/pagina waar je de shortcode wilt toevoegen.
3. Klik op het + pictogram om een nieuw blok toe te voegen.

   

4. Zoek en selecteer het blok Shortcode.
5. Plak je shortcode in het blok.

Laten we bijvoorbeeld zeggen dat je een raster van je nieuwste producten wilt weergeven op je homepage. Met behulp van de blokeditor zou je de shortcode: [products limit="3" columns="3"] invoeren en je pagina bijwerken of publiceren.

Dit maakt een raster met drie producten in één kolom, een dynamische en aantrekkelijke manier om je nieuwste producten te laten zien.

Je kunt ook shortcodes toevoegen aan widgets door te navigeren naar Appearance > Widgets. Voeg een Text widget toe aan je gewenste widgetgebied (zijbalk, footer, enz.). Voer je shortcode in het tekstvak binnen de widget in en sla de widget op.

Essentiële WooCommerce shortcodes

WooCommerce biedt een verscheidenheid aan shortcodes waarmee je producten kunt weergeven, de winkelwagen kunt beheren en het afrekenproces kunt verbeteren.

Laten we eens kijken naar de meest essentiële WooCommerce shortcodes, hun attributen en gedetailleerde voorbeelden om je te helpen ze effectief te gebruiken in je winkel.

Shortcodes die producten weergeven

De shortcode [products] is een van de meest veelzijdige WooCommerce shortcodes. Hiermee kun je een lijst met producten weergeven op basis van verschillende criteria.

Het heeft zo veel attributen waarmee je producten kunt weergeven zoals jij dat wilt:

• limit – Aantal weer te geven producten. De standaardinstelling is -1 (alles weergeven).
• columns – Aantal kolommen. De standaardinstelling is 4.
• orderby – Sorteer producten op specifieke criteria zoals date, title, price, popularity, enz.
• order – Volgorde van producten. Kan ASC (oplopend) of DESC (aflopend) zijn.
• category – Slug van de productcategorie.
• tag – Slug van de producttag.
• paginate – Maakt paginering mogelijk. Kan true of false zijn. De standaardinstelling is false.

Als je bijvoorbeeld de laatste acht producten wilt weergeven in een vier-koloms layout, gesorteerd op de datum waarop ze zijn toegevoegd in aflopende volgorde. Je kunt de volgende shortcode gebruiken.

[products limit="8" columns="4" orderby="date" order="DESC"]

Als je ook paginering wilt inschakelen zodat de gebruiker andere producten kan openen terwijl de limiet wordt weergegeven, kun je het attribuut paginate gebruiken.

[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]

Je wilt misschien ook producten uit een specifieke categorie weergeven. Met het category attribuut kun je dit doen. De shortcode hieronder toont zes producten uit de categorie “accessoires” in een drie-koloms layout:

[products category="accessories" limit="6" columns="3"]

Er worden vijf producten weergegeven omdat er op dit moment maar vijf in de categorie zijn. Er zullen er zeven beschikbaar zijn als er nog twee aan die categorie worden toegevoegd, maar er worden er maar zes weergegeven vanwege de limiet.

De shortcode [product] kan ook worden gebruikt om een los product weer te geven op basis van ID of SKU door het kenmerk id of sku toe te voegen. De onderstaande shortcode geeft bijvoorbeeld het product met ID 22 weer.

[product id="22"]

Dit kan worden toegevoegd in een blogbericht of waar je maar wilt.

Als je meer dan één product selectief wilt weergeven, kun je de attributen ids en skus gebruiken.

[products columns="3" ids="22,35,26"]

Deze shortcode geeft producten weer met de ID’s 22, 35 en 26.

Een andere shortcode die je misschien nodig hebt is de shortcode [product_page]. Deze shortcode is vergelijkbaar met [product], maar geeft de hele productpagina weer, inclusief tabbladen, gerelateerde producten en beoordelingen. Laten we bijvoorbeeld de volledige productpagina weergeven voor het product met ID 22.

[product_page id="22"]

Dit kan handig zijn voor een productsectie binnen een pagina of bericht.

Je hebt ook toegang tot een cat_operator attribuut waarmee je kunt bepalen hoe producten worden gefilterd op basis van categorieën. Beschikbare opties voor dit attribuut zijn:

• AND – Producten in de gekozen categorieën weergeven.
• IN – Producten weergeven die tot een gekozen categorie behoren (standaardwaarde).
• NOT IN – Producten weergeven die niet tot de gekozen categorieën behoren.

Als je bijvoorbeeld producten in de categorieën “clothing” en “accessories” wilt weergeven, kun je de operator AND gebruiken:

[products category="clothing, accessories" cat_operator="AND"]

Je kunt ook producten uit een bepaalde categorie uitsluiten met de operator NOT In. Bijvoorbeeld, als je alle producten wilt weergeven behalve die in de categorie “clothing”.

[products category="clothing" cat_operator="NOT IN"]

Shortcodes voor winkelwagen en kassa

WooCommerce biedt specifieke shortcodes voor essentiële e-commerce pagina’s zoals de winkelwagen, kassa en gebruikersaccount.

De shortcode [woocommerce_cart] kan bijvoorbeeld de pagina met het winkelwagentje weergeven, inclusief alle artikelen in het winkelwagentje, hoeveelheden en de totaalprijs.

Deze shortcode kan worden geplaatst op de pagina die is aangewezen als je winkelwagenpagina.

Op dezelfde manier geeft de shortcode [woocommerce_checkout] de afrekenpagina weer waar klanten hun factuur- en verzendgegevens kunnen invoeren en hun bestellingen kunnen plaatsen.

Deze shortcode moet worden geplaatst op de pagina die is aangewezen als je afrekenpagina.

De shortcode [woocommerce_my_account] kan worden gebruikt om het account van de gebruiker weer te geven, inclusief secties voor bestellingen, downloads, adressen en accountgegevens.

Tot slot kun je met de shortcode [woocommerce_order_tracking] een formulier weergeven waar klanten hun bestel-ID en e-mail kunnen invoeren om hun bestellingen te volgen.

Deze shortcode kan op elke pagina worden geplaatst waar je wilt dat klanten hun bestellingen kunnen volgen.

Productcategorie shortcodes

Als je een lijst of raster van productcategorieën wilt weergeven, kun je de shortcode [product_categories] gebruiken. Deze heeft de volgende attributen die je kunt gebruiken om het uiterlijk aan te passen:

• number – Aantal categorieën om weer te geven.
• columns – Aantal kolommen.
• orderby – Sorteer categorieën op specifieke criteria.
• order – Volgorde van categorieën. Dit kan ASC of DESC zijn.
• hide_empty – Verberg lege categorieën. Dit kan 1 (true) of 0 (false) zijn.

Als je bijvoorbeeld productcategorieën in een raster wilt weergeven, kun je de volgende shortcode gebruiken:

[product_categories number="12" columns="4" orderby="name" order="ASC"]

Deze shortcode geeft 12 productcategorieën weer in een raster van vier kolommen, gesorteerd op naam in oplopende volgorde.

Als je miniaturen toevoegt, worden ze hier weergegeven, waardoor je site er beter uitziet. Je kunt miniaturen toevoegen door naar Products > Categories > een bepaalde categorie bewerken te gaan en vervolgens naar het veld Thumbnail te scrollen om de afbeelding te uploaden.

Ook als je producten uit een specifieke categorie wilt weergeven, kun je de shortcode [product_category] gebruiken. Deze accepteert een per_page attribuut, dat het aantal producten specificeert dat per pagina moet worden weergegeven. Het accepteert ook category om de slug van de productcategorie op te geven en kolommen voor het aantal kolommen.

Deze shortcode geeft bijvoorbeeld acht producten uit de categorie “clothing” weer in een layout van vier kolommen.

[product_category category="clothing" per_page="8" columns="4"]

Geavanceerde WooCommerce shortcodes

Naast de basic shortcodes voor productweergave biedt WooCommerce geavanceerde shortcodes die meer controle en aanpassingsmogelijkheden bieden. Met deze shortcodes kun je de weergave en functionaliteit van je WooCommerce winkel aanpassen aan je specifieke behoeften.

Productweergave aanpassen

De shortcode [products] is zeer flexibel en maakt verschillende combinaties van attributen mogelijk om producten anders te filteren en weer te geven.

Hier zijn nog een paar attributen die je kunt gebruiken:

• on_sale – Of je producten in de uitverkoop wilt weergeven. true of false.
• best_selling – Of best verkopende producten moeten worden weergegeven. true of false.
• top_rated – Of je producten met de beste beoordeling wilt weergeven. true of false.

Hiermee kun je producten in de uitverkoop weergeven.

[products on_sale="true" limit="8" columns="4"]

Je kunt ook best verkopende producten in een categorie weergeven met de onderstaande shortcode:

[products category="accessories" best_selling="true" limit="6" columns="3"]

Deze shortcode toont zes best verkopende producten uit de categorie “accessories” in een 3-koloms layout.

Shortcodes voor specifieke toepassingen

WooCommerce shortcodes kunnen worden aangepast om te voldoen aan specifieke gebruikssituaties, waarbij dynamische inhoud wordt weergegeven op basis van verschillende criteria. De shortcode [recent_products] kan bijvoorbeeld worden gebruikt om recentelijk toegevoegde producten in je WooCommerce winkel weer te geven.

[recent_products limit="5" columns="5"]

Deze shortcode toont de vijf meest recent toegevoegde producten in een vijf-koloms layout.

Op dezelfde manier kun je de shortcode [featured_products] gebruiken om producten weer te geven die gemarkeerd zijn als uitgelicht in je WooCommerce winkel.

[featured_products limit="6" columns="3"]

Deze shortcode geeft zes uitgelichte producten weer in een drie-koloms layout.

Je kunt een product als uitgelicht markeren door naar de productenpagina te navigeren en het een ster te geven, zoals in de afbeelding hieronder.

Stel dat je bepaalde producten in de uitverkoop hebt. Je kunt de shortcode [sale_products] gebruiken om producten weer te geven die momenteel in de uitverkoop zijn.

[sale_products limit="8" columns="3"]

Om een verkoopprijs voor je producten in te stellen, ga je naar Products > All products Producten en klik je op het artikel dat je met korting wilt aanbieden. Scroll vervolgens naar beneden naar het gedeelte Product data.

Als je een waarde invoert in het veld WooCommerce Sale price ($), dan wordt dat de prijs die bezoekers aan de voorkant van de winkel zien. Dit veld overschrijft de waarde van de Regular price ($). Als je geen uitverkoop houdt, laat dat veld dan leeg zodat je niet per ongeluk producten afprijst.

Als je een plugin hebt die je helpt om best verkopende producten in te stellen, kun je ook de shortcode [best_selling_products] gebruiken om de best verkopende producten weer te geven in je WooCommerce winkel.

[best_selling_products limit="10" columns="4"]

De shortcode [top_rated_products] kan ook de best beoordeelde producten in je WooCommerce winkel weergeven.

[top_rated_products limit="4" columns="2"]

Samenvatting

WooCommerce shortcodes zijn krachtige hulpmiddelen die de functionaliteit van je online winkel verbeteren. Als je deze shortcodes beheerst, kun je productweergaven aanpassen, de winkelwagen beheren en het afrekenproces optimaliseren.

Experimenteer gerust met verschillende combinaties van shortcodes om de perfecte setup voor jouw winkel te vinden. Met deze hulpmiddelen kun je een dynamische en aantrekkelijke WooCommerce site maken die voldoet aan de behoeften van je klanten.

Nadat je de perfecte online winkel voor je bedrijf hebt opgezet, wil je een situatie voorkomen waarin je winkel wordt aangevallen, traag is of af en toe offline gaat, wat de zaken beïnvloedt.

De WooCommerce plugin kan WordPress sites soms vertragen, vooral voor grote winkels met veel producten. Gelukkig hoef je je hier geen zorgen over te maken met Kinsta als hostingprovider voor je WooCommerce winkel.