{"id":57774,"date":"2024-01-23T14:31:22","date_gmt":"2024-01-23T13:31:22","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=57774&#038;preview=true&#038;preview_id=57774"},"modified":"2024-01-26T09:19:20","modified_gmt":"2024-01-26T08:19:20","slug":"woocommerce-blocks","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/","title":{"rendered":"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site"},"content":{"rendered":"<p>Met de WooCommerce Blocks plugin kun je aangepaste winkelpagina&#8217;s maken, je producten onder de aandacht brengen en geavanceerde e-commerce functionaliteiten toevoegen zoals filteren en zoeken &#8211; en dat alles zonder ook maar \u00e9\u00e9n regel code te schrijven.<\/p>\n<p>Veel blokken worden standaard meegeleverd met WooCommerce, maar een aantal nieuwe niet. Je kunt deze nieuwe blokken gebruiken in je WooCommerce winkel door de <a href=\"https:\/\/wordpress.org\/plugins\/woo-gutenberg-products-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce Blocks WordPress plugin<\/a> te installeren. Deze plugin is een speeltuin met experimentele features en mogelijke toekomstige toevoegingen aan de core van de WooCommerce blokken.<\/p>\n<p>WooCommerce Blocks integreren in WordPress is eenvoudig met Kinsta, waar je WooCommerce tijdens het installatieproces kunt opnemen door <a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/wordpress-aan-de-slag\/nieuwe-site\/#install-woocommerce\">een vakje aan te vinken<\/a>. Deze integratie maakt het mogelijk om snel en moeiteloos een online winkel te bouwen.<\/p>\n<p>Deze praktische handleiding helpt je bij het toevoegen van WooCommerce mogelijkheden aan je WordPress site met behulp van WooCommerce Blocks.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Vereisten<\/h2>\n<p>Om deze gids te kunnen volgen, moet je ervoor zorgen dat je:<\/p>\n<ul>\n<li><a href=\"https:\/\/en-ca.wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce<\/a> ge\u00efnstalleerd en geactiveerd hebt in je WordPress dashboard<\/li>\n<li><a href=\"https:\/\/kinsta.com\/wordpress\/\">Bekend bent met WordPress<\/a><\/li>\n<\/ul>\n<p>Als je nog geen WordPress site hebt, kun je <a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/wordpress-aan-de-slag\/nieuwe-site\/\">een WordPress site opzetten met het dashboard van Kinsta<\/a> of <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-website-offline-bouwen\/\">via DevKinsta lokaal<\/a>. Zodra je je site hebt, importeer je <a href=\"https:\/\/github.com\/woocommerce\/woocommerce\/blob\/trunk\/plugins\/woocommerce\/sample-data\/sample_products.csv\" target=\"_blank\" rel=\"noopener noreferrer\">deze voorbeeldproducten<\/a> voor je WooCommerce winkel.<\/p>\n<h2>WooCommerce Blocks<\/h2>\n<p>De standaard Block Editor van WordPress, ge\u00efntroduceerd met versie 5.0, is de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">Gutenberg Editor<\/a>. Deze verving de Classic Editor door een op blokken gebaseerd systeem, waarmee gebruikers visueel aantrekkelijke content kunnen bouwen en aanpassen zonder uitgebreide kennis van frontend codering.<\/p>\n<p>WooCommerce Blocks integreert naadloos met de intu\u00eftieve drag-and-drop interface van de Gutenberg Editor en biedt een set speciale blokken die zijn ontworpen voor productweergave, winkelwagenbeheer, afrekenprocessen en meer.<\/p>\n<p>Deze integratie stelt je in staat om optimaal te profiteren van de flexibiliteit en eenvoud van de blokken-editor, terwijl je je WordPress site aanpast voor optimale e-commerce prestaties.<\/p>\n<p>Om WooCommerce Blocks te gebruiken, begin je met het openen of maken van een pagina of bericht. Klik op de <strong>+<\/strong> knop in de bovenste balk om alle blokken te bekijken en navigeer dan naar de <strong>WOOCOMMERCE<\/strong> sectie. Hier vind je een kort overzicht van de verschillende blokken:<\/p>\n<ul>\n<li><strong>Product Search <\/strong>&#8211; Voegt een zoekbalk toe om snel producten voor klanten te zoeken.<\/li>\n<li><strong>All Products <\/strong>&#8211; Toont alle winkelproducten in een raster.<\/li>\n<li><strong>All Reviews <\/strong>&#8211; Geeft een overzicht van alle productbeoordelingen.<\/li>\n<li><strong>Classic Checkout <\/strong>&#8211; Geeft de klassieke kassa shortcode weer.<\/li>\n<li><strong>Classic Cart <\/strong>&#8211; Geeft de klassieke shortcode voor de winkelwagen weer.<\/li>\n<li><b>Customer Account <\/b>&#8211; Maakt inloggen en uitloggen van klanten mogelijk.<\/li>\n<li><strong>Featured Category <\/strong>&#8211; Markeert een productcategorie en een call-to-action (CTA) om snelle reacties aan te moedigen.<\/li>\n<li><strong>Featured Product <\/strong>&#8211; Markeert een product of variatie en een CTA.<\/li>\n<li><strong>Active Filters<\/strong>&#8211; Geeft de momenteel actieve filters weer.<\/li>\n<li><strong>Filter by Price <\/strong>&#8211; Geeft een prijsbereik weer dat klanten kunnen gebruiken om producten te filteren.<\/li>\n<li><strong>Filter by Stock <\/strong>&#8211; Maakt filteren van producten op voorraadstatus mogelijk.<\/li>\n<li><strong>Filter by Attribute <\/strong>&#8211; Filter producten op basis van attributen zoals grootte of kleur.<\/li>\n<li><strong>Filter by Rating <\/strong>&#8211; Hiermee kunnen klanten de producten filteren op hun beoordeling.<\/li>\n<li><strong>Hand-Picked Products <\/strong>&#8211; Toont een selectie van handgeplukte producten in een raster.<\/li>\n<li><strong>Mini Cart <\/strong>&#8211; Biedt een knop om het winkelwagentje snel te bekijken.<\/li>\n<li><b>Store Notices <\/b>&#8211; Geeft klantgerichte meldingen weer die zijn gegenereerd door WooCommerce of andere extensies.<\/li>\n<li><strong>Best Selling Products <\/strong>&#8211; Toont een raster met de best verkopende producten aller tijden van je winkel.<\/li>\n<li><strong>Products Categories List <\/strong>&#8211; Toont alle productcategorie\u00ebn als een lijst of een dropdown.<\/li>\n<li><strong>Products by Category <\/strong>&#8211; Geeft een overzicht van producten uit de geselecteerde categorie\u00ebn.<\/li>\n<li><strong>Product Collection (Beta)<\/strong> &#8211; Toont producten uit een aangewezen collectie.<\/li>\n<li><strong>Newest Products <\/strong>&#8211; Geeft de nieuwste producten weer in een raster.<\/li>\n<li><strong>On Sale Products <\/strong>&#8211; Geeft de huidige uitverkoopartikelen weer in een raster.<\/li>\n<li><strong>Products by Tag <\/strong>&#8211; Geeft producten met de geselecteerde tag weer in een raster.<\/li>\n<li><strong>Top Rated Products <\/strong>&#8211; Toont de hoogst gewaardeerde producten in een raster.<\/li>\n<li><strong>Products by Attribute <\/strong>&#8211; Geeft de producten met de geselecteerde attributen weer in een raster.<\/li>\n<li><strong>Reviews by Category <\/strong>&#8211; Geeft de productbeoordelingen weer van gespecificeerde categorie\u00ebn.<\/li>\n<li><strong>Reviews by Product <\/strong>\u00a0&#8211; Hiermee worden beoordelingen per product weergegeven.<\/li>\n<li><strong>Single Product <\/strong>&#8211; Laat een enkel product zien.<\/li>\n<li><b>Cart <\/b>&#8211; Geeft de winkelwagen weer.<\/li>\n<li><b>Checkout <\/b>&#8211; Geeft het formulier weer waarmee klanten een bestelling kunnen plaatsen.<\/li>\n<\/ul>\n<p>Je weet nu waar elk blok voor staat. Laten we een aantal van deze blokken gebruiken om een e-commerce ervaring te cre\u00ebren.<\/p>\n<h2>Het blok Product Grid gebruiken in WooCommerce<\/h2>\n<p>Een Product Grid blok is een veelzijdig hulpmiddel om de producten van je winkel in een georganiseerde, rasterindeling op je WordPress site te tonen. Hier lees je hoe je een productraster kunt toevoegen en aanpassen:<\/p>\n<ol start=\"1\">\n<li>Navigeer naar de pagina of het bericht waar je de producten wilt weergeven. Geef een titel zoals &#8220;Products&#8221;<\/li>\n<li>Klik op de <strong>+<\/strong> knop in de bovenste navigatiebalk om alle blokken weer te geven. Scroll naar beneden naar het gedeelte <strong>WOOCOMMERCE<\/strong> en selecteer <strong>All Products<\/strong>. Deze actie toont je producten in een raster op de pagina.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/all-products-woocommerce-block.png\" alt=\"Het blok All Products van WooCommerce gebruiken om producten in een raster weer te geven.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Het blok All Products van WooCommerce gebruiken om producten in een raster weer te geven.<\/figcaption><\/figure><\/li>\n<li>Om dit blok te configureren gebruik je het instellingenpaneel van het blok aan de rechterkant. Je krijgt toegang tot de instellingen door te klikken op het <b>Settings <\/b>pictogram (het op een na meest rechtse pictogram op de bovenste navigatiebalk).\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/all-products-setting.png\" alt=\"Instellingenpaneel om het blok All Products aan te passen.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Instellingenpaneel om het blok All Products aan te passen.<\/figcaption><\/figure>\n<p>Hier kun je de lay-out, inhoud en styling van het raster aanpassen:<\/p>\n<ul>\n<li><strong>Layout Settings:<\/strong> Pas het aantal rijen en kolommen aan. Stel beide bijvoorbeeld in op 2 voor een evenwichtig uiterlijk.<\/li>\n<li><strong>Content Settings:<\/strong> Bepaal of je een vervolgkeuzemenu voor het sorteren voor klanten wilt opnemen. Met deze functie kunnen klanten producten sorteren in een gekozen volgorde. Je kunt het desgewenst uitschakelen.<\/li>\n<li><strong>Advanced Styling:<\/strong> Indien nodig kun je CSS classes toevoegen voor een meer verfijnde styling.<\/li>\n<\/ul>\n<\/li>\n<li>Bekijk een voorbeeld van de pagina zodra je de configuraties hebt voltooid om er zeker van te zijn dat alles er uitziet zoals bedoeld. Klik vervolgens op de knop <strong>Publish<\/strong>. In deze stap kun je de pagina openbaar, priv\u00e9 of met wachtwoordbeveiliging toegankelijk maken, afhankelijk van je voorkeur.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/products-page.png\" alt=\"De bijgewerkte Products pagina toont producten in een 2 bij 2 raster en een navigatiebalk.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De bijgewerkte Products pagina toont producten in een 2 bij 2 raster en een navigatiebalk.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Een Featured Product blok toevoegen aan je pagina of bericht<\/h2>\n<p>Met het blok Featured Product kun je een product uitlichten op je pagina of bericht. Je kunt een product selecteren, de weergave-instellingen aanpassen en het toevoegen aan je inhoud om de aandacht te vestigen op een bepaald item dat je wilt laten zien.<\/p>\n<p>Volg deze stappen om een uitgelicht product toe te voegen:<\/p>\n<ol start=\"1\">\n<li>Navigeer eerst naar de pagina of het bericht waar je het product wilt laten zien. Stel je voor dat je een productraster aan het ontwerpen bent en het uitgelichte product bovenaan wilt plaatsen. Maak een ruimte op die plek en je ziet links een <strong>+<\/strong> knop.<br \/>\nAls je een bestaand blok in de buurt van de gewenste plek hebt, klik je op de drie verticale stippen zodat er een menu verschijnt. Je kunt kiezen <strong>Add before <\/strong>of <strong>Add after<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/menu-dialog.png\" alt=\"De pagina Products toont een menu met de opties Kopi\u00ebren, Toevoegen voor, Toevoegen na, Groeperen, Vergrendelen, Patroon maken en Verwijderen.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Het blok Featured Product toevoegen v\u00f3\u00f3r het blok All Products.<\/figcaption><\/figure><\/li>\n<li>Selecteer de <strong>+<\/strong> knop op de bovenste navigatiebalk om alle blokken weer te geven en zoek naar <strong>Featured Product<\/strong>.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/featured-product-block.png\" alt=\"Selecteer een product als uitgelicht product met het blok Featured Product.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Selecteer een product als uitgelicht product met het blok Featured Product.<\/figcaption><\/figure><\/li>\n<li>Kies het product dat je wilt weergeven. Klik vervolgens op <strong>Ready<\/strong>.<\/li>\n<li>Om je blok Uitgelicht product een unieke uitstraling te geven, klik je op <strong>Settings<\/strong>. In het instellingenpaneel van het blok kun je:\n<ul>\n<li>Beslissen of de productbeschrijving en prijs moeten worden weergegeven.<\/li>\n<li>Configureren hoe je media (afbeeldingen en video&#8217;s) moeten worden weergegeven.<\/li>\n<li>De alt-tekst voor de productafbeelding opgeven.<\/li>\n<li>De overlappende kleur van het blok kiezen.<\/li>\n<li>De ondoorzichtigheid van het blok aanpassen.<\/li>\n<\/ul>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/block-settings-featured-product.png\" alt=\"De instellingen van het blok Featured Products aanpassen.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De instellingen van het blok Featured Products aanpassen.<\/figcaption><\/figure><\/li>\n<li>Als je alle nodige aanpassingen hebt gedaan, kun je je pagina publiceren of bijwerken als hij al live is. Zo kun je het blok in actie zien en ervoor zorgen dat het er precies zo uitziet als jij wilt.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/products-page-1.png\" alt=\"Voorbeeld van de bijgewerkte productenpagina met het item Beanie uitgelicht boven het productraster.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Voorbeeld van de bijgewerkte productenpagina met het item Beanie uitgelicht boven het productraster.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Filter blokken gebruiken in WooCommerce<\/h2>\n<p>Met Filter blokken kunnen je klanten zoekopdrachten naar producten verfijnen op basis van specifieke criteria, zodat ze snel producten kunnen vinden die aan hun voorkeuren of eisen voldoen.<\/p>\n<ol start=\"1\">\n<li>Navigeer naar de pagina of bericht waar je de blokken wilt toevoegen. In deze handleiding wordt dezelfde <strong>Products pagina<\/strong> gebruikt als in de vorige stappen.<\/li>\n<li>Kies waar je de filters wilt toevoegen.<\/li>\n<li>Klik op de knop <strong>+<\/strong> in de bovenste navigatiebalk om alle blokken weer te geven. Scroll naar beneden naar het gedeelte <strong>WOOCOMMERCE<\/strong> en zie een filteroptie voor prijs, voorraad, kenmerk en beoordeling. Als je bijvoorbeeld <strong>Filter by Price <\/strong>kiest.<\/li>\n<\/ol>\n<h3>Het blok Filteren by Price toevoegen<\/h3>\n<p>Door dit blok te selecteren kun je een prijsbereikbalk weergeven waarmee gebruikers kunnen filteren welke producten op de pagina verschijnen op basis van hun gewenste prijsklasse. Je kunt de blokinstellingen in het rechterpaneel aanpassen aan je eigen wensen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/filter-by-price.png\" alt=\"Het blok Filter by Price toevoegen.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Het blok Filter by Price toevoegen.<\/figcaption><\/figure>\n<h3>Het blok Filter by Attribute toevoegen<\/h3>\n<p>Je kunt ook het blok <strong>Filter by Attribute <\/strong>gebruiken.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/filter-by-attribute.png\" alt=\"Een filter voor attribuut toevoegen met het blok Filter by Attribute\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De productattributen selecteren.<\/figcaption><\/figure>\n<p>Je kunt een specifiek kenmerk kiezen, zoals <strong>Color <\/strong>, en dan de instellingen dienovereenkomstig configureren. Je kunt bijvoorbeeld <strong>Display Product Count <\/strong>inschakelen om het aantal producten te tonen dat in elke kleur beschikbaar is.<\/p>\n<p>Vervolgens kun je de live pagina bekijken en de functionaliteit van de filterknoppen testen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/filter-output.png\" alt=\"De bovenkant van de bijgewerkte productpagina toont een instelbare schuifbalk voor filteren op prijs en een optie om te filteren op het kleureigenschap met opties voor blauw, grijs, groen, rood en geel\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Een voorbeeld van de filterfunctionaliteit.<\/figcaption><\/figure>\n<p>Door deze stappen te volgen, kun je je klanten een naadloze winkelervaring bieden door hen eenvoudig hun zoekopdrachten naar producten te laten verfijnen op basis van verschillende criteria, wat uiteindelijk hun tevredenheid vergroot en hen helpt de gewenste producten te vinden.<\/p>\n<h2>Winkelwagen- en kassapagina&#8217;s<\/h2>\n<p>De winkelwagen- en afrekenfuncties van je webwinkel moeten intu\u00eftief en volledig functioneel zijn voor een soepele gebruikerservaring. Om een uitstekende klantervaring te garanderen, moeten de items in de winkelwagen effectief worden beheerd en moet <a href=\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-checkout\/\">het afrekenproces moeiteloos<\/a> verlopen.<\/p>\n<p>WooCommerce maakt de <strong>winkelwagen-<\/strong> en <strong>afrekenpagina<\/strong>&#8217;s standaard aan met behulp van de juiste blokken. Klanten kunnen producten toevoegen aan hun winkelwagen en deze openen via de navigatiebalk.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/cart-page.png\" alt=\"Winkelwagenpagina met T-shirt, couponcodeoptie, subtotaal, totaal en afrekenknop\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De winkelwagenpagina.<\/figcaption><\/figure>\n<p>Nadat de inhoud van de winkelwagen is bevestigd, kan je klant de knop <strong>Continue to checkout <\/strong>selecteren, de benodigde gegevens invullen en zijn bestelling plaatsen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/checkout-page.png\" alt=\"Het afrekenformulier bevat velden voor de contactgegevens van de klant, het factuuradres en de betalingsoptie.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De afrekenpagina.<\/figcaption><\/figure>\n<h2>Een custom Shop pagina maken<\/h2>\n<p>Nu je hebt geleerd hoe je bepaalde WooCommerce Blocks kunt gebruiken, is de volgende stap het combineren ervan om een aangepaste gebruiksvriendelijke winkelpagina te maken met de volgende blokken:<\/p>\n<ul>\n<li>Product Search<\/li>\n<li>Filter by Price<\/li>\n<li>Product Categories<\/li>\n<li>Featured Product<\/li>\n<li>All Products<\/li>\n<\/ul>\n<p>Om deze aangepaste winkelindeling te maken, maak je een nieuwe pagina en volg je de onderstaande stappen.<\/p>\n<ol start=\"1\">\n<li>Voer &#8220;Shop&#8221; in als titel van de pagina.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/shop-page.png\" alt=\"Editor voor winkelpagina's met tekst, kleur, typografie, afmetingen en geavanceerde opties\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De winkelpagina in de bewerkmodus.<\/figcaption><\/figure><\/li>\n<li>Gebruik dezelfde stappen als eerder om een blok toe te voegen en voeg het blok <strong>Product Search <\/strong>toe. Pas geen configuraties toe.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/product-search-block.png\" alt=\"De blokselectie met de optie Product Search geselecteerd\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Het blok Product Search toevoegen.<\/figcaption><\/figure><\/li>\n<li>Voeg het blok <b>Product Categories List <\/b>toe.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/products-categories.png\" alt=\"De blokselectie met de optie List Product Categories geselecteerd\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Het blok Product Category List toevoegen.<\/figcaption><\/figure>\n<p>Stel in de blokinstellingen de <strong>DISPLAY STYLE <\/strong>in op <strong>Dropdown<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/product-categories-drop-down.png\" alt=\"Het editordeelvenster van de lijst met Product Categories List bevat een schakeloptie voor de weergavestijl van het blok, ingesteld op dropdown\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De instellingen van het blok Product Categories Lis aanpassen.<\/figcaption><\/figure><\/li>\n<li>Voeg vervolgens het blok <strong>Filter by Price <\/strong>toe. Configureer niets voor dit blok.<\/li>\n<li>Voeg het blok <strong>Featured Product <\/strong>toe en selecteer het product dat moet worden weergegeven. Pas dezelfde instellingen toe als voor het blok Featured Product dat je eerder hebt gemaakt.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/featured-product-shop-page.png\" alt=\"De Shop pagina toont het uitgelichte product met enkele instellingen voor het uitgelichte product.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De Shop pagina toont het uitgelichte product met enkele instellingen voor het uitgelichte product.<\/figcaption><\/figure><\/li>\n<li>Voeg het blok <strong>All Products <\/strong>toe.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/product-grid-shop-page.png\" alt=\"Het blok All Product wordt gebruikt om een productraster toe te voegen aan de winkelpagina\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Het blok Alle Products toevoegen.<\/figcaption><\/figure>\n<p>Zet voor de instellingen van dit blok de waarden <strong>COLUMNS <\/strong>en <strong>ROWS<\/strong> op 2 en deselecteer de <strong>Show Sorting Dropdown.<\/strong><\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/set-all-products-block.png\" alt=\"Pas instellingen toe op het blok Alle Products om de weergave te wijzigen\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">De instellingen van het blok All Products aanpassen.<\/figcaption><\/figure><\/li>\n<li>Publiceer de pagina en bekijk de resultaten.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/preview-shop-page.png\" alt=\"Voorbeeld van winkelpagina na toevoegen van alle WooCommerce blokken\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Een voorbeeld van de winkelpagina.<\/figcaption><\/figure>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/shop-page-view.png\" alt=\"Op de winkelpagina staan de producten in een raster van 2 bij 2. Onder elk item staat een knop om toe te voegen aan het winkelwagentje of om de producten te bekijken\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Een voorbeeld van de Shop pagina.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>De prestaties van blokken controleren en analyseren<\/h2>\n<p>Kinsta beschikt over een aantal tools voor het monitoren en analyseren van de prestaties van pagina&#8217;s die WooCommerce Blocks gebruiken.<\/p>\n<h3>De APM tool van Kinsta<\/h3>\n<p>Met Kinsta&#8217;s <a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/wordpress-monitoring\/apm-tool\/\">Application Performance Monitoring (APM) tool<\/a> kun je de prestaties van pagina&#8217;s met WooCommerce blokken controleren. Het legt informatie met tijdstempel vast over PHP processen, MySQL database queries en andere cruciale statistieken, zodat je WooCommerce gefaciliteerde transacties kunt tracken en analyseren.<\/p>\n<p>Je kunt bijvoorbeeld de duur en frequentie van interacties en mogelijke knelpunten van deze pagina&#8217;s analyseren. Met deze informatie kun je nauwkeurig problemen oplossen en de prestaties optimaliseren.<\/p>\n<h3>De Analytics tool van Kinsta<\/h3>\n<p>Het evalueren van de impact van WooCommerce blokken op de betrokkenheid van gebruikers en de verkoop vereist een veelzijdige aanpak. De uitgebreide analyticstools van Kinsta spelen hierbij een cruciale rol. Door gebruik te maken van de WordPress analysefuncties binnen het MyKinsta dashboard krijg je waardevolle inzichten in verschillende prestatiecijfers die een directe invloed hebben op de gebruikerservaring &#8211; en dus op de sales.<\/p>\n<ul>\n<li>De <strong>Resources<\/strong> sectie van het MyKinsta dashboard houdt het totale aantal bezoeken, schijfruimte en bandbreedtegebruik van je site bij. Het geeft een kwantitatief overzicht van het verkeer op je site en het gebruik van bronnen.<\/li>\n<\/ul>\n<ul>\n<li>Het onderdeel <strong>Prestaties<\/strong> bevat statistieken zoals de gemiddelde reactietijd van PHP + MySQL en AJAX-gebruik. Deze statistieken helpen je om de responsiviteit en interactiviteit van de pagina&#8217;s met WooCommerce blokken bij te houden.<\/li>\n<\/ul>\n<ul>\n<li>Het gedeelte <b>Responses <\/b>biedt uitsplitsingen van responscodes en foutenanalyses, zodat je de interacties van gebruikers en mogelijke obstakels die ze kunnen tegenkomen beter kunt begrijpen.<\/li>\n<\/ul>\n<ul>\n<li>In het gedeelte <strong>Geo &#038; IP<\/strong> kun je het gebruik van het content delivery network (CDN), de cache-effici\u00ebntie en geografische inzichten bijhouden. Deze informatie helpt je om je site te verfijnen op basis van gebruikersgedrag, locatie en prestatiegegevens.<\/li>\n<\/ul>\n<p>Door deze analyses nauwlettend in de gaten te houden, kun je mogelijke knelpunten identificeren en je pagina&#8217;s met WooCommerce blokken optimaliseren voor een naadloze, aantrekkelijke gebruikerservaring.<\/p>\n<p>Je kunt onze ultieme gids over <a href=\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-sneller-maken\/\">18 krachtige manieren om je WooCommerce winkel<\/a> te versnellen lezen voor meer tips. Snelheid is cruciaal voor online winkels, want traag ladende sites leiden tot frustratie bij gebruikers en gemiste sales.<\/p>\n<h2>Samenvatting<\/h2>\n<p>In deze gids zijn de mogelijkheden van WooCommerce blokken onderzocht, van het toevoegen van productroosters en uitgelichte producten tot het implementeren van krachtige filterblokken. Ook het belang van de vakken voor het winkelwagentje en de kassa, cruciale elementen om klanten door een naadloze winkelervaring te leiden, is besproken.<\/p>\n<p>Het strategisch combineren van verschillende WooCommerce blokken zorgt voor een intu\u00eftieve en visueel aantrekkelijke lay-out. Het proces omvat een zorgvuldige selectie, configuratie en indeling van blokken om tegemoet te komen aan specifieke functionaliteiten en voorkeuren van klanten.<\/p>\n<p>Kiezen voor Kinsta&#8217;s <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/\">WordPress Hosting<\/a> dienst verbetert de prestaties en betrouwbaarheid van je WooCommerce sites aanzienlijk. Met geoptimaliseerde serverconfiguraties, robuuste beveiligingsmaatregelen en naadloze schaalbaarheid zorgt Kinsta ervoor dat je online winkel optimaal functioneert.<\/p>\n<p>Of je nu WooCommerce blokken gebruikt voor productweergaven, filters of winkelwagenfunctionaliteiten, de hostinginfrastructuur van Kinsta biedt de snelheid en stabiliteit die nodig zijn om je klanten een uitzonderlijke winkelervaring te bieden.<\/p>\n<p><em>Heb je ervaring met het gebruik van WooCommerce blokken? Zo ja, welk blok is je favoriet en welk nieuw blok zou je graag toegevoegd zien? Deel je gedachten in de commentsectie.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Met de WooCommerce Blocks plugin kun je aangepaste winkelpagina&#8217;s maken, je producten onder de aandacht brengen en geavanceerde e-commerce functionaliteiten toevoegen zoals filteren en zoeken &#8211; &#8230;<\/p>\n","protected":false},"author":287,"featured_media":57775,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[889,893,892],"class_list":["post-57774","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-woocommerce","topic-wordpress-e-commerce","topic-wordpress-ontwikkeling"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer hoe je je eigen winkelpagina&#039;s kunt maken, producten kunt laten zien en geavanceerde e-commercefuncties zoals filteren kunt toevoegen aan je e-commercesite.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je je eigen winkelpagina&#039;s kunt maken, producten kunt laten zien en geavanceerde e-commercefuncties zoals filteren kunt toevoegen aan je e-commercesite.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-23T13:31:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-26T08:19:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer hoe je je eigen winkelpagina&#039;s kunt maken, producten kunt laten zien en geavanceerde e-commercefuncties zoals filteren kunt toevoegen aan je e-commercesite.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site\",\"datePublished\":\"2024-01-23T13:31:22+00:00\",\"dateModified\":\"2024-01-26T08:19:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/\"},\"wordCount\":2642,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/\",\"name\":\"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"datePublished\":\"2024-01-23T13:31:22+00:00\",\"dateModified\":\"2024-01-26T08:19:20+00:00\",\"description\":\"Leer hoe je je eigen winkelpagina's kunt maken, producten kunt laten zien en geavanceerde e-commercefuncties zoals filteren kunt toevoegen aan je e-commercesite.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/woocommerce\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site - Kinsta\u00ae","description":"Leer hoe je je eigen winkelpagina's kunt maken, producten kunt laten zien en geavanceerde e-commercefuncties zoals filteren kunt toevoegen aan je e-commercesite.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/","og_locale":"nl_NL","og_type":"article","og_title":"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site","og_description":"Leer hoe je je eigen winkelpagina's kunt maken, producten kunt laten zien en geavanceerde e-commercefuncties zoals filteren kunt toevoegen aan je e-commercesite.","og_url":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-01-23T13:31:22+00:00","article_modified_time":"2024-01-26T08:19:20+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Leer hoe je je eigen winkelpagina's kunt maken, producten kunt laten zien en geavanceerde e-commercefuncties zoals filteren kunt toevoegen aan je e-commercesite.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"16 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site","datePublished":"2024-01-23T13:31:22+00:00","dateModified":"2024-01-26T08:19:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/"},"wordCount":2642,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/","url":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/","name":"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg","datePublished":"2024-01-23T13:31:22+00:00","dateModified":"2024-01-26T08:19:20+00:00","description":"Leer hoe je je eigen winkelpagina's kunt maken, producten kunt laten zien en geavanceerde e-commercefuncties zoals filteren kunt toevoegen aan je e-commercesite.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/01\/woocommerce-blocks-tutorial.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/woocommerce-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"WooCommerce Blocks: Zo voeg je WooCommerce mogelijkheden toe aan je WordPress site"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/57774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=57774"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/57774\/revisions"}],"predecessor-version":[{"id":57844,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/57774\/revisions\/57844"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/57774\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/57775"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=57774"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=57774"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=57774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}