# Een WooCommerce-winkel starten met WordPress URL: https://canvaswp.com/nl/guides/start-a-woocommerce-store-with-wordpress/ Updated: 2026-11-03 Gids WooCommerce beheert de winkel: de producten, de bestellingen, de belasting en de betalingen. Wat het niet doet, is ervoor zorgen dat dat allemaal bij jouw merk past. Deze gids bouwt de vier schermen die een klant echt ziet, met blokken uit de editor die WordPress al meelevert. Gepubliceerd op 5 september 2026 Laatst bijgewerkt 3 november 2026 Geschreven door het Canvas-team bij SemiColonWeb ## Stap 1: WooCommerce installeren WooCommerce is een gratis plugin uit de WordPress-plugindirectory en blijft verantwoordelijk voor alles wat commercieel is: de productgegevens, de voorraad, de bestellingen, de belastingregels, de verzendzones en de betaalgateways. Canvas vervangt die laag nooit, daarom blijven je andere WooCommerce-extensies gewoon werken. ### Twee manieren om het te installeren - **Laat de installatiewizard het doen.** Kies tijdens de installatie een winkeldemo, dan installeert en activeert de plugin-stap WooCommerce voordat de import start, omdat een winkel een winkelplugin nodig heeft. - **Installeer het zelf** via Plugins, Nieuwe toevoegen, en doorloop de WooCommerce-onboarding. Doe dit als je een winkel toevoegt aan een site die je nu al beheert. Hoe dan ook, doorloop de WooCommerce-setup één keer en beantwoord de vragen over je land, je valuta en wat je verkoopt. Die antwoorden bepalen later belasting en verzending, en ze zijn vervelend om later te corrigeren. Stel een e-mailbezorgservice in voordat je een echte bestelling aanneemt. Orderbevestigingen verlaten WordPress standaard via je server, en een winkel waarvan de orderbevestigingen in de spam belanden, levert ondersteuningstickets op die je niet kunt beantwoorden. ## Stap 2: Begin met een winkel-demo of met een lege catalogus Je hebt hier een keuze, en die keuze is tien minuten nadenken waard. ### Een winkeldemo importeren 21 van de 88 demo's zijn werkende WooCommerce-winkels. Met één import krijg je producten, categorieën, attributen, swatchkleuren, een ontworpen winkel, een ontworpen productpagina, een winkelwagen en een checkout, allemaal al ingesteld en volledig bewerkbaar. Het is de snelste manier om te zien hoe de onderdelen in elkaar passen, en je kunt de hele import terugdraaien als je er toch van afziet. ### Bouwen op je eigen catalogus Als je al producten verkoopt en er producten in de database staan, kies dan het bereik “alleen pagina’s” voor je bestaande website. Je krijgt de demopagina’s en de records die ze gebruiken, zonder de instellingen, menu’s of homepage, en je catalogus blijft precies waar die nu staat. Hoe dan ook worden de WooCommerce-pagina's op je site overgenomen, zodat er altijd maar één winkelpagina, één winkelwagen, één afrekenpagina en één accountpagina is. [Zo werkt de demo-import in detail](https://canvaswp.com/nl/guides/import-a-wordpress-demo-website/) [De negen WooCommerce-winkeldemo's](https://canvaswp.com/nl/wordpress-themes/ecommerce/) ## Stap 3: Voeg je eerste producten toe Producten zijn WooCommerce-records die je toevoegt onder Producten in het WordPress-beheer, en dit onderdeel is bewust eenvoudig. Besteed hier je tijd aan in plaats van aan de lay-out, want een goede productpagina bestaat vooral uit goede productgegevens. - **Eén duidelijke foto per product,** op dezelfde manier gemaakt voor elk item. Een catalogusraster ziet er ontworpen uit als de vormen op elkaar aansluiten, en haastig in elkaar gezet als dat niet zo is. - **Een korte beschrijving die de vraag beantwoordt die een koper echt heeft.** Maat, materiaal, hoe lang de levering duurt en wat er gebeurt als het niet past. - **Categorieën die aansluiten bij hoe mensen winkelen,** niet bij hoe je magazijn is ingedeeld. - **Attributen voor alles wat varieert.** Kleur, maat, afwerking. Geef de kleurtermen in het beheer een echte kleurwaarde, want daarmee verandert een dropdown later in kleurstalen. - **Voorraad, gewicht en afmetingen** als je fysieke producten verstuurt. Verzendregels lezen deze gegevens uit. Voeg drie producten toe voordat je iets ontwerpt. Een lay-out die je beoordeelt op basis van één placeholder-item, is een lay-out die je opnieuw gaat bouwen. ## Stap 4: Ontwerp de winkelpagina De winkel is een catalogus, en het doel is een bezoeker snel naar een productpagina te brengen. Canvas biedt daarvoor blokken, waarbij het gebruikelijke antwoord één thema-instelling met drie lay-outkeuzes is. ### De blokken Een productraster haalt producten uit een categorie, een tag, een zoekopdracht of een handmatig gekozen lijst. Een productcarrousel doet hetzelfde in een rij voor de homepage. Productcategoriekaarten sturen bezoekers naar een sectie. Met een prijsfilter kunnen winkelaars een lange catalogus verfijnen. Elk daarvan is een blok met een instellingenpaneel, dus het aantal kolommen, de bron en de sortering zijn bedieningselementen, geen code. ### Het sjabloon eronder De shop zelf is een bloksjabloon die je in de Site-editor kunt openen. Kies een indeling over de volle breedte, met een linker zijbalk, een rechter zijbalk of beide, afhankelijk van of filters en categorieën hun plek in je catalogus verdienen. Er zijn in totaal 18 winkelsjablonen, die de shop, de productpagina, de archieven, de winkelwagen en het afrekenen dekken. ### De standaardinstellingen voor de hele winkel Thema-opties bevat 39 winkelinstellingen verdeeld over 5 tabbladen: de catalogus, de productpagina, de winkelwagen en het afrekenen, de mini-winkelwagen in de header, en de catalogusmodus. Productaantallen per pagina, paginering, de vorm van de productafbeelding, of extra galerijafbeeldingen bij hover zichtbaar worden en wat de hover-overlay biedt, staat er allemaal. Een blok dat een van die instellingen zelf instelt, wint nog steeds op de pagina waar het staat. **Thema-opties, Winkel.** Standaardwaarden voor de hele winkel, overschreven door elk blok dat er eigen waarden voor instelt. ## Stap 5: Productpagina ontwerpen Dit is de pagina die verkoopt, dus die verdient meer dan de standaardindeling die elke webwinkel op internet gebruikt. ### Bouw het op uit losse onderdelen Elk onderdeel van een productpagina is een blok: de afbeeldingengalerij, de prijs, de sterrenbeoordeling, de meta, de korte beschrijving, de variatiekeuzes, de knop 'Toevoegen aan winkelwagen', de tabbladen, de deelrij en de gerelateerde producten. Verplaats ze, pas hun stijl aan of laat er één helemaal weg. De pagina blijft werken, omdat elk blok zijn eigen gegevens bij WooCommerce opvraagt. ### Of begin met een kant-en-klare lay-out Als je liever niet vanuit onderdelen begint, kies dan een van de meegeleverde productindelingen en verplaats de onderdelen: de standaard, een samenvatting die de galerij volgt terwijl je scrolt, een lijst, een kleurgedreven ontwerp, een winkelontwerp, twee galerij-indelingen met aangepaste koppelingen, en varianten met een linker-, een rechter- of twee zijbalken. Wijs per product in de editor een indeling toe, of stel de standaard voor de winkel in via Thema-opties. ### Wat je boven de vouw plaatst De foto, de naam, de prijs, de variantkeuze en de knop Toevoegen aan winkelwagen. Al het andere, inclusief de beschrijving die de meeste mensen nooit lezen, kan eronder staan. Controleer dat op je telefoon voordat je besluit dat je het er niet mee eens bent. ## Stap 6: De winkelwagen en de checkout Op deze twee schermen gaat het geld verloren, en in de meeste thema's mag je ze juist niet aanraken. Hier zijn ze gewoon blokken, net als alle andere. ### De winkelwagen Een blok met de winkelwagentabel voor de inhoud, een blok met de totalen voor de bedragen, en een cross-sells-blok voor het product dat een klant echt zou kunnen toevoegen. Houd het kort en zorg dat de knop goed zichtbaar is. De meest voorkomende fout in de winkelwagen is een muur van promotionele content tussen de totalen en de afrekenknop. ### De afrekening Een factureringsblok voor het formulier, een besteloverzichtblok voor wat er wordt gekocht, en een meldingenblok voor de berichten die een klant laten zien wat er is gebeurd. WooCommerce regelt nog steeds de bestelling, de betaling en de e-mails; jij bepaalt hoe het scherm eruitziet. ### Regels die zichzelf terugverdienen - Vraag alleen om zoveel velden als je verzending echt vereist. - Toon de totale kosten, inclusief verzending, vóór de betaalstap. - Geef in woorden aan hoeveel dagen het duurt voordat de bestelling aankomt. - Plaats je retourbeleid waar een onzekere koper die voor het eerst bestelt, het meteen ziet. ## Stap 7: Swatches, toevoegen aan winkelwagen en kaartstijlen Drie onderdelen van winkelgedrag waar je normaal gesproken elk een aparte plugin voor nodig hebt, zijn al onderdeel van de integratie. - **Kleurstalen voor attributen.** Geef een productattribuutterm een kleur in de beheeromgeving en variabele producten tonen kleurbolletjes of knoppen in plaats van een keuzelijst. Een klant kiest dan een variant door te kijken, wat het meest uitmaakt op een telefoon. - **Toevoegen aan winkelwagen zonder de pagina te herladen.** Een product toevoegen vanuit een raster, een carrousel of een kaartoverlay werkt de winkelwagen direct bij, zodat de koper op dezelfde pagina blijft en het winkelwagen-icoon in de header het aantal blijft bijhouden. - **Stijlen voor productkaarten.** Zet elke catalogusafbeelding in dezelfde vorm zodat het raster netjes uitlijnt, kies of extra galerijafbeeldingen bij hover verschijnen of als diavoorstelling lopen, en bepaal wat de hover-overlay biedt: kopen, snel bekijken of beide. Alle drie zijn instellingen. Geen ervan vereist een snippet, een child-thema of een tweede plugin, en elk kan worden uitgeschakeld als je het eenvoudiger gedrag verkiest. Sommige thema's verkopen deze laag los. OceanWP levert een gratis WooCommerce-integratie en biedt Ocean eCommerce Pro aan als apart product, en [hoe Canvas zich verhoudt tot OceanWP](https://canvaswp.com/nl/compare/oceanwp/) laat zien wat elk abonnement voor een webshop bevat. ## Stap 8: Betalingen, snelheid en daarna een testbestelling Ontwerp komt laatst, geld eerst. Werk dit door voordat je iemand vertelt dat de winkel open is. ### De commerciële opzet, in WooCommerce - Koppel de betaalgateways die je wilt gebruiken en rond hun verificatie af, wat meestal langer duurt dan je verwacht. - Stel belastingregels en verzendzones in voor de plaatsen waar je daadwerkelijk naartoe verzendt. - Schrijf de pagina's voor terugbetaling, retourneren en levering, en koppel ze vanuit de footer en de afrekenpagina. ### Snelheid in Canvas WooCommerce laadt op elke pagina van een website scripts en stijlbladen, ook op pagina's die niets verkopen. Vijf schakelaars draaien dat terug: WooCommerce JavaScript verwijderen op pagina's zonder winkelonderdelen, tracking van orderattributie uitschakelen, voorkomen dat het cart fragments-script op elke pagina met een winkelwagen de server blijft bevragen, en de bibliotheken voor wachtwoordsterkte en select buiten de account- en afrekenpagina's uitschakelen. Ze horen bij de 35 optimalisaties, en elk ervan is terug te draaien. ### Plaats daarna een echte bestelling Koop iets in je eigen winkel, op een telefoon, via mobiele data. Betaal met een echte kaart als je gateway een testrestitutie ondersteunt. Controleer of de bevestigingsmail aankomt, controleer of de bestelling in de admin verschijnt en vergoed jezelf daarna het bedrag. Alles wat je in die vijf minuten ontdekt, had anders een klant ontdekt. **Performance, WooCommerce-tabblad.** Vijf omkeerbare schakelaars voor de scripts die een pagina nooit gebruikt. ## Bronnen Waar deze gids iets beschrijft dat buiten Canvas zelf valt, zijn dit de officiële pagina's die dat documenteren. - [WooCommerce installeren en verwijderen](https://woocommerce.com/document/installing-uninstalling-woocommerce/) woocommerce.com · WooCommerce is gratis, wordt geïnstalleerd via het scherm Plugins en opent zijn eigen installatiewizard - [WooCommerce-pagina's](https://woocommerce.com/document/woocommerce-pages/) woocommerce.com · WooCommerce wijst voor de winkel, de winkelwagen, het afrekenen en het account elk één pagina aan. - [Belastingen instellen in WooCommerce](https://woocommerce.com/document/setting-up-taxes-in-woocommerce/) woocommerce.com · Btw-tarieven worden ingesteld in de WooCommerce-instellingen - [Verzendzones instellen](https://woocommerce.com/document/setting-up-shipping-zones/) woocommerce.com · Een verzendzone is een geografisch gebied waarnaar je verzendt - [Bestelattributie-tracking](https://woocommerce.com/document/order-attribution-tracking/) woocommerce.com · Wat de bestelattributie vastlegt, en de WooCommerce-instelling die dat uitschakelt Wat je hierna kunt doen ## Hoe ga je verder? Twee gidsen voor de rest van de site rond de winkel, en alle winkelfuncties volledig toegelicht. [Gids **Een restaurantwebsite bouwen** Een import van begin tot eind op een echt project, met de bewerkingen die daarna volgen.](https://canvaswp.com/nl/guides/build-a-restaurant-website-with-wordpress/) [Gids **Websites voor klanten bouwen** Eén licentie voor elke klant: sleutels, stagingkopieën en hoe een overdracht eruitziet.](https://canvaswp.com/nl/guides/build-client-websites-with-wordpress/) [Product **Canvas en WooCommerce** 24 winkelblokken en 18 winkelsjablonen.](https://canvaswp.com/nl/woocommerce/) Vragen ## Veelgestelde vragen De [volledige FAQ](https://canvaswp.com/nl/faq/) beantwoordt de rest, en de [documentatie](https://docs.canvaswp.com/) behandelt elke instelling in detail. **Heb ik de WooCommerce-plugin nog nodig?** Ja, een Canvas-winkel draait nog steeds op de WooCommerce-plugin. Canvas voegt blokken, sjablonen en opties eraan toe en laat de plugin de leiding houden, zodat bestellingen, producten, belastingen, verzending en betalingen blijven staan waar je andere extensies ze verwachten. Als je begint met een winkeldemo, installeert en activeert de Installatiewizard WooCommerce voordat de import wordt uitgevoerd. **Zijn de winkelblokken een aparte aankoop?** Nee, de Canvas-winkelblokken zijn bij elk abonnement inbegrepen, zonder extra kosten. Alle 24 winkelblokken zijn premiumblokken en elk abonnement bevat elk premiumblok, samen met alle 18 winkelsjablonen en alle 21 demowinkels. Er is geen e-commerce-niveau en geen winkel-add-on. **Kan ik deze combineren met de WooCommerce-blokken?** Ja, combineer ze vrijuit: de Canvas-winkelblokken zijn gewone geregistreerde blokken, dus ze staan naast de WooCommerce-blokken en kernblokken in hetzelfde sjabloon en dezelfde pagina. Vervang één onderdeel tegelijk en laat de rest van de indeling ongemoeid. **Krijg ik twee afrekenpagina's als ik een winkel-demo importeer?** Nee, bij het importeren van een Canvas-winkeldemo houd je één afrekenpagina over. De importeur zoekt de winkel-, winkelwagen-, afreken- en accountpagina's die je site heeft en koppelt de menu's en links van de demo daaraan, zodat je van elk er één houdt. Je bestaande producten en bestellingen blijven ongemoeid, en de hele import kan worden teruggedraaid.