Home / WooCommerce / WooCommerce Blocks voor Gutenberg

WooCommerce Blocks voor Gutenberg

WooCommerce blocks plugin voor Gutenberg blokken

WooCommerce blocks is een ‘feature plugin’. Dit houdt in dat het uiteindelijk in de WooCommerce plugin zelf verwerkt zou kunnen worden. Het moet alleen nog goed getest worden.

Met deze plugin krijg je diverse blokken die je kunt gebruiken in de Gutenberg editor in WordPress, die sinds versie 5.0 de nieuwe standaard editor is geworden.

In dit artikel laat ik je zien welke blokken je allemaal krijgt en hoe je het precies kunt inzetten op de pagina’s van jouw webshop.

WooCommerce blocks plugin

Door de plugin WooCommerce Blocks te installeren en activeren op jouw webshop, kun je op een eenvoudige en flexibele manier producten tonen in berichten en pagina’s.

Video: WooCommerce blokken voor Gutenberg

Vind je het fijn om over mijn schouder mee te kijken hoe de WooCommerce blokken voor Gutenberg werken en wat de mogelijkheden zijn? Bekijk dan zeker de onderstaande video.

Abonneer je op mijn YouTube kanaal

Als je het prettiger vindt om de uitleg in tekstvorm te lezen of alles gewoon op je gemak te bekijken, dan kun je hieronder verder gaan met de tekstuitleg.

De verschillende WooCommerce blokken

Zodra de plugin actief is op jouw webshop, kun je in de Gutenberg editor gebruikmaken van diverse WooCommerce blokken. Al deze blokken kun je vinden onder het kopje “WooCommerce”.

Zoals je hierboven kunt zien gaat het om 8 verschillende blokken, namelijk:

  • Hand-picked Products (zelf gekozen producten)
  • Best Selling Products (best verkopende producten)
  • Product by Category (producten per categorie)
  • Newest Products (nieuwste producten)
  • On Sale Products (producten in de aanbieding)
  • Top Rated Products (best beoordeelde producten)
  • Products by Attribute (producten per attribuut)
  • Featured Product (uitgelichte producten)

Hand-picked Products (zelf gekozen producten)

Gutenberg WooCommerce Hand-picked Products

Met Hand-picked products kun je zelf producten uitkiezen om weer te geven. Je kunt zoals je hierboven kunt zien de producten zoeken in het blok zelf, maar ook in de rechterkolom.

Verder kun je ook aangeven hoeveel kolommen je oprij wilt hebben staan, kun je de producten sorteren op nieuwheid, prijs, beoordeling, verkopen, naam of menu-volgorde.

Hand-picked Products preview in Gutenberg

Best Selling Products (best verkopende producten)

Best selling products blok van de plugin WooCommerce blocks

Bij het blok “Best Selling Products” heb je niet de mogelijkheid om dingen uit te kiezen. Het is echter wel mogelijk om een aantal aanpassingen te doen.

Je kunt kiezen hoeveel kolommen je naast elkaar wilt hebben staan, hoeveel rijen je onder elkaar wilt hebben en daarnaast kun je ook nog filteren op categorie.

Product by Category (producten per categorie)

Products by Category blok voor in de Gutenberg editor

Met het blok “Products by Category” kun je producten van een of meerdere geselecteerde categorieën tonen in een bericht of pagina. Het enige wat je hoeft te doen is de categorieën selecteren en vervolgens aangeven of de producten in alle geselecteerde categorieën moeten zitten of dat het in een van de categorieën moet zitten.

Verder kun je aan de rechterzijde aangeven hoeveel kolommen en rijen je wilt hebben en in welke volgorde de producten getoond moeten worden.

Newest Products (nieuwste producten)

Nieuwste producten blok in de plugin WooCommerce blocks

Het blok “Newest Products” heeft niet veel opties. Zodra je dit blok toevoegt, zal je automatisch de nieuwste producten zien. Het enige wat je kunt aanpassen, is hoeveel kolommen en rijen je hebt en of je het wilt filteren per product categorie.

On Sale Products (producten in de aanbieding)

On sale products blok

Met het blok “On Sale Products” worden alle producten getoond die in de aanbieding zijn. Voor de layout heb je wederom de opties om aan te geven hoeveel kolommen en rijen er moeten zijn. Verder is er ook een product categorie filter en kun je aangeven hoe de producten gesorteerd moeten worden.

Top Rated Products (best beoordeelde producten)

Best beoordeelde producten blok

Wanneer je de best beoordeelde producten van jouw webshop wilt tonen in een artikel, dan kun je het blok “Top Rated Products” gebruiken.

