Handleiding WordPress Webshop maken met WooCommerce en Divi

In mijn column “Webshop maken met Divi en WooCommerce” heb ik globaal de mogelijkheden van het maken van een webshop in WordPress met de page builder Divi en de plugin WooCommerce beschreven. Ook heb ik verschillende WooCommerce modules van Divi globaal beschreven.

In deze column neem ik u stap-voor-stap mee int het maken van een webshop. Hierbij maken we onder andere gebruik van de Divi themabouwer.

Voor het maken van deze gratis handleiding webshop bouwen heb ik video-instructies van Youtube gebruikt. Helaas heb ik er nog geen tijd voor gehad om zelf een video te maken. In elke video heb ik met behulp van een html-code ingesteld dat u slecht een beperkt deel van de video ziet, namelijk het onderdeel waar we op dat ogenblik mee bezig zijn. Deze code werkt maar éénmalig. Het is dus belangrijk dat u slecht één keer op rode playknop in het midden van de video klikt. U ziet dan enkel het fragment wat dan van toepassing is. Dit is veelal een deel van een video.

Wat heeft u nodig bij het volgen van deze gratis handleiding WordPress webshop?

Voor het volgen van deze gratis handleiding heeft u slechts het volgende nodig:

1. U heeft het WordPress thema Divi van Elegant Themes gekocht. Heeft u dit nog niet, maak dan gebruik van de 20% korting door op de knop in het menu te klikken.
2. U heeft het WordPress Thema Divi van Elegant Themes al geïnstalleerd. Heeft u uitleg nodig voor het installeren van Divi, bekijk dan de instructie-video Divi installeren en updaten.
3. U heeft de plugin WooCommerce NOG NIET geïnstalleerd. Wacht hiermee totdat u leest dat u deze moet installeren!
4. Omdat u mogelijk de handelingen in de instructievideo’s na willen doen, heeft u de afbeeldingen nodig die hierin gebruikt worden. Deze afbeeldingen kunt u hier downloaden als zipbestand. U kunt dit zipbestand vervolgens op uw computer uitpakken en de afbeeldingen uploaden naar uw WordPress media bibliotheek. Upload dus niet het zipbestand, want dit werkt niet!

Wilt u meer leren over het WordPress Thema Divi? Bekijk dan de gratis cursus Divi of lees mijn columns over Divi. Natuurlijk staat er ook veel informatie op de website van Elegant Themes.

 In oefening 1 voeren we het volgende uit:

• We bekijken een deel van de instructievideo hieronder.
• We starten met het ontwikkelen van een startpagina voor uw webshop.
• We starten met het maken van een nieuwe lege pagina “Build from scratch”.
• In de video krijgen we eerst nog uitleg over hoe rijen en modules werken in Divi.
• Daarna verwijderen we de standaard sectie op onze startpagina en beginnen we opnieuw.
• We voegen een nieuwe sectie in, namelijk een “Volle breedte” sectie welke over de volledige breedte van de pagina gaat.
• Vervolgens gebruiken we in deze sectie de module “Volle breedte Header”.
• We volgens de instructie in de video, maar voegen dan wel Nederlandse teksten in:
  “Geniet van de trends in de zomer” en “Bekijk de nieuwste collectie”.
