Complete gids WooCommerce-blok

WooCommerce is een van de populaire plugins voor het bouwen van e-commerce sites op WordPress. WooCommerce Blocks is een van de plugins in WooCommerce, ontworpen om het voor gebruikers gemakkelijker te maken online winkels op WordPress te creëren. WooCommerce Blocks helpt bij het maken van gepersonaliseerde winkelpagina's, het weergeven van je producten en het toevoegen van geavanceerde e-commerce functies zoals productfiltering en zoeken – allemaal zonder een enkele regel code te schrijven. 

U moet de WordPress WooCommerce Blocks-plugin installeren om deze nieuwe blokken te gebruiken. Deze plugin is een testomgeving voor experimentele functies die aan de kern van WooCommerce kunnen worden toegevoegd.

In deze praktische gids bespreken we de functies van WooCommerce-blokken en hoe je ze kunt aanpassen. 

Wat is WooCommerce Block?

WooCommerce Blocks zijn een verzameling blokken die zijn geïntegreerd met de WordPress-blokeditor (Gutenberg) waarmee je eenvoudig diverse WooCommerce-functies en -functionaliteiten aan je pagina's en berichten kunt toevoegen. Zonder code te schrijven, stellen deze blokken je in staat om producten, productcategorieën, zoekfilters, winkelwagens, afrekenen en meer te tonen.

In eenvoudiger bewoordingen: WooCommerce Blocks zijn vooraf gebouwde componenten die je met de blokeditor in je WordPress-site kunt invoegen. Ze bieden een eenvoudige manier om e-commercefunctionaliteit toe te voegen die door WooCommerce wordt ondersteund. Dit maakt deel uit van de kern-WooCommerce-plugin, dus je krijgt ze automatisch wanneer je WooCommerce op je WordPress-site installeert en activeert.

Bovendien integreren ze naadloos met de WordPress-blokeditor, waardoor je aangepaste productpagina's, categorielay-outs en winkelervaringen kunt bouwen met een vertrouwde drag-and-drop-interface.ext here ...

Lijst met functies van WooCommerce Block

Na te hebben begrepen wat een WooCommerce-blok is, bespreken we vervolgens elke functie één voor één:

• Alle producten: Toont alle winkelproducten in een rasterindeling.
• Actieve productfilters: Geeft actieve productfilters weer als een lijst of als chips (vergelijkbaar met knoppen).
• Alle beoordelingen: Toont alle productbeoordelingen.
• Best verkochte product: Toont best verkochte producten in een rasterindeling.
• Afrekenen: Toont een formulier waarmee klanten hun bestellingen kunnen voltooien.
• Winkelwagen: Geeft de winkelwagen weer.
• Uitgelichte categorie: Markeert specifieke productcategorieën samen met call-to-action-knoppen.
• Uitgelicht product: Toont geselecteerde uitgelichte producten.
• Filter op prijs: Toont een prijsbereik waarmee klanten producten kunnen filteren. Je kunt ook een bewerkbaar prijsbereik inschakelen door hier op een knop of tekst te klikken.
• Filteren op voorraad: Maakt het mogelijk om producten te filteren op basis van de voorraadstatus. Deze functie biedt opties om producten weer te geven die op voorraad zijn, niet op voorraad zijn of worden nabesteld.
• Filteren op beoordeling: Hiermee kunnen klanten producten filteren op basis van beoordelingen.
• Filteren op attribuut: Filtert producten op basis van maat of kleur.
• Handmatig geselecteerde producten: Geeft handmatig geselecteerde producten weer in een rasterindeling, zodat je kunt kiezen welke producten je specifiek wilt weergeven.
• Mini winkelwagen: Geeft een beknopt overzicht van de winkelwagen.
• Nieuwste producten: Toont de meest recente producten in een rasterindeling. Ze kunnen worden aangepast door elementen zoals titel, prijs, beoordeling en koopknop toe te voegen/te verwijderen.
• Product in de aanbieding: Toont producten die momenteel in de aanbieding zijn in een rasterindeling en kan worden aangepast door elementen zoals titel, prijs, beoordeling en koopknop toe te voegen of te verwijderen.
• Productzoekopdracht: Voegt een zoekbalk toe om klanten te helpen bij het zoeken naar producten.
• Product op tag: Geeft producten met specifieke tags/labels weer in een rasterindeling.
• Product op attribuut: Toont producten met specifieke attributen (kleur, maat, enz.) in een rasterindeling.
• Product op categorie: Toont producten op basis van categorieën in een rasterindeling.
• Beoordeling per product: Toont beoordelingen gegroepeerd per product.
• Beoordeling per categorie: Toont productbeoordelingen uit specifieke categorieën.
• Enkel product: Geeft een gedetailleerde weergave voor één product weer.
• Best beoordeelde producten: Toont producten met de hoogste beoordelingen in een rasterindeling.

