Elementor en WooCommerce vormen samen een van de flexibelste combinaties voor het bouwen van aangepaste online winkels op WordPress. Terwijl WooCommerce de e-commerce functionaliteit afhandelt (producten, winkelwagentje, afrekenen, betalingen), biedt Elementor je visuele controle over hoe die winkelpagina's eruitzien en functioneren. In deze gids lopen we door het bouwen van belangrijke WooCommerce-pagina's met Elementor, waaronder productpagina's, winkelarchieven en de winkelwagentje-ervaring.
Deze tutorial gaat ervan uit dat je WordPress, WooCommerce en Elementor Pro hebt geïnstalleerd. Elementor Pro is vereist voor WooCommerce-widgets; de gratis versie van Elementor bevat deze niet.
Wat Je Nodig Hebt Voor Je Begin
| Vereiste | Waarom Het Nodig Is | Waar Je Het Kunt Krijgen |
|---|---|---|
| WordPress 6.x+ | Core CMS-platform | wordpress.org |
| WooCommerce (gratis) | E-commerce functionaliteit | WordPress plugin directory |
| Elementor Pro | WooCommerce-widgets en Theme Builder | PluginTheme.net |
| Compatibel thema | Basis voor je winkel | Thema selectie gids |
| Voorbeeldproducten | Inhoud voor het ontwerpen van sjablonen | WooCommerce → Tools → Voorbeeldgegevens importeren |
Elementor's WooCommerce Builder Begrijpen
Elementor Pro bevat een speciale WooCommerce Builder binnen zijn Theme Builder-systeem. Dit stelt je in staat om aangepaste sjablonen te maken voor:
- Enkele Productpagina: Beheer de lay-out van individuele productpagina's
- Productarchief: Pas de winkelpagina en categoriepagina's aan
- Winkelwagentje Pagina: Ontwerp een aangepaste lay-out voor het winkelwagentje
- Afrekenpagina: Pas de lay-out van het afrekenformulier aan
- Mijn Account Pagina: Herontwerp het dashboard van het klantenaccount
Elke sjabloon gebruikt WooCommerce-specifieke widgets die dynamische gegevens van je producten ophalen. Dit betekent dat je de lay-out één keer ontwerpt, en deze automatisch van toepassing is op alle producten (of specifieke categorieën).
Een Aangepaste Productpagina Bouwen
Stap 1: Maak de Sjabloon
- Navigeer naar Templates → Theme Builder in je WordPress-admin
- Klik op "Nieuwe Toevoegen" en selecteer "Enkele Product" als het sjabloontype
- Kies een vooraf gebouwde productpagina-sjabloon of begin vanaf een blanco canvas
- De Elementor-editor opent met WooCommerce-widgets beschikbaar in het paneel
Stap 2: Voeg WooCommerce-widgets Toe
Belangrijke WooCommerce-widgets voor productpagina's:
| Widget | Wat Het Weergeeft | Aanpassingsopties |
|---|---|---|
| Productafbeeldingen | Galerij met miniaturen en lightbox | Galerij lay-out, miniatuurpositie, zoomschakelaar |
| Producttitel | Productnaam (H1) | Typografie, kleur, uitlijning |
| Productprijs | Reguliere en verkoopprijs | Typografie, kleur van verkoopbadge, lay-out |
| Productbeoordeling | Sterrenbeoordeling uit beoordelingen | Kleur sterren, grootte, uitlijning |
| Toevoegen aan Winkelwagentje | Hoeveelheidselector + knop om toe te voegen aan winkelwagentje | Knopstijl, kleuren, lay-out hoeveelheid |
| Korte Productbeschrijving | Korte samenvatting van het product | Typografie, spatiëring |
| Productmeta | SKU, categorieën, tags | Lay-out, typografie, scheidingsteken |
| Productgegevens Tabbladen | Tabs voor beschrijving, beoordelingen, aanvullende info | Tabstijl, rand, spatiëring |
| Gerelateerde Producten | Producten uit dezelfde categorie | Kolommen, aantal, volgorde |
| Upsells | Handmatig gekoppelde upsell pro |
Stap 3: Lay-out Best Practices
Een productpagina met hoge conversie volgt een getest lay-out patroon:
- Boven de vouw: Productafbeeldingen (links, 50-60% breedte) + titel, prijs, beoordeling, korte beschrijving en winkelwagentje knop (rechts, 40-50% breedte)
- Onder de vouw: Productgegevens tabbladen (volledige beschrijving, specificaties, beoordelingen)
- Onderste sectie: Gerelateerde producten en upsells in een raster (3-4 kolommen)
- Vertrouwelementen: Verzendinformatie, retourbeleid, beveiligingsbadges nabij de winkelwagentje knop
Houd de winkelwagentje knop zichtbaar zonder te scrollen op zowel desktop als mobiel. Gebruik contrasterende kleuren voor de knop om de aandacht te trekken.
De Winkelpagina Aanpassen (Productarchief)
Stap 1: Maak een Archief Sjabloon
- Ga naar Templates → Theme Builder → Product Archive
- Voeg een nieuw sjabloon toe en selecteer "Product Archive" als type
- Wijs weergavevoorwaarden toe (alle archieven, specifieke categorieën of tagpagina's)
Stap 2: Configureer het Producten Raster
De Archive Products widget toont je productlijst met deze opties:
- Kolommen: 2-6 kolommen (3-4 werkt goed voor de meeste winkels)
- Producten per pagina: 12-24 is standaard voor gebruikerservaring
- Paginering: Genummerde pagina's, "meer laden" knop, of oneindig scrollen
- Sorteer dropdown: Laat klanten sorteren op prijs, populariteit of beoordeling
- Verkoopbadge: Pas de positie, kleur en tekst van de verkoopbadge aan
Voor winkels met veel producten, voeg categorie filtering boven het raster toe. Je kunt de Menu widget van Elementor of een productfilterplugin zoals JetWooBuilder gebruiken voor geavanceerde filteropties.
De Winkelwagentje Pagina Ontwerpen
Elementor Pro stelt je in staat om de lay-out van de winkelwagentje pagina aan te passen. Een goede winkelwagentje pagina moet:
- Productafbeeldingen, namen, prijzen en hoeveelheden in een nette tabel tonen
- Het totaalbedrag prominent weergeven
- Een "Doorgaan met Winkelen" knop bevatten die teruggaat naar de winkelpagina
- Een verzendcalculator tonen zodat klanten de verzendkosten kunnen schatten
- Cross-sell producten onder de winkelwagentje tabel tonen
De Elementor Winkelwagentje widget vervangt de standaard WooCommerce winkelwagentje lay-out met een visuele editor waarin je elk element kunt stylen—tabelranden, knopkleuren, typografie en ruimte.
De Checkout Pagina Aanpassen
De checkout pagina heeft directe invloed op je conversiepercentage. De Checkout widget van Elementor Pro biedt controle over:
- Formulier lay-out: Een-koloms of twee-koloms facturering/verzendformulier
- Orderoverzicht positie: Naast het formulier of erboven/eronder
- Knop styling: Plaats de kleur, grootte en tekst van de bestelknop
- Betalingssectie: Radio button of tab lay-out voor betaalmethoden
- Vertrouwensbadges: Voeg beveiligingsiconen en garantie tekst toe nabij het betalingsformulier
Voor tips over het optimaliseren van de checkout conversie, zie onze WooCommerce checkout optimalisatiegids.
Prestatie Overwegingen
Elementor voegt CSS en JavaScript toe aan je pagina's. Voor een WooCommerce winkel is de prestatie direct verbonden met conversies. Houd deze tips in gedachten:
- Gebruik Flexbox containers in plaats van secties/kolommen voor minder DOM-elementen
- Optimaliseer productafbeeldingen: Gebruik WebP-formaat, juiste afmetingen en lazy loading. Zie onze afbeeldingsoptimalisatiegids
- Beperk het aantal widgets: Elke widget voegt markup toe; gebruik alleen wat je nodig hebt
- Schakel de prestatie functies van Elementor in: Verbeterde asset loading, verbeterde CSS loading
- Gebruik een caching plugin: WP Rocket werkt goed met Elementor WooCommerce setups
Essentiële Addons voor Elementor WooCommerce
Deze Elementor addons breiden de WooCommerce bouwmogelijkheden uit:
| Addon | Belangrijke WooCommerce Kenmerken |
|---|---|
| JetWooBuilder | Geavanceerde product grids, aangepaste archief sjablonen, enkele product lay-outs met voorwaardelijke logica |
| Essential Addons Pro | Product grid, product carrousel, WooCommerce afrekenen |
| Happy Elementor Addons | Productcategorie grid, mini winkelwagentje, product carrousel |
Veelgestelde Vragen
Heb ik Elementor Pro nodig voor WooCommerce, of werkt de gratis versie?
Elementor Pro is vereist voor WooCommerce-specifieke widgets (Productafbeeldingen, Toevoegen aan winkelwagentje, Productgegevens tabbladen, Winkelwagentje, Afrekenen, enz.). De gratis versie van Elementor bevat deze widgets niet. Je kunt de gratis versie gebruiken om reguliere pagina's te ontwerpen, maar aangepaste WooCommerce sjablonen vereisen Elementor Pro.
Kan ik Elementor gebruiken voor de afrekenpagina?
Ja. Elementor Pro bevat een Afreken widget die de standaard WooCommerce afreken lay-out vervangt. Je kunt de formulier velden, besteloverzicht, betalingssectie en algemene lay-out aanpassen. Wees echter voorzichtig met zware aanpassingen die betalingsgateway-integraties kunnen verstoren—test altijd de volledige aankoopstroom na het aanbrengen van wijzigingen.
Hoe maak ik verschillende productpagina lay-outs voor verschillende categorieën?
In Elementor's Thema Bouwer kun je weergavevoorwaarden toewijzen aan elk sjabloon. Maak één productpagina-sjabloon voor kleding (met maat/kleur selectoren), een andere voor digitale producten (zonder verzendinformatie), enzovoort. Elk sjabloon is alleen van toepassing op producten in de opgegeven categorieën.
Vertraagt Elementor WooCommerce?
Elementor voegt CSS en JavaScript overhead toe aan elke pagina. Op productpagina's met veel widgets kan dit de laadtijden met 0,5-1,5 seconden verhogen in vergelijking met de standaard WooCommerce sjablonen. Het gebruik van de ingebouwde prestatie functies van Elementor, het optimaliseren van afbeeldingen en het gebruik van een caching plugin helpt deze impact te verminderen. Voor prestatie-kritische winkels, overweeg een lichter thema zoals GeneratePress.
Kan ik Elementor WooCommerce sjablonen met elk thema gebruiken?
De meeste Elementor WooCommerce sjablonen werken met elk thema dat WooCommerce ondersteunt. Sommige thema's kunnen echter hun eigen styling voor productpagina's hebben die conflicteert met Elementor sjablonen. Thema's zoals Astra, GeneratePress en OceanWP zijn ontworpen om naadloos met Elementor te werken en bieden de schoonste canvas voor aangepaste sjablonen.
Krijg Elementor Pro voor het bouwen van WooCommerce winkels
Toegang tot alle WooCommerce widgets, Thema Bouwer, en 100+ Pro sjablonen. Bouw aangepaste productpagina's, winkelarchieven en afreken lay-outs visueel.
Blader door Elementor Pro →