• Als we bij de instellingen van de module “Volle breedte Header” zijn (is ook altijd te benaderen via het tandwieltje), voegen we in het onderdeel afbeeldingen, bij “Logo afbeelding”, de gewenste afbeelding in. Deze halen we uit onze bibliotheek, waar we de afbeeldingen uit het zipbestand hebben toegevoegd.
• Daarna passen we bij het onderdeel “Achtergrond” de achtergrond aan. We voegen hier volgens de instructie de foto van de twee jonge dames in.
• We krijgen vervolgens uitleg waar gratis stockfoto’s vandaan kunt halen. Dit zijn: Freepik, Pixabay en Unsplash.
• We krijgen daarna uitleg wat het Parralax effect is. Als u dit inschakeld, zal de achtergrondafbeelding vast blijven staan als u scrollt.
• Daarna klikken we in het scherm van de module op het tabblad “Ontwerp” (in de video noemt hij Design).
• Bij het onderdeel “Layout” stellen we in dat we de tekst en het logo in het midden uitlijnen. Ook maken we dit schermvullend.
• Daarna gaan we naar de optie “Pictogram Omlaag scrollen” en deze zetten we aan. We maken het pictogram van de zwart.
• Vervolgens gaan we naar het onderdeel “Tekst” en maken deze donder. Daarna veranderen we de het lettertype in “Poppins”.
• We maken vervolgens de tekst vetgedrukt (Bold). Dit doen we in het onderdeel “Titel Tekst” bij “Titel Zwak Licht”. Hier selecteren we “Vetgedrukte tekst”.
• Bij “Titel Tekst Grootte” veranderen we de grootte in 44px.
• We wijzingen de ondertitel. Bij het onderdeel “Corp Tekst” gaan we naar “Corp Zwak licht” en kiezen we “Light”. Daarna passen we de “Corp Tekstkleur” aan naar zwart.
• Daarna gaan we naar het onderdeel “Knop” en we zetten de optie “Aangepaste stijlen gebruiken voor Knop” aan. We selecteren bij “Knop Tekstkleur” de kleur zwart.
• We zijn vervolgens klaar met het maken van de header voor onze startpagina van de webshop.

In oefening 2 voeren we het volgende uit:

• Onder de gemaakte header gaan we een nieuwe sectie aanmaken met daarin drie call-to-action knoppen.
• Dit doen we door op het paarse icoontje met het plussymbool te klikken.
• We kiezen een “Standaard” sectie.
• We kiezen een rij die bestaat uit drie kolommen.
• We voegen hier vervolgens de module “Oproep tot actie” in (call-to-action).
• Volgens de instructie, voegen we bij het onderdeel “Titel” het volgende in: 2020 Schoenen Collectie.
• Bij het onderdeel “Knop” typen we: Bekijk het assortiment!
• Bij het onderdeel “Link” vullen we bij “Knop URL” het teken # in, zodat de knop zichtbaar wordt.
• We verwijderen vervolgens zoals in de video de tekst.
• We kopiëren vervolgens twee keer de module en verplaatsen deze naar de beschreven kolommen.
• Vervolgens gaan de de achtergrond van de “Oproep tot actie” aanpassen.
• We maken vervolgens de Titel Tekst en de tekst van de knop zwart. We klikken hiervoor op het tandwieltje van de module “Oproep tot actie” en selecteren het tabblad “Ontwerp”.
• We gaan vervolgens naar het onderdeel “Titel Tekst” en maken deze zwart.
• Daarna gaan we naar het onderdeel “Knop” en zetten het onderdeel “Aangepaste stijlen gebruiken voor Knop” aan. We maken de knop vervolgens zwart.
• We hebben nu bij de eerste “Oproep tot actie” de tekst en de knop zwart gemaakt. We gaan dit nu ook doen bij de andere knoppen. We volgen niet de instructie in de video, maar klikken bij de eerste aangepaste module “Oproep tot actie” rechtsboven op de drie verticale stippen.
• Er verschijnt vervolgens een zwart menu. Hierin klikken we op “Kopiëren Module Stijlen”.
• We klikken vervolgens op de drie verticale stippen van de volgende module “Oproep tot actie”. Ook hier verschijnt dan het menu en we klikken op “Plakken Module Stijlen”. Vervolgens worden zowel de tekst als de knop zwart.
• Dit doen we daarna ook voor de derde en laatste “Oproep tot actie”.
• Omdat we de modules “Oproep tot actie” over de gehele breedte van het scherm willen hebben, gaan we de instellingen van de rij aanpassen. We selecteren de groene rij en klikken op het tandwieltje voor de rij-instellingen.
• We klikken vervolgens op het tabblad “Ontwerp” (Design) en gaan naar het onderdeel “Formaat wijzingen”. We zetten de functie “Het gebruik van aangepaste goot breedte” aan.
• We gaan vervolgens de ruimte tussen de Modules “Oproep tot actie” verkleinen. Dit doen we met het onderdeel “Kolomspatiëring”. Deze zetten we op 1, zodat de ruimte tussen de modules “Oproep tot actie” verdwijnt.
• Vervolgens gaan we naar het onderdeel “Maximale breedte” en passen dit aan naar 100%.
• Vervolgens gaan we naar het onderdeel “Maximale wijdte”. Anders dan in de video typen we hier niet het aantal px, maar typen we hier 100%. Deze sectie zal hierdoor altijd beeldvullend zijn.
• We willen vervolgens de grijze ruimte aan de bovenkant en onderkant verwijderen. Dit kunt u doen zoals in de video beschreven, maar dit kunt u ook exact doen. We gaan weer naar het tandwieltje van de rij en vervolgens naar het tabblad “Ontwerp”.
• We gaan nu naar het onderdeel “Afstand”. Hier voeren we bij Buffer bovenkant en Buffer Onderkant het getal nul in. We zien nu dat de ruimte aan zowel de onderkant als bovenkant van de rij verdwijnt. Door dit via deze optie te doen, weet u exact dat u dit bij elke rij hetzelfde doet.
• Vervolgens gaat u bij de sectie Buffer bovenkant en onderkant ook op nul zetten. Dit doet u hetzelfde als we gedaan hebben bij de rij.
• Vervolgens gaan we de hoogte van de drie “Oproep tot actie” knoppen aanpassen. We zetten de Buffer margin van zowel de onderkant als bovenkant op 90. Dit kunt u doen door te schuiven, maar het gaat exact via de instellingen.