Hoe u het productgridblok in WooCommerce gebruikt

Naast het leren kennen van de functies die beschikbaar zijn in WooCommerce-blokken, gaan we proberen een productraster in WooCommerce te gebruiken of toe te voegen. Zorg ervoor dat je de WooCommerce Blocks-plugin op je website hebt geïnstalleerd. Zo voeg je het toe:

1. Open de pagina of het bericht waar je het productraster wilt weergeven en voer vervolgens de titel "Product" in.

2. Klik in de linkernavigatie op de knop (+) > scroll naar beneden naar de sectie WooCommerce > selecteer "product grid".

3. Ga vervolgens naar het rechterpaneel om het blok te configureren.

In dit paneel kunt u verschillende zaken aanpassen, waaronder:

• Layout-instellingen: Je kunt het aantal rijen en kolommen in het productraster aanpassen. Stel ze bijvoorbeeld beide in op 2 voor een gebalanceerde weergave.
• Contentinstellingen: Je kunt een dropdownmenu weergeven om producten te sorteren. Met deze functie kunnen klanten producten sorteren op basis van hun voorkeuren. Je kunt het uitschakelen als het niet nodig is.
• Geavanceerde styling: U kunt CSS-klassen toevoegen om het uiterlijk aan te passen.

Hoe voeg je uitgelichte producten toe aan je pagina

Met het blok Uitgelicht product kunt u specifieke producten op uw pagina of bericht tonen. Met dit blok kunt u producten selecteren, hun uiterlijk aanpassen en ze in uw content plaatsen om bezoekers te trekken naar de items die u wilt promoten.

Volg deze stappen om het blok Uitgelicht product toe te voegen:

1. Open de pagina of het bericht waar je het wilt toevoegen. Als je het bijvoorbeeld boven het productraster plaatst, maak dan ruimte in dat gebied en klik op de "+"-knop die verschijnt.

2. Selecteer de "+"-knop op de werkbalk van het blok om de blokkenlijst te openen, zoek vervolgens naar "Uitgelicht product" en selecteer dit.

3. Kies de producten die je wilt uitlichten en klik vervolgens op "Gereed".
4. Om het uiterlijk van het blok aan te passen, klik je op "Instellingen". In het instellingenpaneel kun je verschillende dingen aanpassen, waaronder:

• Productbeschrijving en prijs tonen of verbergen.
• Configureer de weergave van media (afbeelding en video).
• Voeg alternatieve tekst toe voor productafbeeldingen.
• Selecteer de overlaykleur van het blok.
• Pas de dekking van het blok aan.

5. Na het aanpassen kun je de pagina publiceren of bijwerken om de weergave van je uitgelichte productblok te zien.

Filterblokken toevoegen in WooCommerce

Het WooCommerce-filterblok maakt het voor klanten gemakkelijk om producten te vinden die aan hun zoekcriteria voldoen. Door filteropties te bieden, kunnen klanten de zoekresultaten snel beperken tot producten die voor hen relevant zijn.

Volg deze stappen om het filterblok toe te voegen:

1. Open de pagina of het bericht waar u het filterblok wilt plaatsen.
2. Bepaal de gewenste locatie voor het filterblok.
3. Klik op de werkbalk van de blokeditor op de knop "+" en zoek naar WooCommerce-filteropties zoals Prijsfilter, Voorraadfilter, Attribuutfilter en Beoordelingsfilter.

Laten we nu elk beschikbaar filtertype bespreken. 

Filter op prijs toevoegen

Met het Price Filter Product Block kun je een filterfunctie toevoegen waarmee gebruikers het gewenste prijsbereik kunnen selecteren. Het prijsbereik kan worden weergegeven als bewerkbare knoppen of als gewone tekst. Je kunt indien gewenst knoppen toevoegen en het kopniveau ervan aanpassen.

Filter op eigenschap toevoegen

Het Product Attribute Filter Block stelt gebruikers in staat om producten te filteren op basis van attributen zoals kleur en maat. U kunt de attributen die u wilt gebruiken kiezen uit de beschikbare lijst. De weergave kan de vorm hebben van een lijst of een dropdownmenu. U kunt ook het querytype configureren als AND of OR. Andere functies zijn het weergeven van het aantal producten, het selecteren van het kopniveau, het toevoegen van knoppen en het kiezen van het filter.

Filter op voorraad toevoegen

