# Een WooCommerce-thema met blokken voor elk winkelscherm URL: https://canvaswp.com/nl/woocommerce/ Updated: 2026-11-03 WooCommerce Ontwerp de productpagina, het productraster, de winkelwagen en het afrekenproces met blokken in de editor die WordPress je geeft, en start daarna met een demo die als werkende winkel wordt geleverd. WooCommerce beheert de bestellingen, Canvas zorgt voor de vormgeving. Laatst bijgewerkt 3 november 2026 24 WooCommerce-blokken 18 Winkelsjablonen 21 Demo-winkels die je kunt importeren De blokken ## 24 blokken voor de vier schermen die verkopen Elk onderdeel van een WooCommerce-winkel dat een klant ziet, is een blok met een instellingenpaneel, dus je verplaatst het, past de stijl aan of laat het weg zonder een sjabloonbestand aan te raken. ### De productpagina 11 blokken Bouw een enkelvoudige productindeling blok voor blok, of begin met een van de meegeleverde sjablonen en verplaats de onderdelen. #### Productafbeeldingen Inbegrepen bij elk abonnement Toont de uitgelichte productafbeelding van WooCommerce en optionele galerijminiaturen. #### Product Gallery Linker Inbegrepen bij elk abonnement Een miniatuurstrip die de productgalerij-carrousel naar de afbeelding brengt waarop je klikt. #### Product Price Inbegrepen bij elk abonnement Toont de WooCommerce-productprijs, inclusief aanbiedingsprijs en valutaopmaak. #### Product Rating Inbegrepen bij elk abonnement Toont de sterrenwaardering en optioneel het aantal reviews voor het huidige WooCommerce-product. #### Product Meta Inbegrepen bij elk abonnement Toont de productmetakaart: SKU, categorieën en tags. #### Product Short Description Inbegrepen bij elk abonnement Toont de korte productbeschrijving met de alinea-opmaak ongewijzigd. #### Variation Swatches Inbegrepen bij elk abonnement Kleurstippen of pillknoppen waarmee de variatie van een variabel product wordt gekozen. #### Add to Cart Inbegrepen bij elk abonnement Toont het WooCommerce-formulier om het huidige product aan de winkelwagen toe te voegen, met optioneel een invoerveld voor de hoeveelheid. #### Product Tabs Inbegrepen bij elk abonnement Toont de productgegevenstabbladen van WooCommerce: Beschrijving, Aanvullende informatie en Beoordelingen. #### Product Share Inbegrepen bij elk abonnement Toont de kaart “Delen:” met links om het huidige WooCommerce-product te delen op sociale media. #### Gerelateerde producten Inbegrepen bij elk abonnement Toont een raster met WooCommerce-producten die gerelateerd zijn aan het huidige product. Wordt alleen weergegeven op sjablonen voor enkele producten. ### De winkel en de catalogus 5 blokken Grids, carrousels, categoriekaarten en een prijsfilter, die elk content kunnen ophalen uit een categorie, een tag, een zoekopdracht of een handmatig gekozen lijst. #### Producten Inbegrepen bij elk abonnement WooCommerce-producten weergeven in een raster- of lijstindeling. Filteren op bron, categorie, tag en sortering. #### Product Categories Inbegrepen bij elk abonnement Toont WooCommerce-productcategorieën als een responsief kaartenraster met miniaturen, namen en productaantallen. #### Product Carousel Inbegrepen bij elk abonnement Toont WooCommerce-producten in een scrollbare owl-carousel. Ondersteunt automatisch afspelen, navigatiepijlen, bolletjes en responsieve breekpunten. #### Store Price Filter Inbegrepen bij elk abonnement Een prijsbereikschuif met twee handvatten die een productraster direct filtert. #### Conference Tickets Inbegrepen bij elk abonnement Prijsvakken voor een categorie ticketproducten, elk met een keuzelijst voor het aantal en een live link om toe te voegen aan de winkelwagen. ### De winkelwagen 3 blokken Een winkelwagenpagina die je zelf ontwerpt, met de upsell die klanten daadwerkelijk zien. #### Cart Table Bij elk abonnement inbegrepen Toont de WooCommerce-winkelwagentabel met productregels, aantallen en totalen. #### Cart Totals Inbegrepen bij elk abonnement Toont het totalenpaneel van de WooCommerce-winkelwagen met subtotaal, verzendkosten en de knop om af te rekenen. #### Cross-sells Inbegrepen bij elk abonnement Toont cross-sellproducten uit de huidige WooCommerce-winkelwagen. Wordt alleen weergegeven wanneer de winkelwagen actief is en cross-sellproducten bevat. ### De checkout 3 blokken Het factuurformulier, het besteloverzicht en de meldingen die een klant laten zien wat er net is gebeurd. #### Checkout Billing Inbegrepen bij elk abonnement Toon het WooCommerce-formulier voor het factuuradres bij het afrekenen. #### Checkout Order Review Inbegrepen bij elk abonnement Toont de bestelcontrole van de WooCommerce-afrekening, met regelitems en totalen. #### WooCommerce Notices Inbegrepen bij elk abonnement Toont WooCommerce-meldingen: fouten, succesberichten of informatieve meldingen. ### Elders in de winkel blokken Winkelblokken die buiten de vier schermen hierboven vallen. #### Verlanglijst Inbegrepen bij elk abonnement De producten die een klant heeft opgeslagen, met hun prijs, voorraad en een knop om ze aan de winkelwagen toe te voegen. Plaats het op de pagina die je kiest in Thema-opties, Wishlist. #### Wishlist Button Inbegrepen bij elk abonnement Slaat het huidige product op in de verlanglijst van de klant. Gebruik het in productsjablonen en productkaarten. ### Kledingwinkel Een modecatalogus met collectiepagina's, variabele producten en een header-winkelwagen die het aantal bijhoudt. [E-commerce-thema's](https://canvaswp.com/nl/wordpress-themes/ecommerce/) ### Meubels Verkoop en verhuur in één catalogus, met zowel het productraster als de productpagina opgebouwd uit blokken. [Thema's voor interieurdesign](https://canvaswp.com/nl/wordpress-themes/interior-design/) ### Wijn Een wijnwinkel waarin het ontwerp de productfoto's naar voren brengt en de winkelpagina's daarachter staan. [Restaurantthema's](https://canvaswp.com/nl/wordpress-themes/restaurant/) Drie van de 21 demowinkels. Elk onderdeel dat een shopper op deze pagina's ziet, is een blok met een instellingenpaneel erachter. [Alle 314 Canvas-blokken](https://canvaswp.com/nl/blocks/) Gedrag ## Wat klanten doen zonder de pagina opnieuw te laden Drie vormen van winkelgedrag waarvoor normaal gesproken elk een plugin nodig is, zijn onderdeel van de integratie. ### Kleurswatches voor attributen Geef een productattribuutterm in de beheerder een kleur, en variabele producten tonen kleurbolletjes of knoppen in plaats van een dropdownmenu, zodat een klant een variant met één blik kiest. ### AJAX toevoegen aan winkelwagen Een product toevoegen vanuit een raster, carrousel of kaartoverlay werkt de winkelwagen direct bij. De bezoeker blijft op de pagina waar die aan het winkelen was, en de mini-winkelwagen in de header houdt het aantal bij. ### Stijlen voor productkaarten Zet elke catalogusafbeelding vast op één vorm zodat kaarten netjes uitlijnen, kies of extra galerijafbeeldingen bij hover verschijnen of als diavoorstelling worden getoond, en kies wat de hover-overlay biedt: kopen, snel bekijken of beide. Sjablonen ## 18 winkelsjablonen in de Site-editor Elk winkelscherm is een bloksjabloon die je opent, bewerkt en terugzet in de Site-editor, op dezelfde manier als je elk ander bloksjabloon bewerkt. ### Lay-outs voor enkele producten Geef een productpagina de standaardindeling, een sticky samenvatting die de galerij volgt, een lijst, een kleurgedreven ontwerp, een winkelontwerp, een van twee aangepaste galerijindelingen met koppeling, of een variant met een zijbalk links, rechts of twee zijbalken. ### Layouts voor winkelpagina's Stel de winkelpagina zelf in op volledige breedte, met een linker zijbalk, met een rechter zijbalk of met zijbalken aan beide kanten, zodat filters en categorieën staan waar je catalogus ze nodig heeft. ### Archieven, winkelwagen en afrekenen Het winkelarchief, de archieven van productcategorieën, de winkelwagen en de afrekenpagina worden elk als sjabloon meegeleverd, naast de WooCommerce-sjabloonoverschrijvingen die het thema biedt. Winkelsjablonen worden onder woocommerce weergegeven in het eigen paneel Sjablonen van de Site-editor, naast de Canvas-sjablonen, en je reset ze vanuit hetzelfde scherm. Wijs per product een indeling toe vanuit de editor, of stel de standaard voor de hele winkel in via Thema-opties. Een sjabloon dat je in de Site-editor aanpast, blijft aangepast na updates, en Canvas laat je na een update zien welke sjablonen zijn gewijzigd. Thema-opties ## 39 winkelopties, 5 tabbladen Standaardinstellingen voor de hele winkel voor de catalogus, de productpagina, de winkelwagen en het afrekenen, en de minicart in de header, plus een catalogusmodus voor winkels die aanvragen aannemen. Producten per pagina, paginering, vorm van de productafbeelding, extra galerijafbeeldingen en de overlay op de kaart stel je hier allemaal in. Een blok dat er zelf één instelt, wint op de pagina waar het is geplaatst. - Catalogus: producten per rij op elk schermformaat, afbeeldingsvorm, hover-gedrag, de sale-badge - Productpagina: wat het scherm van een enkel product toont, en een sticky winkelwagenbalk - Winkelwagen en afrekenen: een gratis voortgangsbalk voor verzending, en een afrekenproces zonder afleiding - Minicart: wat de winkelwagen in de header doet wanneer een klant iets toevoegt - Catalogusmodus: prijzen en de koopknop verbergen, een aanvraagknop tonen [Winkelopties die je helpen verkopen](https://docs.canvaswp.com/store-options-that-help-you-sell) [Cataloogmodus](https://docs.canvaswp.com/catalog-mode) [De wishlist](https://docs.canvaswp.com/the-wishlist) Thema-opties, sectie Winkel, tabblad Catalogus. Prestaties ## Vijf WooCommerce-schakelaars WooCommerce laadt op elke pagina van een website scripts en stijlbladen, ook op de pagina's die niets verkopen. Met deze vijf schakelaars neem je dat weer terug, en elk ervan is omkeerbaar. - WooCommerce-JavaScript verwijderen op pagina's die geen winkelinhoud tonen - Schakel de tracking van orderattributie uit als je die rapporten niet leest - Stop dat het cart fragments-script bij elke paginalading steeds gegevens opvraagt - Verwijder de bibliotheek voor wachtwoordsterkte buiten account- en afrekenpagina's - Schakel de meegeleverde Select2-bibliotheek uit buiten de afreken- en accountpagina's [Alle 35 performance-optimalisaties](https://canvaswp.com/nl/performance/) Thema-opties, Performance, tabblad WooCommerce. Demo-winkels ## 21 demo's zijn werkende WooCommerce-winkels Producten, categorieën, attributen, een winkelwagen en een afrekenpagina, geïmporteerd en klaar om een testbestelling te plaatsen. Bekijk elk van deze onderdelen live voordat je beslist. ### [Bag Store demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/ecommerce/) Winkel & e-commerce · 9 pagina's · [Wat het installeert: de blokken en contenttypes van de Demo Bag Store](https://docs.canvaswp.com/design-ecommerce) ### [Barber Shop demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/barber/) Beauty & spa · 7 pagina's · [Wat het installeert: de blokken en contenttypes van de Barber Shop-demo](https://docs.canvaswp.com/design-barber) ### [CanvasRoam demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/youtube-creator/) Portfolio & persoonlijk · 10 pagina's · [Wat het installeert: de blokken en contenttypes van de demo CanvasRoam](https://docs.canvaswp.com/design-youtube-creator) ### [Christmas Store demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/xmas/) Winkel & e-commerce · 6 pagina's ### [Clothing Store demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/store/) Winkel & e-commerce · 19 pagina's · [Wat het installeert: de blokken en contenttypes van de Demo Clothing Store](https://docs.canvaswp.com/design-store) ### [Conference demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/conference/) Evenementen & bruiloften · 25 pagina's · [Wat het installeert: de blokken en contenttypes van de demo Conference](https://docs.canvaswp.com/design-conference) ### [Drone demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/drone/) Winkel & e-commerce · 12 pagina's ### [eBook demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/ebook/) Winkel & e-commerce · 9 pagina's ### [Fashion Shop demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/shop/) Winkel & e-commerce · 25 pagina's ### [Fashion Store demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/fashion-store/) Winkel & e-commerce · 16 pagina's ### [FORM 2026 demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/event-conference/) Evenementen & bruiloften · 14 pagina's · [Wat het installeert: de blokken en contenttypes van de demo FORM 2026](https://docs.canvaswp.com/design-event-conference) ### [Furniture demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/furniture/) Winkel & e-commerce · 12 pagina's ### [Game of Canvas demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/gaming/) Entertainment & community · 12 pagina's · [Wat wordt geïnstalleerd: de blokken en contenttypen van de demo Game of Canvas](https://docs.canvaswp.com/design-gaming) ### [Illustrator demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/illustrator/) Portfolio & persoonlijk · 7 pagina's · [Wat het installeert: de blokken en contenttypes van de demo Illustrator](https://docs.canvaswp.com/design-illustrator) ### [Jewelry Boutique demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/jewellery-boutique/) Winkel & e-commerce · 17 pagina's ### [Podcasts demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/podcasts/) Blog & magazine · 13 pagina's · [Wat het installeert: de blokken en contenttypen van de demo Podcasts](https://docs.canvaswp.com/design-podcasts) ### [Pottery Shop demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/shop-2/) Winkel & e-commerce · 12 pagina's ### [Speaker Store demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/speaker/) Winkel & e-commerce · 11 pagina's ### [Supplement Store demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/supplements/) Winkel & e-commerce · 13 pagina's ### [Wildroot Gear demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/gear/) Winkel & e-commerce · 14 pagina's · [Wat het installeert: de blokken en contenttypes van de Demo Wildroot Gear](https://docs.canvaswp.com/design-gear) ### [Wine Estate demo, live preview (opent in een nieuw tabblad)](https://demos.canvaswp.com/wine/) Eten & drinken · 10 pagina's · [Wat het installeert: de blokken en contenttypes van de demo Wine Estate](https://docs.canvaswp.com/design-wine) [Alle demo's](https://canvaswp.com/nl/demos/) Importeren in een live winkel ## Je winkelpagina's worden overgenomen, niet gedupliceerd De gebruikelijke angst bij het importeren van een winkelontwerp is wakker worden met twee afrekenpagina's. Canvas koppelt de WooCommerce-pagina's van de demo aan de pagina's die je site al heeft. Het importscherm waarmee elke winkeldemo wordt binnengehaald, inclusief de rollback die die import ongedaan maakt. ### Eén winkel, één winkelwagen, één afrekenproces De importeur zoekt je bestaande WooCommerce-pagina's op en koppelt de menu's en links van de demo er rechtstreeks aan. ### Omkeerbaar Alles wat de import heeft aangemaakt wordt bijgehouden, zodat je via één scherm de demo-inhoud verwijdert en de opties en menu's herstelt die er eerder waren. ### Inbegrepen producten Demo-producten, categorieën, attributen en swatchkleuren komen met het ontwerp mee, zodat de catalogus correct wordt weergegeven terwijl je ze vervangt door je eigen. ### Of alleen de pagina's Kies je de paginagerichte import, dan neem je de pagina's van de demo over, zonder de Thema-opties, menu's of startpagina. Vragen ## Verkopen met Canvas Waar winkeleigenaren als eerste naar vragen. In de [documentatie](https://docs.canvaswp.com/setting-up-your-shop) lees je alles over elk blok en elke optie. **Heb ik de WooCommerce-plugin nog nodig?** Ja, Canvas voegt blokken, sjablonen en opties toe bovenop WooCommerce en vervangt niets ervan. Bestellingen, producten, belastingen, verzending en betalingen blijven in WooCommerce, waar je andere extensies ze verwachten. Als je begint met een winkeldemo, installeert en activeert de installatiewizard WooCommerce voor je voordat de import start. **Vervangt het importeren van een winkel-demo mijn winkel- en afrekenpagina's?** Nee, de Canvas-importer neemt de WooCommerce-pagina's over die je site al heeft, zodat er geen tweede winkel-, winkelwagen-, afrekenpagina of accountpagina verschijnt. Je bestaande producten en bestellingen blijven ongemoeid. **Kan ik deze combineren met de eigen blokken van WooCommerce?** Ja, de Canvas-winkelblokken zijn gewone geregistreerde blokken. Ze staan dus naast WooCommerce-blokken en core-blokken in hetzelfde sjabloon en op dezelfde pagina, en je vervangt ze één voor één zonder je vast te leggen op een volledige indeling. **Hoe werken kleurswatches?** Geef een productattribuutterm een kleur in het WordPress-beheer, en het Canvas Variation Swatches-blok toont dat attribuut als kleurenbolletjes of pilvormige knoppen in plaats van een dropdownmenu, op de productpagina en in de sjablonen die het gebruiken. **Zijn de winkelblokken inbegrepen in mijn abonnement?** Ja: alle 24 Canvas-winkelblokken zijn premiumblokken, en elk abonnement bevat elk premiumblok. Er is geen winkel-add-on en geen e-commerceniveau. Andere thema's splitsen dit vaak op: snelle weergave is [een functie van Astra Pro](https://canvaswp.com/nl/compare/astra/), en OceanWP verkoopt [zijn eCommerce Pro-plugin](https://canvaswp.com/nl/compare/oceanwp/) als apart product.