In oefening 3 voeren we het volgende uit:

• We gaan een nieuwe sectie toevoegen. Dit doen we door het blauwe icoontje onderaan aan te klikken.
• We voeren hier vervolgens een rij in welke bestaat uit één kolom.
• We voegen vervolgens een tekst-module in.
• We wijzingen vervolgens de tekst in “Meest verkochte artikelen”.
• We wijzinge vervolgens het kenmerk van deze tekst door met de muis naar “Paragraph” te gaan en hier “Heading 1” aan te klikken.
• We gaan vervolgens naar het Tabblad “Ontwerp” en gaan naar het onderdeel “Tekst onderdtitel”.
• Omdat we hiervoor ingesteld hebben dat de tekst een heading 1 is, zorgen we ervoor dat we in dit scherm ook op op H1 staan.
• We selecteren vervolgens bij “Titel lettertype” het lettertype Poppins.
• Bij het onderdeel “Titel Zwak Licht” selecteren we “Vetgedrukte tekst”.
• Bij tekstuilijning selecteren we op het tweede icoontje, gecentreerd uitlijnen.
• We gaan vervolgens een nieuwe module toevoegen. We klikken hiervoor op het grijze icoontje en selecteren vervolgens de module “Shop”.
•  Omdat we nog geen producten hebben toegevoegd, zien we nu geen artikelen in de winkel (Shop). Onze volgende shop is dan ook het installeren van de plugin WooCommerce. 

In oefening 4 voeren we het volgende uit:

• We gaan in het WordPress Dashboard naar het Admin Menu.
• Hier gaan we naar plugins en klikken we op nieuwe plugin.
• In het zoekveld typen we WooCommerce. We klikken vervolgens op installeren en en activeren.
• We moeten vervolgens ons adres invoeren. We bevestigen dit door op de knop “Doorgaan” te klikken.
• We krijgen vervolgens de vraag of we gegeven met WooCommerce willen delen. Dit doen we niet. We klikken direct op de knop “Doorgaan”.
• We komen nu bij het onderdeel “Industry”. Hier geven we aan voor welke industrie we producten gaan verkopen. Dit mogen er meerdere zijn. We bevestigen dit weer met de knop “Doorgaan”.
• Bij het scherm “Product Types” vinken we alleen “Fysieke producten” aan. Hierdoor hoeven we niet maandelijks aan de makers van de plugin te betalen. We bevestiggen dit weer met de knop “Doorgaan”.
• Op het scherm Business Details krijgen we de vraag hoeveel producten we verkopen. Hier selecteren we 11 – 110.
• Bij de vraag of we ook ergens anders producten verkopen, antwoorden we Nee.
• Vervolgens krijgen we de optie om de volgende plugins te installeren:
  Facebook for WooCommerce, Mailchimp for WooCommerce en Google Ads. We zetten deze aan, zodat de plugins geïnstalleerd worden. We bevestigen dit scherm weer met de knop “Doorgaan”.
• Op het scherm “Thema” selecteren we de knop “Continue with my active theme” wat bij Divi staat.
• In een nieuw scherm krijgen we de vraag of we WooCommerce met Jetpack willen installeren, zodat we gebruik kunnen maken van diverse faciliteiten. Hier klikken we op de knop “Yes Please”.
• Zodra WooCommerce geïnstalleerd is, krijgen een popup met algemene informatie. Deze sluiten we.
• We komen vervolgens op het startscherm (home) van WooCommerce. Hier zien een scherm “Finish setup”. We gaan nu verschillende onderdelen instellen.  
• We klikken op het onderdeel “Personalize my store”.
  We kunnen vervolgens enkele voorbeelden van producten importeren van producten. Dit doen we.
• We krijgen de vraag of we een startpagina willen laten maken. Dit doen we niet, want we zijn al begonnen met een startpagina.
• We krijgen vervolgens de vraag of we een logo willen toevoegen. Dit doen we en we klikken op de knop “Proceed”.
• We krijgen de vraag of we een “Notice text” op alle pagina’s van de webwinkel willen laten verschijnen. Dit hoeft niet.
  We gaan nu naar de optie “Set up shipping”.
• De locatie van de winkel wordt aangemaakt met onze reeds ingevoerde adresgegevens.
• We moeten vervolgens het tarief voor verzendkosten invoeren. We gaan nu naar de website van Postnl. We zien dat de kosten van een pakket nu € 6,75 zijn. Dit bedrag voeren we dus in bij shipping kost. Let op, in dit scherm geen komma gebruiken maar een punt.
• De optie “Rest of the world” vinken we nu nog niet aan.
• We klikken op de knop “Complete task”.
• We gaan nu het juiste belastingtarief instellen. We klikken op de optie “Set up Tax”.
• Het adres van de winkel wordt weer automatisch ingeladen.
• We kunnen via WordPress.com laten uitrekenen wat ons belastingtarief is. We moeten hiervoor een account aanmaken bij WordPress.com en deze koppelen. We kunnen het tarief ook handmatig invoeren. We kiezen nu voor deze laatste optie en klikken op “Set up tax rates manually”.
• We komen nu in WooCommerce bij de instellingen. We staan op het tabblad “Belasting” en gaan hier een regel toevoegen. We klikken op de knop “Voeg rij toe”. 
• Bij de kolom landcode typen we NL of selecteren we Nederland.
• Bij de kolom Belasting in % voegen we 9 of 21 in.
• Bij de kolom Belastingnaam voegen we BTW in.
• Bij verzendmethode hanteren we het vinkje bij de btw berekening over de verzendkosten. De verkoper moet namelijk btw afdragen over de verzendkosten die hij in rekening brengt bij de klant.
• U klikt vervolgens op de knop “Wijzigingen opslaan”.
• We gaan binnen WooCommerce vervolgens terug naar Home om de instellingen af te maken.
• We gaan nu nog de optie “Set up payment” instellen. We klikken hierop.
• We zien vervolgens verschillende betalingsmethodes staan. We gaan gebruik maken van een betaalservice. We gaan hiervoor naar de website van Mollie en maken hier een account aan.
• We klikken vervolgens op de knop “Bekijk API keys”. We zien nu een test API key staan. Deze hebben we zo nodig om de mollie plugin te kunnen testen. We voeren onze gebruikersgegevens in. Mocht u nog geen KVK-nummer hebben, voeren we voor de test het volgende nummer in 68148046.
• Als u nog geen btw nummer heeft, voeren we hier tijdelijk het volgende nummer in: NL857321249B01.
• We selecteren bij Mollie de betalingsmogelijkheden van iDeal, Klarna en Paypal.
• We zien wat elke transactie bij deze betaalmethodes kosten en wat mollie per transactie voor kosten in rekening brengt.
• We hebben vervolgens de API key van mollie nodig in WooCommerce. We kopieeren nu de Test API key.
• We gaan nu eerst de plugin van Mollie installeren. We selecteren Mollie Payment for WooCommerce en klikken op installeren en daarna op activeren.
• We gaan vervolgens terug naar de instellingen van WooCommerce. In het Dashboard gaan we naar WooCommerce, Instellingen en dan naar “Betaling”. Nu zetten we de testmodus aan en voeren we de Test API code in.
• Bij betalingsmogelijkheden activeren we de volgende onderdelen: Mollie Ideal, Mollie Klarna achteraf aan en Mollie Paypal.
• We moeten vervolgens aangeven in welke valuta we betaald willen worden. Hier selecteren we euro.
• Vervolgens geeft u aan dat u zowel fysieke als digitale producten gaat verkopen.
• Bij het onderdeel betaling selecteren we alleen Paypal. Hier voert u uw email adres in, welke is gekoppeld aan uw Paypal account.

