Volledige handleiding 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 om online winkels te creëren op WordPress. WooCommerce Blocks helpt bij het maken van gepersonaliseerde winkelpagina's, het weergeven van uw 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-plug-in installeren om deze nieuwe blokken te gebruiken. Deze plug-in is een testomgeving voor experimentele functies die kunnen worden toegevoegd aan de kern-WooCommerce.

In deze praktische handleiding bespreken we de functies van WooCommerce-blokken en hoe deze aan te passen. 

Wat is WooCommerce-blok?

WooCommerce-blokken zijn een verzameling blokken die zijn geïntegreerd met de WordPress-blokeditor (Gutenberg) waarmee u eenvoudig verschillende WooCommerce-functies en -functionaliteit aan uw pagina's en berichten kunt toevoegen. Zonder code te schrijven, maken deze blokken het mogelijk om producten, productcategorieën, zoekfilters, winkelwagentjes, afrekeningen en meer weer te geven.

In eenvoudiger bewoordingen, WooCommerce-blokken zijn vooraf gebouwde componenten die u in uw WordPress-site kunt invoegen met behulp van de blokeditor, wat een gemakkelijke manier biedt om e-commercefunctionaliteit mogelijk te maken, aangedreven door WooCommerce. Dit maakt deel uit van de kern van de WooCommerce-plugin, dus u krijgt ze automatisch wanneer u WooCommerce op uw WordPress-site installeert en activeert.

Bovendien integreren ze naadloos met de WordPress-blokeditor, waardoor u aangepaste productpagina's, categorielay-outs en winkelervaringen kunt maken met behulp van een vertrouwde drag-and-drop-interface.ext hier ...

Lijst met functies van WooCommerce-blok

Na het begrijpen van wat een WooCommerce-blok is, zullen we vervolgens elk aangeboden kenmerk één voor één bespreken:

• Alle producten: Toont alle winkelproducten in een rasterformaat.
• Actieve productfilters: Toont actieve productfilters in lijstvorm of als chips (vergelijkbaar met knoppen).
• Alle beoordelingen: Toont alle productbeoordelingen.
• Best verkochte product: Toont best verkochte producten in een rasterformaat.
• Afrekenen: Toont een formulier waarmee klanten hun bestellingen kunnen voltooien.
• Winkelwagen: Toont de winkelwagen.
• Uitgelichte categorie: Accentueert specifieke productcategorieën samen met call-to-action-knoppen.
• Aanbevolen product: Toont geselecteerde aanbevolen producten.
• Filter op prijs: Toont een prijsklasse waarin klanten producten kunnen filteren. U kunt ook een bewerkbaar prijsbereik inschakelen door hier op een knop of tekst te klikken.
• Filteren op voorraad: Hiermee kunt u producten filteren op basis van de voorraadstatus. Deze functie biedt opties om producten weer te geven die op voorraad zijn, niet op voorraad zijn of opnieuw worden besteld.
• Filteren op beoordeling: Stelt klanten in staat om producten te filteren op basis van beoordelingen.
• Filter op attribuut: Filtert producten op basis van grootte of kleur.
• Handmatig geselecteerde producten: Toont handmatig geselecteerde producten in een rasterformaat, zodat u kunt kiezen welke producten specifiek moeten worden weergegeven.
• Mini winkelwagen: Biedt een korte weergave 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 of te verwijderen.
• Product in de aanbieding: Toont producten die momenteel in de aanbieding zijn in een rasterformaat en kan worden aangepast door elementen zoals titel, prijs, beoordeling en koopknop toe te voegen of te verwijderen.
• Product zoeken: Voegt een zoekbalk toe om klanten te helpen bij het zoeken naar producten.
• Producten per tag: Toont producten met specifieke tags/labels in een rasterformaat.
• Product per attribuut: Toont producten met specifieke attributen (kleur, maat, enz.) in een rasterformaat.
• Product per categorie: Toont producten op basis van categorieën in een rasterformaat.
• Beoordelingen per product: Toont beoordelingen gegroepeerd per product.
• Beoordelingen per categorie: Toont productbeoordelingen uit specifieke categorieën.
• Enkel product: Toont een gedetailleerd overzicht van een enkel product.
• Top beoordeelde producten: Toont producten met de hoogste beoordelingen in een rasterformaat.

Hoe u het productrasterblok in WooCommerce gebruikt

Naast het leren over de beschikbare functies in WooCommerce blokken, laten we proberen een productraster toe te voegen in WooCommerce. Zorg ervoor dat u de WooCommerce blokken plugin op uw website hebt geïnstalleerd. Hier is hoe u het toevoegt:

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

2. Op de linker navigatie, klik op de (+) knop > scroll naar beneden naar de WooCommerce sectie > selecteer "productraster".

3. Ga vervolgens naar het blok configureren, ga naar het rechter paneel.

In dit paneel kun je verschillende dingen aanpassen, waaronder:

• Instellingen voor de lay-out: U kunt het aantal rijen en kolommen dat in het productraster wordt weergegeven, aanpassen. Stel bijvoorbeeld beide in op 2 voor een evenwichtige weergave.
• Instellingsinstellingen: U kunt een vervolgkeuzemenu weergeven voor het sorteren van producten. Met deze functie kunnen klanten producten sorteren op basis van hun voorkeuren. U kunt het uitschakelen als het niet nodig is.
• Geavanceerde styling: Je kunt CSS-klassen toevoegen om het uiterlijk aan te passen.

Hoe u aanbevolen producten aan uw pagina toevoegt

Met het Featured Product-blok kunt u specifieke producten op uw pagina of bericht presenteren. Met dit blok kunt u producten selecteren, hun uiterlijk aanpassen en ze in uw inhoud plaatsen om bezoekers aan te trekken tot de items die u wilt promoten.

Volg deze stappen om het Uitgelichte Product Blok toe te voegen:

1. Open de pagina of het bericht waar u het wilt toevoegen. Als u het bijvoorbeeld boven de productraster plaatst, maakt u ruimte in dat gebied en klikt u op de "+" knop die verschijnt.

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

3. Kies de producten die je wilt benadrukken en klik vervolgens op "Klaar".
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 weergeven of verbergen.
• Mediaweergave configureren (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 kunt u de pagina publiceren of bijwerken om uw aanbevolen productblok weer te geven.

Hoe u filterblokken toevoegt in WooCommerce

Het WooCommerce Filter-blok maakt het voor klanten gemakkelijk om producten te vinden die voldoen aan hun zoekcriteria. Door filteropties aan te bieden, kunnen klanten 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 je het filterblok wilt plaatsen.
2. Bepaal de gewenste locatie om het filterblok te plaatsen.
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 type filter bespreken dat beschikbaar is. 

Filter op prijs toevoegen

Met het Prijs Filter Product Blok kunt u een filterfunctie toevoegen waarmee gebruikers het gewenste prijsbereik kunnen selecteren. Het prijsbereik kan worden weergegeven als bewerkbare knoppen of gewone tekst. U kunt knoppen toevoegen indien gewenst en hun kopniveau aanpassen.

Filter toevoegen op basis van attribuut

Met het Product Attribuut Filterblok kunnen gebruikers producten filteren op basis van attributen zoals kleur en maat. U kunt de attributen kiezen die u wilt gebruiken uit de beschikbare lijst. De weergave kan zijn in de vorm van een lijst of een vervolgkeuzemenu. U kunt ook het querytype configureren om OF te zijn. Andere functies zijn onder andere het weergeven van het aantal producten, het selecteren van het kopniveau, het toevoegen van knoppen en het kiezen van het filter.

Filter toevoegen op voorraad

Met het blok 'Voorraadstatus productfilter' kunnen gebruikers producten weergeven op basis van hun beschikbaarheidstatus. Zij kunnen beschikbare producten (in voorraad), niet op voorraad (uit voorraad) of op nabestelling weergeven. U 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 voorbeeld wanneer het aan de pagina wordt toegevoegd.

Winkelwagen- en afrekenblokken

OnsHet winkelwagenblok voegt een winkelwagenweergave toe aan uw pagina. U kunt een verzendkosten calculator toevoegen, een link selecteren voor de afrekenknop en een weergave in donkere modus instellen. Dit blok biedt ook een melding dat u de pagina kunt instellen als de standaard winkelwagenpagina in WooCommerce instellingen. Een link om feedback te geven is ook opgenomen.

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

Hoe de winkelpagina op WooCommerce aanpassen

Na het leren hoe u verschillende WooCommerce-blokken kunt gebruiken, kunt u er verschillende combineren om een gebruiksvriendelijke aangepaste winkelpagina te maken. Volg deze stappen om deze specifieke winkelpagina-indeling te maken.

1. Maak een nieuwe pagina aan en noem deze "Winkel".

2. Voeg de Productzoek blok toe.

3. Voeg de Productcategorieënlijst blok toe

Stel vervolgens de weergavestijl in op de dropdown.

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

6. Voeg het Alle Producten blok toe.

Stel het aantal kolommen en rijen in op 2 en schakel de sorteer dropdown optie uit.

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

Bouw uw online winkel met WooCommerce Block & verkoop uw product

Na het succesvol maken van een aangepaste winkelpagina met WooCommerce Blocks, kunt u nu beginnen met het verkopen van uw fysieke en digitale producten. Vooral voor digitale producten is het cruciaal om een bestandsdownload-plug-in toe te voegen zoals WP File Download Addon.

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 maken die zijn gekoppeld aan één of meerdere bestanden.

Bovendien 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 zeer beperkte toegang via cloud API-connectoren.

Met de WP File Download Addon is het verkopen van digitale producten in uw WooCommerce online winkel toegankelijker en efficiënter geworden. Na het bouwen van uw winkel met WooCommerce Blocks, vormt deze plugin een perfecte aanvulling op de verkoop van uw digitale content.

Conclusie

WooCommerce Blocks is een plugin die het je mogelijk maakt om een complete online winkel te bouwen in WordPress zonder code te schrijven. Met verschillende blokken, zoals productrasters, filters en aanbevolen productweergaven, kun je gemakkelijk een boeiende 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 te verkopen met WooCommerce, zoals ebooks, software of multimedia-inhoud.

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