WooCommerce voegt e-commerce functionaliteit toe aan een WordPress site, maar wat gebeurt er als je meer zoekt dan de ingebouwde ontwerptools van WooCommerce?
Zoals je misschien al hebt ontdekt, beperkt WooCommerce je ontwerpmogelijkheden, vooral voor productpagina’s en het afrekengedeelte.
Dat is waar de WooCommerce Elementor integratie om de hoek komt kijken: het biedt drag-and-drop functionaliteit, creatieve controle over alle WooCommerce pagina’s en ondersteuning voor geavanceerde Elementor WooCommerce addons en thema’s die je anders misschien niet zou gebruiken.
In deze gids verkennen we de basisprincipes achter WooCommerce en Elementor, hoe ze samenwerken en hoe je een prachtige e-commerce site kunt maken met de WooCommerce Elementor combinatie. Lees verder om aan de slag te gaan.
Wat is WooCommerce?
WooCommerce is een plugin voor WordPress die van elke standaard WordPress installatie een e-commerce site maakt.
Het is de populairste oplossing voor het runnen van een online winkel op WordPress vanwege de snelle integratie in het WordPress ecosysteem, een robuuste verzameling ondersteunde e-commerce thema’s en geavanceerde ontwikkelingsflexibiliteit.
Hier zijn enkele belangrijke features van WooCommerce:
- Verkoop van digitale en fysieke producten: WooCommerce ondersteunt ook een groot aantal andere producttypes, waaronder abonnementen, variabele producten, affiliateproducten en gegroepeerde producten.
- E-commerce winkelbeheer: WooCommerce regelt bestellingen, productvoorraad en alle contacten binnen het dashboard.
- Geautomatiseerde creatie van essentiële e-commerce pagina’s: Je krijgt een Shop-pagina, een Winkelwagen-pagina, een Mijn Account-pagina en nog veel meer zodra je WooCommerce op je site activeert.
- Uitbreidbaarheid en schaalbaarheid: Er is een groot ecosysteem van plugins, extensies en add-ons voor WooCommerce, waardoor je nieuwe features kunt toevoegen die niet ingebouwd zijn. Het is ook gemakkelijk om een bedrijf op te schalen met WooCommerce dankzij de ondersteuning voor grote hoeveelheden bestellingen, producten en andere gegevens.
- Community en ondersteuning: Hoewel er geen directe menselijke ondersteuning is, heeft WooCommerce een grote gemeenschap van actieve developers en gebruikers, en het internet staat vol met forums en tutorials om oplossingen te vinden.
- Betalingen, verzending en belastingen: Kies uit honderden betalingsverwerkers en maak een koppeling met de pakketdienst van je voorkeur. Je kunt zelfs belastingen instellen op basis van zones.
- Analytische gegevens: Er zijn maar weinig e-commerce platforms die kunnen concurrreren met de robuuste set rapporten en analyses van WooCommerce. Track de prestaties van je winkel het hele jaar door en analyseer alles van klantenacties tot dagelijkse omzet.
Over het geheel genomen biedt WooCommerce een breed scala aan features , waardoor het de meest gebruikte e-commerce plugin voor WordPress is. Dat gezegd hebbende, er zijn andere e-commerce plugins die je kunt overwegen en die we aanraden voordat je helemaal voor WooCommerce kiest.
Waar wordt Elementor voor gebruikt?
Elementor wordt gebruikt voor het eenvoudig beheren van het ontwerp van elke WordPress website. Het integreert soepel met WooCommerce. Op deze manier kun je elementen van je WooCommerce winkel aanpassen die normaal gesproken geen bewerkingsmogelijkheden hebben.
Elementor helpt je bijvoorbeeld bij het aanpassen:
- De WooCommerce Shop pagina
- Product pagina’s
- De pagina’s Afrekenen en Winkelwagen
- De Mijn Account pagina
- De winkelpagina
Elementor biedt een drag-and-drop bewerkingservaring, wat zorgt voor een visuele ontwerpinterface die voornamelijk gebruikmaakt van de computermuis, in plaats van computercode of geavanceerde ontwikkelinstellingen.
De drag-and-drop editor maakt het niet alleen mogelijk om de bovenstaande pagina’s aan te passen, maar biedt ook meer controle over het ontwerp van elk onderdeel van je website.
Je kunt bijvoorbeeld binnen enkele seconden de homepage aanpassen of een Coming Soon pagina toevoegen, allemaal dankzij de pagina- en sectiestemplates die met Elementor worden meegeleverd.
Over het geheel genomen biedt Elementor:
- Een drag-and-drop bouwer met WooCommerce blokken
- Kant-en-klare templates voor e-commerce
- Een specifieke WooCommerce Builder tool met widgets en features speciaal voor e-commerce elementen
- Geavanceerde styling voor elk blok, sectie en pagina gemaakt in WooCommerce
Door het gebruiksgemak van Elementor met WooCommerce wordt de plugin gebruikt door developers en site-eigenaren over de hele wereld om sterk aangepaste online winkels te maken.
Werkt WooCommerce met Elementor?
Ja, Elementor is ontworpen om samen te werken met de WooCommerce plugin.
Elementor wordt zelfs verkocht als een product dat:
- Minder plugins nodig heeft voor WooCommerce
- Conversies verhoogt (met kant-en-klare, geoptimaliseerde WooCommerce secties en thema’s)
- Helpt bij het visualiseren van de ontwikkeling van online winkels zonder dat je code nodig hebt
Elementor wordt ook geleverd met verschillende WooCommerce widgets.
Hier is een lijst met een aantal WooCommerce Elementor widgets:
- Product Meta
- Short Description
- Product Breadcrumbs
- My Account
- Cart
- Menu Cart
- Product Stock
- Add To Cart
- Product Rating
- En nog veel meer
Op het gebied van het aanpassen van het ontwerp kun je met Elementor delen van een WooCommerce winkel aanpassen die voorheen meestal niet aangepast konden worden. Met Elementor kun je de Checkout, Purchase Summary, My Account pagina, Product pagina’s, Cart en nog veel meer aanpassen.
Samen met volledige WooCommerce websitepakketten en een feature waarmee je een checkout van één pagina maakt voor WooCommerce, kun je gerust zeggen dat WooCommerce en Elementor goed samenwerken.
Waarom zou je Elementor gebruiken voor WooCommerce websites?
WooCommerce gebruiken zonder Elementor is prima. Het is nog steeds een krachtig e-commerce platform voor de overgrote meerderheid van de bedrijven. Je zult echter merken dat de aanpassingsmogelijkheden beperkt zijn zonder Elementor, en je zult meer tijd kwijt zijn aan het ontwikkelen van je website.
Hier zijn de belangrijkste redenen om Elementor met WooCommerce te gebruiken:
Verbeterd visueel ontwerp
WordPress heeft zijn Gutenberg paginabouwer, maar Elementor breidt die functionaliteit uit met een groter aantal blokken en voorgebouwde secties.
Aanpassing van niet-wijzigbare WooCommerce pagina’s
Van de winkelwagenpagina tot de pagina Mijn account, met Elementor kun je verschillende WooCommerce pagina’s aanpassen die normaal op slot zitten. Je kunt ook bijna elk aspect van productpagina’s aanpassen.
Conversiegerichte ontwerpen
Alle Elementor elementen zijn responsief en veel van de WooCommerce widgets en blokken zijn speciaal gemaakt om de verkoop te boosten, zoals de prijstabellen, testimonials en countdowntimers.
Naadloze integratie met WooCommerce
Elementors werkt perfect samen met WooCommerce, en dat betekent een groot ecosysteem van WooCommerce-compatibele thema’s en add-ons die speciaal zijn gemaakt voor het bouwen van Elementor pagina’s.
Tijdbesparend en kosteneffectief
De vooraf ontworpen templates, blokken en secties van Elementor maken aangepaste codering en vervelende handmatige configuratie overbodig. Het kost maar een paar minuten om professioneel ogende e-commerce pagina’s te bouwen. Dit bespaart op mogelijke ontwikkelingskosten en tijd die je kwijt bent aan het bouwen van je webwinkel.
Met dit soort voordelen raden we je aan om altijd Elementor (of een andere paginabouwer die je fijn vindt) te gebruiken bij het bouwen van een site met WooCommerce.
Hoe maak je een e-commerce website met Elementor en WooCommerce?
Elementor en WooCommerce vormen de beste combinatie van tools voor het bouwen van een e-commerce site op WordPress. In deze gids leggen we alle stappen uit die nodig zijn om een online winkel te maken met deze twee.
1. Installeer WooCommerce en Elementor
Om te beginnen moet je beschikken over:
- WordPress
- Hosting (bij voorkeur een krachtige, managed hostingoplossing zoals Kinsta)
Installeer WordPress op je host. Kinsta biedt een één-klik installatie voor WordPress.
Met alle elementen op hun plek, installeer je nu de WooCommerce plugin. Gebruikers van Kinsta Hosting hebben het voordeel dat WooCommerce automatisch wordt geïnstalleerd bij het aanmaken van een account.
Voeg anders de gratis WooCommerce plugin toe aan je WordPress site.
Je kunt ook leren hoe je WooCommerce met zo min mogelijk moeite op je site kunt instellen. Zorg ervoor dat je WooCommerce activeert en doorloop de configuratiestappen.
Zodra je klaar bent, zie je een WooCommerce tabblad in WordPress en links om producten toe te voegen, betalingen in te stellen, belastingtarieven toe te voegen en meer.
Het laatste deel van deze stap bestaat uit het installeren en activeren van de Elementor Page Builder. Installeer de gratis versie van Elementor of doorloop de stappen voor het kopen en downloaden van Elementor Pro.
2. Voeg een Elementor WooCommerce thema toe
WooCommerce is compatibel met de overgrote meerderheid van de WordPress thema’s. Hetzelfde kan gezegd worden van Elementor. Toch kun je het beste kiezen voor een multifunctioneel thema (waarmee je elk type website kunt bouwen) of een e-commerce georiënteerd thema. Op die manier zit je niet vast aan een blogthema als je een volwaardige webwinkel wilt bouwen.
Bekijk verder in dit artikel onze aanbevelingen van de beste WooCommerce Elementor thema’s om mee aan de slag te gaan. Je kunt ook online zoeken naar WooCommerce Elementor thema’s.
Zodra je het perfecte thema voor jouw behoeften hebt gevonden, installeer je het op je WordPress site.
3. Maak een WooCommerce homepage
Standaard wordt er geen homepage aangemaakt voor een WooCommerce winkel, zodat je die helemaal opnieuw moet maken. Om dit proces te versnellen kun je automatisch een homepage maken door naar WooCommerce > Home in WordPress te gaan. Klik op Create a custom homepage en pas hem aan je wensen aan.
Dit voegt een Homepage – Front Page toe die je aan kan passen.
Ga ten slotte naar Appearance > Customize en selecteer Homepage Settings. Kies A static page onder Your homepage displays. Selecteer Homepage in de vervolgkeuzelijst Homepage.
Hierdoor wordt die specifieke pagina je algemene startpagina en kun je deze aanpassen met Elementor of de Thema-aanpasser van WordPress.
Het ontwerp van je homepage (en de hele website in het algemeen) hangt af van het gekozen thema. Het Astra thema biedt bijvoorbeeld starter templates om binnen een paar seconden een prachtige online winkel te bouwen. Deze vind je onder Appearance > Starter templates (als je Astra gebruikt).
We raden je ook aan om de Theme Builder van Elementor te verkennen. Ga hiervoor naar Templates > Theme Builder.
Gebruik de optie Single page en klik op Add new. Gebruik de tabbladen Pages en Blocks om snel een professionele homepage of een andere pagina op je site te ontwerpen.
4. Voeg producten toe aan WooCommerce
Om een product toe te voegen aan WooCommerce ga je naar Products > Add new. Je hebt ook de optie om meerdere producten te importeren met een CSV bestand.
Vul alles in, van de Productnaam tot de Productbeschrijving en van de Prijs tot de Productcategorie. Klik op de knop Publish als je klaar bent met het product.
Je lijst met producten is altijd beschikbaar onder Products > All Products in WordPress.
5. Configureer verzending, betalingsgateways en belastingen
Het is belangrijk om essentiële zaken zoals betalingsverwerking, verzending en belastingregels in te stellen voordat je aankopen van klanten accepteert.
Deze vind je allemaal onder WooCommerce > Settings in WordPress.
Voor verzending ga je naar het tabblad Shipping. Klik op Add shipping zone. Hiermee kun je specifieke verzendtarieven instellen op basis van geografische zones.
Je kunt ook naar de onderkant van de pagina scrollen om de WooCommerce Shipping extensie te configureren, die afdrukbare USPS en DHL labels biedt.
Er zijn ook tal van andere WooCommerce verzendadd-ons en extensies beschikbaar voor verschillende regio’s, vervoerders en zendingsbeheer.
Om de verwerking van betalingen in te stellen, navigeer je naar het tabblad Payments onder WooCommerce Settings. Installeer de WooCommerce Payments extensie om betaalmethoden zoals creditcards en Apple Pay te accepteren.
Je kunt ook een andere betaaloplossing overwegen, zoals Stripe, Alipay of Klarna. Doorloop de gepresenteerde stappen om de betalingsverwerking te activeren, zoals het invoeren van je bedrijfsadres en het toevoegen van een betaalrekening om betalingen te ontvangen.
Ga voor belastingen naar het tabblad General onder WooCommerce. Zorg ervoor dat je je bedrijfsadres hebt ingevuld; belastingen en verzendtarieven worden op basis van dit adres berekend.
Scroll naar en vink het vakje Enable taxes aan om ze te berekenen op basis van je adres tijdens het afrekenen.
Nu verschijnt er een nieuw tabblad in de WooCommerce Settings met de naam Taxes. Selecteer dat om instellingen te configureren zoals extra belastingklassen, prijzen die met belasting worden ingevoerd en hoe belastingen moeten worden berekend.
Net als bij verzending zijn er verschillende belastinguitbreidingen voor WooCommerce die je kunt inschakelen voor meer geavanceerde features.
6. Een winkelpagina in WooCommerce maken met Elementor
Standaard genereert WooCommerce een winkelpagina voor je. Je kunt deze vinden door naar het tabblad Pages in WordPress te gaan.
Klik op Edit with Elementor. Er is ook een Template Kits knop van Elementor om snel een mooi ontwerp aan je Shop pagina toe te voegen.
Gebruik Elementor om de stijl en opmaak van de winkelpagina te bewerken, en overweeg om een templatekit in te voegen zodat het proces sneller verloopt.
Eenmaal klaar heb je een Shop pagina met een showcase van je producten, filtertools en een zoekbalk.
7. Stijlvolle productverzamelingen weergeven met Elementor
Om een productcollectie te maken – weergegeven op je homepage of als een aparte categoriepagina – raden we je aan de Elementor Theme Builder te gebruiken of een eenvoudige widget toe te voegen aan een bestaande pagina.
Kies in de Theme Builder voor Product Archive en sla vervolgens een van de layouts voor productverzamelingen op.
Je kunt deze templates toewijzen aan de pagina van je keuze of een geheel nieuwe pagina maken.
Aan de andere kant zou je naar een eerder gemaakte pagina kunnen gaan, deze openen in Elementor en de widget Products toevoegen aan een willekeurige sectie voor een prettig ogende verzameling van je producten.
Daarna biedt Elementor instellingen voor het aanpassen van het aantal kolommen, rijen en de hele stijl van de widget.
8. Productpagina’s aanpassen met Elementor
Productpagina’s worden op dezelfde manier beheerd als elke andere pagina in Elementor.
Een optie is om een willekeurig product in je inventaris te openen en op de knop Edit with Elementor te klikken.
Voor meer granulaire controle en om een ontwerp toe te voegen dat professioneel is gemaakt, ga je naar Templates > Theme Builder in WordPress. Selecteer het tabblad Single product en klik op Add new.
Je kunt kiezen voor blokken of pagina’s die speciaal ontworpen zijn voor WooCommerce productpagina’s.
Dit verbindt je met de Elementor Template bibliotheek. Daarna kun je elk van de productpagina-blokken of paginatemplates globaal of op individuele productpagina’s invoegen.
9. De WooCommerce kassa en winkelwagen aanpassen met Elementor
De volgende paar onderdelen hebben betrekking op het aanpassen van essentiële e-commerce pagina’s die automatisch door WooCommerce worden gegenereerd.
Standaard hebben deze pagina’s (zoals Checkout, Cart en My Account) beperkte bewerkingsmogelijkheden. Maar met Elementor heb je volledige controle over de opmaak, stijl en het algemene uiterlijk van elke pagina.
Om de pagina’s Kassa en Winkelwagen te bewerken, ga je naar Pages in WordPress. Scroll over de gewenste pagina en klik op Edit with Elementor.
Elementor Pro biedt vervangende widgets om de standaard winkelwagen/checkout van WooCommerce volledig te vervangen.
Zoek de widget Winkelwagen onder WooCommerce en voeg deze toe aan je ontwerp. Je kunt dan de standaard winkelwagen van WooCommerce verwijderen.
Vervolgens kun je de inhoud, stijl en geavanceerde instellingen voor de winkelwagen in Elementor bewerken. Op de pagina Winkelwagen kun je bijvoorbeeld de kleuren en lettertypen aanpassen zodat ze beter bij je merk passen.
Het is ook mogelijk om widgets toe te voegen voor extra tekst, aanbevolen producten of media terwijl klanten naar hun winkelwagen kijken. Er zijn zelfs tools om coupons, totalen en het besteloverzicht te bewerken.
Het bewerken van het Checkout-gedeelte gaat op een vergelijkbare manier, waarbij je de Checkout-pagina in Elementor opent en de Elementor Checkout widget naar de editor sleept. Dat vervangt de standaard kassamodule van WooCommerce, zolang je de oude maar verwijdert.
Eenmaal ingevoegd en geselecteerd, biedt de Checkout widget tabbladen voor Content, Style en Advanced instellingen.
Hiermee kun je elementen als de sectie Your order, en de details van Returning customer en Billing Details aanpassen. Je kunt de kleuren, stijlen, maten en meer aanpassen.
10. De pagina My Account aanpassen met WooCommerce en Elementor
Om de standaard Mijn Account pagina van WooCommerce aan te passen, open je Pagina’s in WordPress. Klik op Edit with Elementor nadat je over de pagina My Account hebt gescrolld.
Verwijder de oude My Account module en voeg de Elementor versie toe als widget onder WooCommerce.
Dit geeft je inhoudsinstellingen voor tabbladen en extra opties, samen met stijl en geavanceerde instellingen.
Je kunt bijvoorbeeld het randtype of de kleur op de pagina My Account wijzigen voor een meer merkrelevante uitstraling.
En zo maak je een online winkel met de WooCommerce Elementor integratie!
Vervolgens hebben we de beste Elementor WooCommerce thema’s en addons om je te helpen met het ontwerpproces.
De 11 beste Elementor WooCommerce thema’s
Bij het zoeken naar WooCommerce Elementor thema’s kun je je het beste richten op thema’s met:
- Ondersteuning voor zowel WooCommerce als Elementor
- Een responsief ontwerp
- Snel laden van pagina’s
- Compatibiliteit met alle belangrijke browsers
- De essentiële e-commerce features die je nodig hebt (je kunt de gaten opvullen met Elementor en WooCommerce)
- Een ontwerp dat bij je merk past
- Een strakke interface
- Hoge waarderingen en hoogwaardige klantenondersteuning/documentatie
Je kunt onze favoriete WooCommerce thema’s bekijken om te zien of er een geschikt is voor jouw merk. Je moet echter wel controleren of deze thema’s Elementor ondersteunen.
Aan de andere kant zou je kunnen gaan voor de absoluut snelste WooCommerce thema’s, waarbij je je eerst richt op snelheid voordat je iets anders doet. Het goede nieuws is dat de overgrote meerderheid van de thema’s werkt met zowel WooCommerce als Elementor.
We hebben een lijst van de beste Elementor thema’s; sommige daarvan zijn uitstekend voor WooCommerce, maar ze zijn niet allemaal geschikt voor webwinkels.
Tijdens ons jarenlange onderzoek naar WooCommerce thema’s zijn we uitgekomen bij de beste WooCommerce Elementor thema’s:
1. Astra
Astra biedt naadloze integratie met WooCommerce en naast Elementor functioneert het als een multifunctioneel thema voor het bouwen van elk type website, inclusief e-commerce winkels.
Het heeft een lichtgewicht, snelle basis, krachtige aanpassingsopties en enkele van de meest gebruiksvriendelijke features voor het bewerken van lettertypen, headers en footers.
2. Hello Elementor (met de Elementor WooCommerce Builder)
Hello Elementor is het officiële thema van Elementor. Het thema heeft een strak, eenvoudig ontwerp zonder franje, waardoor je in wezen elk type site kunt bouwen.
We raden je aan het te combineren met de Elementor WooCommerce Builder voor het maken van strakke en moderne WooCommerce websites, die tot de snelste behoren die er zijn.
3. OceanWP
Als multifunctioneel WordPress thema heeft OceanWP een WooCommerce integratie en directe ondersteuning voor de Elementor pagebuilder.
Je krijgt hoogwaardige klantenondersteuning, regelmatige updates en uitgebreide documentatie voor dit lichtgewicht en snelle WordPress thema.
Het is in hoge mate aanpasbaar om het uiterlijk van je e-commerce merk te verbeteren, met snelle instellingen om alles te bewerken, van kleuren tot lettertypen en layouts tot headers.
4. Shopkeeper
Shopkeeper is geen multifunctioneel thema, maar is direct gericht op eigenaren van e-commercewinkels. Veel van de infrastructuur voor e-commerce sites die we gewend zijn, is al gebouwd en klaar voor gebruik.
Er zijn kant-en-klare sjablonen voor specifieke e-commerce categorieën en een diepgaande WooCommerce integratie. Elementor werkt ook goed samen met het thema, zodat je layouts kunt aanpassen, de winkelwagen kunt bewerken en zo ongeveer elk facet van je online winkel kunt aanpassen.
5. Zakra
Het Zakra thema biedt startersdemo’s om het maken van een winkel te versnellen. Het integreert met Elementor en WooCommerce en biedt nichedemo’s die je met één klik kunt implementeren.
Het wordt beschouwd als een van de snelste multifunctionele thema’s op de markt en je krijgt controle over kleurenschema’s, lettertypen en layoutvariaties.
6. Storefront
Storefront is misschien wel een van de meest veelzijdige gratis e-commerce thema’s om uit te kiezen en bevat een groot aantal features voor online winkels.
Het thema is ontwikkeld door dezelfde mensen van WooCommerce, dus je weet dat het bedoeld is om soepel samen te werken met de e-commerce plugin. Het werkt ook goed met Elementor en biedt een eenvoud die je elders bij andere e-commercethema’s niet vindt.
7. ShopIsle Pro
Het ShopIsle Pro thema is een premium oplossing met geavanceerde typografie, kant-en-klare e-commerce demo’s en diepgaande integratie met Elementor en WooCommerce.
In combinatie met de Elementor WooCommerce Builder kun je een elegant ontwerp maken voor elke webwinkel, lettertypen en headers aanpassen en binnen enkele minuten een webwinkel lanceren. En dat niet alleen, je krijgt ook uitstekende klantenondersteuning en themadocumentatie.
8. Neve
Het Neve thema biedt multifunctionele functionaliteit met een snelle en lichte interface. Met Elementor kun je een website bouwen voor elke branche, vooral in de e-commerce wereld.
Het thema helpt bij het toevoegen van een snelle weergave van producten, samen met winkelwagenmeldingen en off-canvas winkelfilters. We vinden het ook fijn voor het aanpassen van WooCommerce winkelwagen layouts of het opzetten van een sticky winkelwagen.
Het Neve-thema wordt geleverd met een groot aantal startsites die speciaal zijn gemaakt voor e-commercewinkels.
9. Customify
Het idee achter het Customify thema is om vrijwel elk type website, blog of online winkel te bouwen, omdat het diepe aanpassingsmogelijkheden biedt voor stijlen, lettertypen en widgetgebieden.
Voor een online winkel kun je met de WooCommerce Elementor integratie eenvoudig producten laten zien en de hele kassa-ervaring bewerken zonder enige kennis van codering.
10. GeneratePress
Het GeneratePress WordPress thema is een multifunctionele oplossing met ondersteuning voor WooCommerce en Elementor. Het belangrijkste voordeel ten opzichte van andere thema’s is het lichte gewicht, maar ook het modulaire ontwerp.
Daarom kun je in wezen modules in- en uitschakelen afhankelijk van je behoeften en de live customizer gebruiken voor de grootst mogelijke controle over de ontwerpvereisten van je merk.
11. Phlox
Het Phlox WordPress thema is nog zo’n multifunctioneel thema dat een sterke sitebouwervaring biedt voor WooCommerce en Elementor developers.
Alle one-click demo’s passen direct in het ontwerp en ze zorgen voor een modern uiterlijk zonder dat je er veel werk aan hebt. Je kunt ook de meeste aspecten van een online winkel aanpassen, van het winkelwagentje tot hoe de producten worden weergegeven op een mobiel apparaat.
We raden je aan om deze thema’s te verkennen en ze uit te testen in WooCommerce en Elementor. Bij het maken van je keuze wil je misschien totale controle, wat betekent dat een multifunctioneel thema geschikt voor je kan zijn.
Andere gebruikers willen echter dat hun thema er vanaf het begin uitziet en zich gedraagt als een e-commerce site. Kies in dat geval voor een thema als Storefront of ShopIsle Pro voor een meer op e-commerce gerichte ervaring.
Je kunt ook kijken naar WooCommerce addons voor Elementor om het aantal widgets en functies in Elementor uit te breiden. Bekijk ze hieronder.
Top 5 WooCommerce addons voor Elementor
Er zijn verschillende essentiële WooCommerce plugins om vanaf het begin aan je winkel toe te voegen. We raden je echter aan om te kijken naar nog specifiekere add-ons en plugins die niet alleen integreren met WooCommerce, maar ook de features van Elementor uitbreiden.
Hier zijn onze favoriete WooCommerce Elementor addons:
1. HappyAddons
De HappyAddons plugin is eigenlijk een verzameling widgets en add-ons die speciaal zijn gemaakt voor Elementor. Enkele widget voorbeelden van HappyAddons zijn een megamenu, one-page navigatie, een WooCommerce winkelwagen en een blogpost kit.
Enkele WooCommerce-specifieke widgets zijn voor productcarrousels, rasters, kassa’s en minikaartjes. Er zijn zelfs widgets om andere facetten van je webwinkel te verbeteren, zoals blogberichten, grafieken, marketing en sociale media.
2. PowerPack for Elementor
PowerPack for Elementor biedt een breed scala aan unieke widgets voor WooCommerce sites die Elementor gebruiken. Met meer dan 70 Elementor widgets kun je breadcrumbs, testimonials, knoppen en nog veel meer toevoegen.
Er is een templatebibliotheek om meteen ontwerpen toe te voegen en speciale WooCommerce widgets voor zaken als de Mijn account-pagina, de styler voor de afrekenpagina en de knop Toevoegen aan winkelwagentje.
3. WooLentor
WooLentor is een addon voor de Elementor page builder, omdat het de WooCommerce page builder verbetert en functies biedt voor e-mailaanpassingen.
De add-on bevat een kassaveldmanager en opties om gedeeltelijke betalingen van klanten te accepteren. Er is zelfs een optie voor klanten om prijzen voor te stellen of om een speciale dagaanbieding te doen.
4. Essential Addons for Elementor
De Essential Addons oplossing heeft een gratis en een premium versie. Deze addon verbetert de paginabouwervaring in Elementor met widgets voor prijstabellen, productroosters, oproepen tot actie en meer.
Enkele van de premium elementen zijn een geavanceerde Google Map, Instagram Feed en parallax ontwerpen.
5. JetWooBuilder
JetWooBuilder is een WooCommerce Elementor addon van Crocoblock, nog een Elementor addon die het bekijken waard is. Met de JetWooBuilder optie kun je elementen zoals aangepaste sjablonen, lay-out switchers en shop-specifieke pagina’s mixen en matchen.
Je kunt eenvoudig carrousel typen en categoriekaarten configureren terwijl je ook afzonderlijke productpagina’s kunt maken vanuit een strak sjabloon.
Het belangrijkste is misschien wel dat de JetWooBuilder addon je absolute controle geeft over je Shop pagina en je helpt geavanceerde slimme filters te configureren.
Wanneer Elementor Pro vs Elementor overwegen?
Je vraagt je misschien af: “Wat is het verschil tussen Elementor en Elementor Pro?”
Gelukkig is de gratis versie van Elementor behoorlijk krachtig en bevat deze de meeste functies die je nodig hebt om een website of online winkel te bouwen met drag-and-drop functionaliteit. Dat gezegd hebbende, de WooCommerce tools verbeteren drastisch als je upgrade naar Elementor Pro.
Laten we eerst eens kijken naar het prijsverschil tussen Elementor en Elementor Pro:
- Elementor: Gratis
- Elementor Pro: Vanaf $59 per jaar. Andere pakketten zijn $99, $199 en $399 per jaar
Upgrades zijn over het algemeen om extra websites te ondersteunen met hetzelfde Elementor abonnement, niet om meer functies te krijgen.
De overstap van Elementor naar Elementor Pro biedt echter wel nieuwe features.
Elementor (gratis) biedt:
- Basic aanpassing van de themabouwer
- Beperkte templates en blokken
- Templates exporteren en importeren
- Mobiel bewerken
- 40+ ontwerpelementen zoals getuigenissen, knoppen, pictogramvakken, teksteditors en meer
Dit is wat je krijgt met Elementor Pro (dat niet inbegrepen is bij Elementor Basic):
- Aanpassing van elk onderdeel van je thema
- Formulierontwerp en -integratie
- Alle professionele blokken en templates
- Alle professionele widgets
- Een popupbouwer
- Scrollingeffecten
- Header- en footerbouwer
- Meer dan 30 widget- en ontwerpelementen zoals blokcitaten, blogpaginering, countdown en mason-indeling
- WooCommerce-specifieke ontwerpelementen zoals WC Categories, WC Products en WC Add To Cart
Wanneer upgraden van Elementor naar Elementor Pro?
Het antwoord hierop is eenvoudig. Upgrade naar Elementor Pro:
- Als je de meeste WooCommerce Builder functionaliteit wilt, zoals bewerken en templates voor de Add To Cart sectie, Categorieën en Producten
- Als je volledige controle wilt over het aanpassen van je webwinkel
- Als je extra elementen wilt gaan gebruiken zoals een Ken Burns effect, Login widget of flipbox
Gebruikers van WooCommerce zouden op een gegeven moment echt moeten upgraden naar de Pro-versie van Elementor voor de beste ervaring.
Samenvatting
In dit artikel hebben we laten zien welke features WooCommerce en Elementor zo speciaal maken en hoe ze elkaar verbeteren als ze worden gecombineerd. We hebben ook stap voor stap uitgelegd hoe je een webwinkel kunt bouwen met de WooCommerce Elementor integratie.
Vergeet tijdens dat proces niet om onze lijst met de beste Elementor addons en thema’s te bekijken. Zo heb je een voorsprong op degenen die hun winkel helemaal opnieuw ontwerpen.
Houd in gedachten dat het essentieel is om een snelle en veilige hostingoplossing zoals Kinsta te kiezen voor elke e-commerce operatie. Kinsta biedt ook Elementor hosting, die wordt aangedreven door de C2 machines van Google Cloud om de best mogelijke prestaties te leveren.
Wat zou je nog meer willen weten over WooCommerce en Elementor? Laat het ons weten in de commentsectie hieronder.
Laat een reactie achter