In oefening 5 voeren we het volgende uit:

• We bekijken de video-instructie en maken vervolgens enkele simpele producten aan.

In oefening 6 voeren we het volgende uit:

• We bekijken de video-instructie en maken ook enkele variabele producten.

In oefening 7 voeren we het volgende uit:

• We bekijken de video-instructie met uitleg over het hanteren van categoriën in WooCommerce.
• We passen het menu aan.

In oefening 8 voeren we het volgende uit:

• We bekijken de instructie in de video. Hierin wordt uitgelegd wat je allemaal kunt doen bij het opmaken van de shop-module.

In oefening 9 voeren we het volgende uit:

• We voegen een rij met twee kolommen toe. Hierin plaatsen we twee keer de module “Oproep tot actie”.
• Daarna voegen we een rij met drie kolommen toe. Hierin voegen we de module “Blurb”
• Als laatste voegen we een rij met twee kolommen toe. Hierin plaatsen we een tekst-module, verdeler-module, knop-module en een E-mail Opt-In module.

In oefening 10 voeren we het volgende uit:

• Standaard maakt de plugin WooCommerce een winkelpagina aan bij de installatie. Omdat deze pagina er niet echt mooi uitziet, maken we met behulp van de Divi themabouwer onze eigen winkelpagina.
• Elke winkelpagina biedt natuurlijk de mogelijkheid om te kunnen filteren op productcategorieën. Op onze zelfgemaakte winkelpagina voegen we dus ook een zijbalk in, met daarop verschillende widget van WooCommerce.

In oefening 11 voeren we het volgende uit:

We hebben hiervoor een eigen winkelpagina ontworpen. Als we echter bij een individueel product op de categorie klikken, dan komen we weer op de standaard winkelpagina van WooCommerce. Om dit te voorkomen, maken we een aangepaste winkelpagina voor productcategorieën.

In oefening 12 voeren we het volgende uit:

We maken met behulp van de Divi themabouwer een eigen lay-out voor de standaard productpagina.

In oefening 13 voeren we het volgende uit:

We maken met behulp van de Divi themabouwer een eigen lay-out voor de volgende pagina’s:

• Winkelwagen-pagina
• Checkout-pagina
• Account-pagina