Je bent een ondernemer en je wilt een webshop bouwen. Dat kan heel eenvoudig met standaardsjablonen, of je kiest ervoor om je eigen digitale winkel te ontwerpen. In dat geval zijn Divi en Woocommerce je beste vrienden. In dit artikel krijg je antwoord op de vraag: hoe maak je een webshop in Divi?

Shoppen op het net is vandaag de dag net zo normaal als even iets gaan halen in de supermarkt om de hoek. Steeds meer handelaars kiezen ervoor om een webshop te openen. Dit is dan ook steeds gemakkelijker geworden. Zo gemakkelijk zelfs dat je met diensten als Jouwweb zelfs zonder voorkennis een complete webshop uit de grond kan stampen. Maar wil je echt controle op het ontwerp en het er laten uitzien zoals jij het wilt? Dan ben je eerder aangewezen op een WordPress thema en bouwer als Divi en een e-commerce plugin als Woocommerce.

Divi is superhandige software waarmee je op een heel visuele manier een website kan bouwen. Als je visueel bent ingesteld, zoals ik, dan kan ik je dat van harte aanbevelen: what you is what you get. En Woocommerce raad ik ook aan, omdat het net als WordPress zelf open source is: de broncode is openbaar zodat ontwikkelaars dit altijd maar kunen blijven verbeteren. De ontwikkeling staat dus nooit stil.

Maar, hoe begin je hier nu aan? Ik deel hieronder de stappen met je.

Op zoek naar andere tips voor Divi? Lees hier hoe je een header in Divi bouwt. Of ontdek hier hoe je een blog in Divi maakt.

1. Download de plugin Woocommerce

Dit is open source, dus ook nog eens volkomen gratis. Je vindt deze door op “add new” te klikken bij plugins. Je zoekt op “Woocommerce” en je downloadt deze.

2. Activeer Woocommerce en stel het in

Dit kun je vanuit het plugin-overzicht doen. Je drukt op “activate”. Vervolgens kun je de stappen in de wizard doorlopen. Je kan dit ook overslaan en later doen door te navigeren naar Woocommerce in het Dashboard. Daar kan je alle instellingen onder “settings” terugvinden. Zeer belangrijk om te doen is Woocommerce aangeven dat je met Divi werkt. Dit geef je aan in dit stappenplan. Ook kun je dan al aangeven in welke munteenheid je gaat werken, in welke regio’s je wilt verkopen, of je met tegoedbonnen gaat werken, enzovoorts. Weet je iets nog niet? Geen probleem, je kan dat later alsnog aanvullen.

3. De Woocommerce-pagina’s customizen

Zodra je Woocommerce geïnstalleerd hebt, is je website ook ineens vijf pagina’s rijker: shop, cart, checkout, my account en refund and returns policy. Heel handig dat deze er al zijn! Minder leuk is dat deze de standaard layout van Divi hebben en die is op zich niet zo mooi. Je zult deze pagina’s dus moeten aanpassen of moeten overschrijven. Aan jou de keuze.

Mogelijkheid 1: de Woocommerce-pagina’s aanpassen

Dit is op zich het gemakkelijkst. Je kan de standaard layout van Woocommerce in Divi gebruiken en naar je hand zetten. Je doet dat als volgt: ga naar je pagina-overzicht via het dashboard. Zoek de bewuste pagina en druk op “edit”. Als je dit een eerste keer doet, dan kom je in de standaard WordPress editor uit. Aan de rechterkant kan je aangeven of je wel of geen sidebar wilt. Zelf doe ik dat meestal niet, omdat deze doorgaans de traditionele lay-out bevat. Vervolgens moet je Divi de boel over laten nemen. Je doet dat door te drukken op “edit in Divi”. Dan opent het standaard Divi venster zich en je geeft aan dat je “from scratch” wil werken. Je ziet de Woocommerce standaard lay-out verschijnen. Dit is zichtbaar als een module. Als je eroverheen schuift met de muis, kun je klikken op het tandwieltje voor de instellingen. Nu opent zich het venster waarmee je de layout naar je hand kan zetten: de huisstijl van de website kan je overnemen. Voordeel van deze werkwijze: het gaat snel. Nadeel van deze werkwijze: je kan niet eventjes iets snel van plaats verschuiven.