Met het blok Voorraadstatus-productfilter kunnen gebruikers producten weergeven op basis van hun beschikbaarheidsstatus. Ze kunnen beschikbare producten (op voorraad), niet op voorraad (out of stock) of in backorder weergeven. Je kunt het ook configureren om het aantal producten weer te geven, het kopniveau te selecteren en knoppen toe te voegen. Dit blok kan worden gebruikt met andere WooCommerce-blokken, zoals Alle producten. Helaas biedt dit blok geen voorbeeldweergave wanneer het aan de pagina wordt toegevoegd.

Winkelwagen- en afrekenblokken

Het winkelwagenblok voegt een weergave van de winkelwagen toe aan je pagina. Je kunt een verzendkostenberekening opnemen, een link voor de afrekenknop selecteren en een donkere modus instellen. Dit blok biedt ook een melding waarmee je de pagina als standaard winkelwagenpagina kunt instellen in de WooCommerce-instellingen. Er is ook een link opgenomen om feedback te geven.

Ondertussen biedt het afrekenblok een afrekenformulier voor je winkelwagen. Je wordt geïnformeerd dat deze pagina kan worden ingesteld als de standaard afrekenpagina in de WooCommerce-instellingen. Er is ook een optie voor weergave in donkere modus. Dit blok bestaat uit verschillende elementen die je afzonderlijk kunt aanpassen. Helaas biedt dit blok geen voorbeeld zodra het aan de pagina is toegevoegd.

Hoe u de winkelpagina op WooCommerce aanpast

Nadat je hebt geleerd hoe je verschillende WooCommerce Blocks gebruikt, kun je er meerdere combineren om een gebruiksvriendelijke aangepaste winkelpagina te maken. Volg deze stappen om deze specifieke lay-out van de winkelpagina te bouwen.

1. Maak een nieuwe pagina en noem deze "Shop".

2. Voeg het Productzoekblok toe.

3. Voeg het blok Productcategorieënlijst toe

Stel vervolgens de weergavestijl in op de vervolgkeuzelijst.

4. Voeg het blok Prijsfilter toe.
5. Voeg het blok Uitgelichte producten toe en selecteer de producten die je wilt uitlichten. Configureer indien nodig.

6. Voeg het blok Alle producten toe.

Stel het aantal kolommen en rijen in op 2 en schakel de sorteerdropdown-optie uit.

7. Publiceer ten slotte de pagina om de uiteindelijke lay-out van de winkelpagina die je hebt gemaakt te bekijken.

Bouw je online winkel met WooCommerce Block & verkoop je product

Nadat je met succes een aangepaste winkelpagina met WooCommerce Blocks hebt gemaakt, kun je nu beginnen met het verkopen van je fysieke en digitale producten. Vooral voor digitale producten is het cruciaal om een bestandsdownloadplugin zoals WP File Download Addon toe te voegen.

Deze plugin stelt je in staat om digitale downloadproducten te verkopen in WooCommerce. WP File Download Addon maakt het beheren van bestanden en bestandscategorieën voor WooCommerce digitale producten eenvoudig. Je kunt snel veel digitale downloadproducten aanmaken die aan één of meerdere bestanden zijn gekoppeld.

Daarnaast integreert deze plugin met Dropbox, Google Drive, Microsoft OneDriveen de Social Locker -functie. Je kunt bestanden van deze cloudservices aanbieden als WooCommerce digitale downloads met sterk beperkte toegang via cloud-API-connectors.

Met de WP File Download Addon is het verkopen van digitale producten in je WooCommerce-webshop toegankelijker en efficiënter geworden. Nadat je je winkel met WooCommerce Blocks hebt opgebouwd, vormt deze plugin een perfecte aanvulling op het verkopen van je digitale content.

Conclusie

WooCommerce Blocks is een plugin waarmee je een complete online winkel in WordPress kunt bouwen zonder code te schrijven. Met diverse blokken, zoals productrasters, filters en uitgelichte productweergaven, kun je eenvoudig een aantrekkelijke en gebruiksvriendelijke winkelervaring creëren. De vertrouwde drag-and-drop-interface maakt het ontwikkelen van een online winkel sneller en efficiënter.

Na het bouwen van je online winkel is de volgende stap het verkopen van fysieke en digitale producten. Je kunt de WP File Download Addon-plugin gebruiken om digitale producten met WooCommerce te verkopen, zoals ebooks, software of multimedia-inhoud.

WP File Download Addon is beschikbaar vanaf $49 per jaar en wordt gebruikt door meer dan 60.000 leden. Dus, waar wacht je nog op? Sluit je bij ons aan voor betere digitale productverkopen!