Een webshop bouwen met Elementor en WooCommerce, hoe werkt dat precies? Waarvoor kun je Elementor Pro gebruiken om je webshop in te richten? In dit artikelen zetten we alle mogelijkheden van Elementor en WooCommerce op een rij!
Kies het juiste thema
Om te beginnen is het goed om te weten dat werken met Elementor en WooCommerce thema afhankelijk is. Hoewel de meeste thema’s goed samenwerken met Elementor, zijn de mogelijkheden die je hebt op het gebied van WooCommerce wel thema afhankelijk. Zo kun je (zonder add-on) geen zoekfilters instellen of sorteervolgordes; dit zijn functies die in het thema zitten.
Wij raden je dan ook aan om te werken met een thema dat deze functionaliteiten ondersteunt. Elementor adviseert zelf om te werken met het thema Storefront. Maar OceanWP en Astra zijn ook een goede thema’s die je kunt gebruiken in combinatie met Elementor. Ook kun je kiezen voor een premium thema dat specifiek is gemaakt voor Elementor in combinatie met WooCommerce.
Het verschil tussen WooCommerce en Elementor
- WooCommerce = WordPress plugin waarmee je een webshop functionaliteit aan je website toevoegt
- Elementor = Page Builder waarmee je pagina’s (dus ook productpagina’s van WooCommerce) kunt vormgeven
Elementor & WooCommerce: de mogelijkheden
1) Een shop pagina instellen
Als je een webshop maakt met WooCommerce, moet je een webshop pagina instellen. Als je gewend bent om te werken met Elementor, dan doe je dit altijd via WooCommerce of het thema zelf. Werk je met Elementor, dan ga je iets anders te werk.
Elementor biedt namelijk de mogelijkheid om zelf een template te maken voor je shoppagina. Dit geeft je meer flexibiliteit in het vormgeven van de webshop. Zo kun je bijvoorbeeld een sidebar toevoegen en daarin extra informatie kwijt. Ook kun je de weergave van de producten aanpassen. Maar let op: ook dit is thema afhankelijk. Bij het ene thema werkt dit wel goed via Elementor, bij het andere thema moet je de productweergave aanpassen via de thema instellingen.
2) Layout productpagina’s aanpassen
Met Elementor kun je zogenoemde single templates maken. Ook voor je WooCommerce productpagina’s. Dit biedt het voordeel dat je de layout van de productpagina kunt aanpassen. Denk bijvoorbeeld aan het verplaatsen van de ‘Add to cart’ button, de extra informatie tekst verwijderen of extra afbeeldingen toevoegen. Als je werkt met Extra Velden, kun je ook deze ook tonen op de productpagina.
Tip: lees ook WooCommerce productpagina aanpassen met Elementor
Hieronder zie je een welke content je kunt aanpassen op de productpagina’s:
3) Landingspagina’s maken voor producten
Wil je een specifiek product uitlichten? Of stel je advertenties in voor bepaalde producten? We zien vaak dat onze klanten hier specifieke landingspagina’s voor willen maken, waarbij de vormgeving anders is dan die van de single product pagina. Met de custom WooCommerce widgets kun je waar je maar wilt ‘add to cart’ buttons toevoegen aan een pagina. Zo hoef je bezoekers niet eerst naar de single product pagina te leiden en kun je de pagina compleet naar wens vormgeven. Super handig dus!
Hoe werkt dat?
De Elementor WooCommerce widgets kun je op ieder gewenste pagina toevoegen. Zo kun je:
- Op ieder gewenste pagina producten uit de webshop toevoegen aan een bepaalde pagina (met de Products widget)
- Op ieder gewenste pagina een custom Add to cart button toevoegen, waarbij je zelf kunt kiezen welk product aan het winkelmandje moet worden toegevoegd
- Productcategorieën weergeven
- Het winkelmandje tonen (bv. in de header)
4) Categorie pagina’s aanpassen (handig voor SEO!)
Soms wil je extra informatie bieden over bepaalde productsoorten of merken. Of je wilt bijvoorbeeld beter gevonden worden op een specifieke productcategorie in je webshop. Dan is het handig dat je ook wat extra tekst of andere informatie over die productcategorie kwijt kunt op die pagina. Dit kan door het maken van een archiefpagina voor een specifieke categorie (of andere taxonomie). Hoe je dat precies doet lees je in het artikel WooCommerce categorie pagina aanpassen in 4 stappen.
5) Popups instellen voor je webshop
En last but zeker not least: met Elementor Pro kun je popups instellen. Zo kun je bijvoorbeeld een popup maken voor een login, maar ook je webshop bezoekers een aanbieding doen via een popup of gerelateerde producten weergeven met een slide-in.
Kortom, Elementor Pro en WooCommerce zijn een gouden combi!
Tip: WooCommerce widgets add-ons voor Elementor
Naast dat Elementor zelf de nodig WooCommerce widgets biedt, zijn er ook veel Elementor add-ons die extra WooCommerce widgets bieden. Een van die add-ons is bijvoorbeeld de JetWooBuilder. Deze add-on biedt onder andere:
- Sales badges
- Product ordering
- Products notices
- Products loop
- Product lists
Succes met het inrichten van je webshop!
4 Responses
Hallo,
Ik ben gewend om met Divi te werken, maar vanwege de opties hebben we voor de winkel gekozen voor elementor pro. Nu heb ik netjes zoals hier beschreven staat te werk gegaan met het maken van een template. Categoerieen had ik al aan gemaakt. Nu heb ik een product toegevoegd aan mijn template, en prijs, winkelmand, voorraad, short description. Perfect en heel mooi. Maar hoe voeg ik nu 2e, 3e product toe ??
Hoi Rens,
Heb je een single product template aangemaakt? (meer info zie hier –> )
En heb je de producten toegevoegd in WooCommerce?
Het single product template is namelijk van toepassing voor alle producten (wel afhankelijk van hoe je de publicatie condities instelt).
Groetjes,
Sanne
Hi Sanne,
Bedankt voor alle verdraaid leerzame informatie over Elementor Pro i.s.m. WoCommerce ! Ik gebruik dat ook op onze website (wordpress, woocommerce en elementor pro) van majoorbussum.nl Ik heb daar rechtsboven ook het winkelwagen staan zodat klanten daar meteen naar toe kunnen gaan als men dat wil natuurlijk. Maar ik zie nergens hoe ik bij die winkelwagen eenvoudig een cijfer afgebeeld kan krijgen die correspondeert met het aantal reeds in de winkelwagen gelegde aantal bestellingen?
Dat zie ik veel bij andere shopsites en lijkt mij prettig voor mijn klanten. Ik zie wel de elementor woocommerce widget opmerking staan: “Het winkelmandje tonen (bv. in de header)” maar dat heb ik al en wil alleen een cijfer erbij hebben staan. Benieuwd of jij nog een tip hebt. Bedankt voor je mooie handleiding over elementor. Geweldig!!
Hoi Fulco,
Fijn om te horen dat je iets aan de artikelen hebt.
Als je de cart widget gebruikt, zou deze automatisch het aantal artikelen in het winkelmandje moeten tonen. Als dit niet werkt, kun je proberen van thema te wisselen. Ik weet niet welke je op dit moment gebruikt? Als je nog geen Hello van Elementor gebruikt, zou ik daar naar switchen.
Als het daarna nog niet werkt, kun je het beste even contact opnemen met Elementor support.
Veel succes!