Mogelijkheid 2: de Woocommerce-pagina’s overschrijven

Vind je standaardontwerpen van Woocommerce in Divi maar niks, dan kan je ook zelf je eigen sjabloonpagina’s ontwerpen. Je doet dat door naar de theme builder te gaan. Je vindt die links in je dashoard. Je drukt op “add new template” en je kan kiezen uit “product pages”. Wil je dat alle productpagina’s er hetzelfde uitzien? Dan kan je hier een heel mooie productpagina maken. Kies vervolgens op “from scratch” nadat je op de pen hebt gedrukt en je komt op een blanco pagina uit. Weet je niet waar alles staat? Geen paniek, voeg een Woo module toe. Je vindt die door te zoeken op het trefwoord “woo”. Nu zie je allerlei Woocommerce modules om uit te kiezen. En je kan, in tegenstelling tot de vorige methode, ook nog eens kiezen waar je welke onderdeel plaatst! Zodra je je pagina hebt aangemaakt, neemt jouw ontwerp de standaardpagina gewoon over. Voordeel: je kan dit supergoed aanpassen. Nadeel: hier kruipt best veel tijd in omdat je goed moet weten welk onderdeel waar hoort.

4. De producten invoeren

In je dashboard vind je links het trefwoord “producten”. Klik op “Nieuw toevoegen” en je komt in een standaard Woocommerce veld. Geen paniek, na publicatie verschijnt dit in je Divi lay-out. Je kan hier alles invoeren, van titel en beschrijving tot prijs, foto’s, tags en categorieën. Na op de knop “publiceren” te drukken, kun je je product bekijken in jouw Divi lay-out!

5. Je producten ordenen

Heb je veel producten? Dan raad ik je aan om met categorieën en misschien zelfs tags te werken. Opgelet: je hebt nu in WordPress gewone tags en categories, maar die moet je nu niet hebben. Nu moet je werken met “product tag” en “product category”, zo begrijpt Woocommerce dat je de producten gaat groeperen. Wil je specifieke categoriepagina’s ontwerpen? Ook dat kan! Dat doe je door terug stap 3b te herhalen en te opteren voor “product category page”. Na publicatie zie je de producten op jouw manier geordend staan!

6. Een betaalsysteem koppelen

Zonder kassa heb je geen winkel. Daarom heeft je Woocommerce shop ook een betaalsysteem nodig. In de lage landen wordt er bijvoorbeeld veel gewerkt met Stripe en Mollie. Deze systemen zorgen ervoor dat je zowel met Bancontact, iDeal, Mastercard, Creditcard en andere (digitale) kaarten kan betalen. Kies je betaalsysteem uit en maak een account aan. Vervolgens ga je terug naar je plugin-pagina en zoek je de plugin voor jouw betaalsysteem uit. Als je bijvoorbeeld Stripe voor Woocommerce installeert, kun je door middel van deze plugin Woocommerce met het betaalsysteem Stripe koppelen. Je kan dat doen door eenvoudigweg in te loggen met jouw klantgegevens. Tot slot kies je nog welke betaalsystemen je open wilt zetten.

7. Je webshop testen

Zorg ervoor dat je betaalsysteem nog op “testen” staat. Publiceer je website met webshop en doe alsof je een klant bent. Kies een willekeurig product uit je webshop, voer je klantgegevens in, doe alsof je betaalt en kijk wat er gebeurt. Verloopt alles vlekkeloos en krijg je ook een mailtje van bijvoorbeeld Stripe? Dan zit je goed! Je kan je webshop op “live” zetten!

En waarmee bouw jij een webshop?

Op de hoogte blijven van mijn nieuwste blogs? Schrijf je nu in voor mijn nieuwsbrief!

Op zoek naar gratis website tips? Boek nu een gratis webdesign sessie!