Dit blok zal automatisch de best beoordeelde producten tonen. Het aantal producten is afhankelijk van hoeveel kolommen en rijen je hebt ingesteld. Wil je alleen producten van een bepaalde categorie tonen, dan is dit ook gewoon te filteren met de product categorie filter

Products by Attribute (producten per attribuut)

Producten blok gebaseerd op attributen

Schrijf je een artikel over producten die allemaal een bepaald attribuut hebben in je webshop? Met het blok “Products by Attribute” kun je alle producten met een bepaald attribuut in je artikel krijgen. De attributen worden overigens gemaakt aan de hand van producteigenschappen in WooCommerce.

Verder is het aan de zijkant ook weer mogelijk om te de hoeveelheid kolommen en rijen aan te geven, kun je ook hier attributen selecteren en kun je aangeven hoe de producten gesorteerd moeten worden

Featured Product (uitgelicht product)

Featured product blok in WooCommerce blocks

Met het blok “Featured Product” kun je een enkel product selecteren om goed uit te lichten in een bericht of pagina. Het enige wat je hoeft te doen is het product te zoeken en te selecteren, waarna je eventueel de nodige aanpassingen kunt doen.

Zoals je hierboven wellicht al ziet heeft dit blok de meeste aanpasmogelijkheden als je het vergelijkt met de andere blokken.

Bovenaan het blok kun je aangeven hoe je de tekst wilt uitlijnen en kun je eventueel de productafbeelding aanpassen. Als je op het “Shop now” gedeelte klikt, krijg je ook de mogelijkheid om aan te geven hoe de knop uitgelijnd moet worden en kun je een stijl voor het blok uitkiezen.

Aan de rechterzijde kun je onder het kopje “Content” aangeven of je de korte productomschrijving en prijs wilt laten zien. Bij “Overlay” heb je de mogelijkheid om de overlay kleur aan te passen en de achtergrond doorzichtigheid.

Conclusie over WooCommerce Blocks

De extra blokken die je dankzij de plugin WooCommerce Blocks krijgt, zijn perfect geschikt om bijvoorbeeld toe te voegen aan artikelen over bepaalde producten, maar ook op verkooppagina’s.

Het mooie is dat alle blokken eenvoudig te gebruiken en in te stellen zijn. Het is dan ook een handige toevoeging aan Gutenberg wanneer je een webshop hebt.

Verder is het naar mijn mening een uitstekende vervanging voor de standaard WooCommerce shortcodes waar je al jarenlang gebruik van kon maken. Met deze blokken zie je tenminste direct wat het precies doet en hoef je geen gekke codes te gebruiken om bepaalde dingen te bereiken.

Het aanpassen van het aantal kolommen en rijen zijn super eenvoudig aan te passen, de filters werkens uitstekend en mocht je nog meer willen aanpassen, zou je altijd nog de extra CSS class optie kunnen gebruiken.


WordPress Hulp Nodig? Join Het WP Lab

Het WordPress Lab Mockup

Heb je vragen aan de hand van dit artikel of wil je verder op weg geholpen worden met je website?

Sluit je aan bij Het WordPress lab, een community voor WordPress-liefhebbers waarin ik antwoord geef op jouw WordPress vragen en je toegang krijgt tot al mijn WordPress cursussen.

«
»

6 reacties op “WooCommerce Blocks voor Gutenberg”

  1. Nathalie Nijland avatar

    Kan je de Producten by Category ok de mobiele pagina ook in rijen en kolommen verdelen? IK kan het niet anders krijgen dan maar 1 product per keer en ik wil graag 2 producten naast elkaar laten zien.

    1. Maikel van de Weerd avatar

      Ja, dit is mogelijk alleen dan zal je wel de CSS code moeten wijzigen. Het kan helaas op dit moment nog niet gewijzigd worden via de blokinstellingen.

  2. Rutger avatar
    Rutger

    Kan je ook een template bouwen met woocommerce blocks die bv geldt voor alle product pagina s?

    1. Maikel van de Weerd avatar

      Nee, je kunt helaas op dit moment (wellicht in de toekomst) geen standaard product template maken met WooCommerce blokken.

  3. Jerka avatar
    Jerka

    Hallo! Ik wil graag het zelf gekozen producten blok gebruiken. Ik kan dit toevoegen en verschijnen dan een paar random producten. Echter wanneer ik deze producten probeer te veranderen krijg ik telkens de melding “Er heeft zich een kritieke fout voorgedaan op deze site.” Mijn volledige website werkt wel gewoon, alleen wanneer ik deze producten probeer te veranderen lukt het gewoon niet. Wat zou hier een oplossing voor kunnen zijn?

    1. Maikel van de Weerd avatar

      Kan ik vanaf hier niet zeggen zonder de foutmelding te weten.