[ad_1]
Met de WooCommerce Blocks plugin kun je aangepaste winkelpagina’s maken, je producten onder de aandacht brengen en geavanceerde e-commerce functionaliteiten toevoegen zoals filteren en zoeken – en dat alles zonder ook maar één regel code te schrijven.
Veel blokken worden standaard meegeleverd met WooCommerce, maar een aantal nieuwe niet. Je kunt deze nieuwe blokken gebruiken in je WooCommerce winkel door de WooCommerce Blocks WordPress plugin te installeren. Deze plugin is een speeltuin met experimentele features en mogelijke toekomstige toevoegingen aan de core van de WooCommerce blokken.
WooCommerce Blocks integreren in WordPress is eenvoudig met Kinsta, waar je WooCommerce tijdens het installatieproces kunt opnemen door een vakje aan te vinken. Deze integratie maakt het mogelijk om snel en moeiteloos een online winkel te bouwen.
Deze praktische handleiding helpt je bij het toevoegen van WooCommerce mogelijkheden aan je WordPress site met behulp van WooCommerce Blocks.
Vereisten
Om deze gids te kunnen volgen, moet je ervoor zorgen dat je:
Als je nog geen WordPress site hebt, kun je een WordPress site opzetten met het dashboard van Kinsta of via DevKinsta lokaal. Zodra je je site hebt, importeer je deze voorbeeldproducten voor je WooCommerce winkel.
WooCommerce Blocks
De standaard Block Editor van WordPress, geïntroduceerd met versie 5.0, is de Gutenberg Editor. 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.
WooCommerce Blocks integreert naadloos met de intuïtieve drag-and-drop interface van de Gutenberg Editor en biedt een set speciale blokken die zijn ontworpen voor productweergave, winkelwagenbeheer, afrekenprocessen en meer.
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.
Om WooCommerce Blocks te gebruiken, begin je met het openen of maken van een pagina of bericht. Klik op de + knop in de bovenste balk om alle blokken te bekijken en navigeer dan naar de WOOCOMMERCE sectie. Hier vind je een kort overzicht van de verschillende blokken:
- Product Search – Voegt een zoekbalk toe om snel producten voor klanten te zoeken.
- All Products – Toont alle winkelproducten in een raster.
- All Reviews – Geeft een overzicht van alle productbeoordelingen.
- Classic Checkout – Geeft de klassieke kassa shortcode weer.
- Classic Cart – Geeft de klassieke shortcode voor de winkelwagen weer.
- Customer Account – Maakt inloggen en uitloggen van klanten mogelijk.
- Featured Category – Markeert een productcategorie en een call-to-action (CTA) om snelle reacties aan te moedigen.
- Featured Product – Markeert een product of variatie en een CTA.
- Active Filters– Geeft de momenteel actieve filters weer.
- Filter by Price – Geeft een prijsbereik weer dat klanten kunnen gebruiken om producten te filteren.
- Filter by Stock – Maakt filteren van producten op voorraadstatus mogelijk.
- Filter by Attribute – Filter producten op basis van attributen zoals grootte of kleur.
- Filter by Rating – Hiermee kunnen klanten de producten filteren op hun beoordeling.
- Hand-Picked Products – Toont een selectie van handgeplukte producten in een raster.
- Mini Cart – Biedt een knop om het winkelwagentje snel te bekijken.
- Store Notices – Geeft klantgerichte meldingen weer die zijn gegenereerd door WooCommerce of andere extensies.
- Best Selling Products – Toont een raster met de best verkopende producten aller tijden van je winkel.
- Products Categories List – Toont alle productcategorieën als een lijst of een dropdown.
- Products by Category – Geeft een overzicht van producten uit de geselecteerde categorieën.
- Product Collection (Beta) – Toont producten uit een aangewezen collectie.
- Newest Products – Geeft de nieuwste producten weer in een raster.
- On Sale Products – Geeft de huidige uitverkoopartikelen weer in een raster.
- Products by Tag – Geeft producten met de geselecteerde tag weer in een raster.
- Top Rated Products – Toont de hoogst gewaardeerde producten in een raster.
- Products by Attribute – Geeft de producten met de geselecteerde attributen weer in een raster.
- Reviews by Category – Geeft de productbeoordelingen weer van gespecificeerde categorieën.
- Reviews by Product – Hiermee worden beoordelingen per product weergegeven.
- Single Product – Laat een enkel product zien.
- Cart – Geeft de winkelwagen weer.
- Checkout – Geeft het formulier weer waarmee klanten een bestelling kunnen plaatsen.
Je weet nu waar elk blok voor staat. Laten we een aantal van deze blokken gebruiken om een e-commerce ervaring te creëren.
Het blok Product Grid gebruiken in WooCommerce
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:
- Navigeer naar de pagina of het bericht waar je de producten wilt weergeven. Geef een titel zoals “Products”
- Klik op de + knop in de bovenste navigatiebalk om alle blokken weer te geven. Scroll naar beneden naar het gedeelte WOOCOMMERCE en selecteer All Products. Deze actie toont je producten in een raster op de pagina.
Het blok All Products van WooCommerce gebruiken om producten in een raster weer te geven. - 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 Settings pictogram (het op een na meest rechtse pictogram op de bovenste navigatiebalk).
Instellingenpaneel om het blok All Products aan te passen. Hier kun je de lay-out, inhoud en styling van het raster aanpassen:
- Layout Settings: Pas het aantal rijen en kolommen aan. Stel beide bijvoorbeeld in op 2 voor een evenwichtig uiterlijk.
- Content Settings: 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.
- Advanced Styling: Indien nodig kun je CSS classes toevoegen voor een meer verfijnde styling.
- 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 Publish. In deze stap kun je de pagina openbaar, privé of met wachtwoordbeveiliging toegankelijk maken, afhankelijk van je voorkeur.
De bijgewerkte Products pagina toont producten in een 2 bij 2 raster en een navigatiebalk.
Een Featured Product blok toevoegen aan je pagina of bericht
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.
Volg deze stappen om een uitgelicht product toe te voegen:
- 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 + knop.
Als 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 Add before of Add after.
Het blok Featured Product toevoegen vóór het blok All Products. - Selecteer de + knop op de bovenste navigatiebalk om alle blokken weer te geven en zoek naar Featured Product.
Selecteer een product als uitgelicht product met het blok Featured Product. - Kies het product dat je wilt weergeven. Klik vervolgens op Ready.
- Om je blok Uitgelicht product een unieke uitstraling te geven, klik je op Settings. In het instellingenpaneel van het blok kun je:
- Beslissen of de productbeschrijving en prijs moeten worden weergegeven.
- Configureren hoe je media (afbeeldingen en video’s) moeten worden weergegeven.
- De alt-tekst voor de productafbeelding opgeven.
- De overlappende kleur van het blok kiezen.
- De ondoorzichtigheid van het blok aanpassen.
De instellingen van het blok Featured Products aanpassen. - 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.
Voorbeeld van de bijgewerkte productenpagina met het item Beanie uitgelicht boven het productraster.
Filter blokken gebruiken in WooCommerce
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.
- Navigeer naar de pagina of bericht waar je de blokken wilt toevoegen. In deze handleiding wordt dezelfde Products pagina gebruikt als in de vorige stappen.
- Kies waar je de filters wilt toevoegen.
- Klik op de knop + in de bovenste navigatiebalk om alle blokken weer te geven. Scroll naar beneden naar het gedeelte WOOCOMMERCE en zie een filteroptie voor prijs, voorraad, kenmerk en beoordeling. Als je bijvoorbeeld Filter by Price kiest.
Het blok Filteren by Price toevoegen
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.
Het blok Filter by Attribute toevoegen
Je kunt ook het blok Filter by Attribute gebruiken.
Je kunt een specifiek kenmerk kiezen, zoals Color , en dan de instellingen dienovereenkomstig configureren. Je kunt bijvoorbeeld Display Product Count inschakelen om het aantal producten te tonen dat in elke kleur beschikbaar is.
Vervolgens kun je de live pagina bekijken en de functionaliteit van de filterknoppen testen.
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.
Winkelwagen- en kassapagina’s
De winkelwagen- en afrekenfuncties van je webwinkel moeten intuïtief 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 het afrekenproces moeiteloos verlopen.
WooCommerce maakt de winkelwagen- en afrekenpagina’s standaard aan met behulp van de juiste blokken. Klanten kunnen producten toevoegen aan hun winkelwagen en deze openen via de navigatiebalk.
Nadat de inhoud van de winkelwagen is bevestigd, kan je klant de knop Continue to checkout selecteren, de benodigde gegevens invullen en zijn bestelling plaatsen.
Een custom Shop pagina maken
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:
- Product Search
- Filter by Price
- Product Categories
- Featured Product
- All Products
Om deze aangepaste winkelindeling te maken, maak je een nieuwe pagina en volg je de onderstaande stappen.
- Voer “Shop” in als titel van de pagina.
De winkelpagina in de bewerkmodus. - Gebruik dezelfde stappen als eerder om een blok toe te voegen en voeg het blok Product Search toe. Pas geen configuraties toe.
Het blok Product Search toevoegen. - Voeg het blok Product Categories List toe.
Het blok Product Category List toevoegen. Stel in de blokinstellingen de DISPLAY STYLE in op Dropdown.
De instellingen van het blok Product Categories Lis aanpassen. - Voeg vervolgens het blok Filter by Price toe. Configureer niets voor dit blok.
- Voeg het blok Featured Product toe en selecteer het product dat moet worden weergegeven. Pas dezelfde instellingen toe als voor het blok Featured Product dat je eerder hebt gemaakt.
De Shop pagina toont het uitgelichte product met enkele instellingen voor het uitgelichte product. - Voeg het blok All Products toe.
Het blok Alle Products toevoegen. Zet voor de instellingen van dit blok de waarden COLUMNS en ROWS op 2 en deselecteer de Show Sorting Dropdown.
De instellingen van het blok All Products aanpassen. - Publiceer de pagina en bekijk de resultaten.
Een voorbeeld van de winkelpagina. 
Een voorbeeld van de Shop pagina.
De prestaties van blokken controleren en analyseren
Kinsta beschikt over een aantal tools voor het monitoren en analyseren van de prestaties van pagina’s die WooCommerce Blocks gebruiken.
De APM tool van Kinsta
Met Kinsta’s Application Performance Monitoring (APM) tool kun je de prestaties van pagina’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.
Je kunt bijvoorbeeld de duur en frequentie van interacties en mogelijke knelpunten van deze pagina’s analyseren. Met deze informatie kun je nauwkeurig problemen oplossen en de prestaties optimaliseren.
De Analytics tool van Kinsta
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 – en dus op de sales.
- De Resources 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.
- Het onderdeel Prestaties bevat statistieken zoals de gemiddelde reactietijd van PHP + MySQL en AJAX-gebruik. Deze statistieken helpen je om de responsiviteit en interactiviteit van de pagina’s met WooCommerce blokken bij te houden.
- Het gedeelte Responses biedt uitsplitsingen van responscodes en foutenanalyses, zodat je de interacties van gebruikers en mogelijke obstakels die ze kunnen tegenkomen beter kunt begrijpen.
- In het gedeelte Geo & IP kun je het gebruik van het content delivery network (CDN), de cache-efficiëntie en geografische inzichten bijhouden. Deze informatie helpt je om je site te verfijnen op basis van gebruikersgedrag, locatie en prestatiegegevens.
Door deze analyses nauwlettend in de gaten te houden, kun je mogelijke knelpunten identificeren en je pagina’s met WooCommerce blokken optimaliseren voor een naadloze, aantrekkelijke gebruikerservaring.
Je kunt onze ultieme gids over 18 krachtige manieren om je WooCommerce winkel te versnellen lezen voor meer tips. Snelheid is cruciaal voor online winkels, want traag ladende sites leiden tot frustratie bij gebruikers en gemiste sales.
Samenvatting
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.
Het strategisch combineren van verschillende WooCommerce blokken zorgt voor een intuïtieve 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.
Kiezen voor Kinsta’s WordPress Hosting 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.
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.
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.
Joel Olawanle
Kinsta
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 200 technical articles majorly around JavaScript and it’s frameworks.
