Elegant Themes Divi – Webshop maken met Divi & WooCommerce

27 januari 2020

Wilt u in WordPress een webshop beginnen? Maak het uzelf dan gemakkelijk en gebruik hiervoor dan de Divi WooCommerce builder. In deze column informeer ik u uitgebreid over de mogelijkheden.

Wat heeft u nodig voor het maken van een Webhop in WordPress?

Voor het maken van een een webshop in WordPress heeft u slechts twee dingen nodig, namelijk:

  1. Het WordPress Thema Divi van Elegant Themes.
  2. De plugin WooCommerce

Wat is de Divi WooCommerce Builder voor WordPress?

Introductie Divi WooCommerce Builder (00:02:42 ) 2 minuten en 42 seconden

U kunt Divi Woo Modules ook gebruiken op de standaard WooCommerce productpagina

Divi werkt goed samen met de WordPress plugin WooCommerce

Het WordPress thema Divi werkt perfect samen met de plugin WooCommerce.  Met behulp van Divi kunt u de verschillende onderdelen van WooCommerce alsnog flexibel instellen en opmaken. Iets wat standaard niet mogelijk is.

Divi Woo Modules activeren op een nieuwe WooCommerce productpagina

Zodra u de plugin WooCommerce heeft geïnstalleerd en de productpagina van WooCommerce in de WordPress editor opent, krijgt u  de vraag of u de Divi Builder wilt gebruiken.  Als u dit bevestigd, zet Divi automatisch de verschillende WooCommerce onderdelen van de productpagina om in Divi Woo Modules. Een voorbeeld hiervan is bijvoorbeeld het onderdeel producttitel van WooCommerce. Dit onderdeel wordt vervangen door de Divi Woo Title Module, welke verschillende ontwerpmogelijkheden heeft.

Hieronder kunt u zien hoe Divi de layout van een productpagina omzet in verschillende Divi Woo Modules. Dit kunt u zien als u werkt in de backend van Divi.

Woocommerce Product Divi Opbouwfunctie

U kunt Divi Woo modules ook gebruiken in een bericht of gewone pagina

Een productvermelding op een gewone pagina via de frontend bekeken

De Divi Woo Modules kunt u toepassen op zowel berichten, standaard pagina’s als WooCommerce productpagina’s. Hieronder een voorbeeld van een standaard pagina via de frontend bekeken. 

Divi Woo Add To Cart Settings Pagina 3

Dezelfde pagina nu via de Divi raster optie bekeken

Bekijken we deze pagina via de backend van Divi, dan ziet deze er als volgt uit:

Divi Woocommerce Modules Standaard Pagina

Hoe ziet de layout van deze pagina er nu uit?

  • Bij de opmaak van de pagina is één sectie gebruikt.
  • Binnen deze sectie is één rij ingevoegd, welke bestaat uit twee kolommen.
  • Binnen de rij zijn vervolgens verschillende Divi Woo Modules toegevoegd. 

In de linker kolom zien we van boven naar onder de volgende Divi Woo modules:

  • Divi Woo Titel (title)
  • Divi Woo Omschrijving (description)
  • Divi Woo Prijs (price)
  • Divi Woo toevoegen aan winkelwagen (add to cart)
  • Divi Woo review

In de rechterkolom is enkel de Divi Woo afbeelding module toegevoegd. 

Hoe kunt u vervolgens één product hieraan koppelen?

U dient vervolgens nog een product te koppelen. Dit kunt u doen door bijvoorbeeld bij de Woo Add to cart Module op het tandwieltje te klikken. U krijgt vervolgens het scherm met daarop de tabbladen content, design en advanced. Op het tabblad content ziet u product staan. Hier klikt u op “Latest Product”.

Divi Woo Add To Cart Settings Pagina
Vervolgens gaat u naar het desbetreffende aangemaakte product wat u wilt koppelen op deze pagina. In dit voorbeeld wordt het product “Code of Art” geselecteerd.
Divi Woo Add To Cart Settings Pagina 2
Zodra u het product heeft geselecteerd haalt de desbetreffende Divi Woo Module de productgegevens dynamisch op en koppelt het product.

Welke Divi WooCommerce modules zijn er?

Divi Woo Modules

Als u gebruik maakt van het WordPress Thema Divi van Elegant Themes en u installeert de plugin WooCommerce, dan worden er in Divi automatisch WooCommerce moduels aangemaakt. Elegant Themes noemt deze modules Woo Modules. Op het moment van het schrijven van deze column zijn dan 16 Woo Modules, namelijk: 

  1. Divi Woo Breadcrumb Module (kruimelpad)
  2. Woo Title Module (producttitel)
  3. Woo Image Module (productafbeeldingen)
  4. Woo Gallery Module (productengalerij)
  5. Woo Price Module (productprijs)
  6. Woo Add to cart Module (toevoegen aan winkelwagen)
  7. Woo Rating Module (productbeoordeling)
  8. Woo Stock Module (productvoorraad)
  9. Woo Meta Module (product metadata)
  10. Woo Description Module (productbeschrijving)
  11. Woo Tabs Module (producttabbladen)
  12. Woo Additional Information Module (aanvullende productinformatie)
  13. Woo Related Products Module (gerelateerde producten)
  14. Woo Upsell Module (product bijverkoop)
  15. Woo Cart Notice Module (toevoeging winkelwagen vermelding)
  16. Woo Reviews (productrecensies)

Informatie over deze Divi WooCommerce Modules (00:34:10) 34 minuten en 10 seconden

Uitleg Divi Woo Modules

Divi Woo Breadcrumb Module (WooCommerce kruimelpad)

Woo Breadcrumbs Module
In WordPress kunt u boven elke pagina een kruimelpad (breadcrumb) tonen. U kunt dit doen met behulp van diverse plugins. Binnen de plugin SEO Press Pro zit deze optie standaard en kunt u met behulp van een short-code het kruimelpad overal plaatsen. Op mijn pagina ziet u bovenaan ook een kruimelpad.

Met de Divi Woo Breadcrumbs Module kunt u daarnaast binnen uw webwinkel nog een apart kruimelpad instellen. Bezoekers van uw weshop kunnen dan zien binnen welke productcategorie ze in uw winkel zijn. Ze kunnen hierdoor ook snel navigeren binnen uw webwinkel.

Binnen de Divi Woo Breadcrumb Module kunt u gemakkelijk een aantal aanpassingen doorvoeren via het tabblad content:

  • Product: hier selecteert u het product
  • Home Text: Elk kruimelpad begint altijd met een start. Omdat de naam start niet logisch is, kunt u er voor kiezen om hier een andere naam aan te geven, bijvoorbeeld winkel.
  • Home-link: Hier geeft u aan wat de start url uw webshop is. Deze start url zal veelal een andere url zijn dan van de startpagine van uw website.
  • Zodra u de plugin WooCommerce in WordPress installeert, worden de volgende pagina’s aangemaakt:- Afrekenen
    – Home
    – Mijn account
    – Winkel
    – Winkelmand

    De start url van de Home-link zal dan ook veelal https://uwdomein/winkel zijn.

  • Scheidingsteken: Hier kunt u bepalen welke scheidingstekens u in uw kruimelpad wilt gebruiken.

Divi Woo Title Module (WooCommerce Producttitel)

Woo Titel Module
Met de Woo Title Module kunt u in WordPress titels van producten toevoegen op berichten, pagina’s of productpagina’s.

Divi Woo Images Module (WooCommerce Productafbeeldingen)

Woo Afbeelding Module
Met de Divi Woo Images Module kunt u een afbeelding voor het product toevoegen of aanpassen. Ook kunt u meerdere productafbeeldingen toevoegen, zodat er een productgalerij ontstaat. Daarnaast kunt u bij een afbeelding de vermelding sale of uitverkoop plaatsen.

Via het tabblad content kunt u de volgende onderdelen instellen:

  • Show Featured Image: hier kunt u aangeven of er een uitgelichte productafbeelding moet worden weergegeven
  • Show Gallery Images: hier kunt u aangeven of er een productgalerij moet worden weergegeven
  • Show Sale Badge:  hier kunt u aangeven of er een vermelding met uitverkoop/sale moet worden weergegeven

Divi Woo Gallery Module (WooCommerce Galerij Productafbeeldingen)

Woo Gallerij Module
Met de Divi Woo Gallery Module kunt u aan elk bericht of pagina een WooCommerce productgalerij toevoegen. Via het tabblad content kunt u de volgende instellen aanpassen:

  • Show Title and Caption: hier kunt u bepalen of er een titel met bijschrift bij de afbeelding geplaatst moet worden
  • Show Pagination: hier kunt u bepalen of u gebruikt maakt van een paginering, als er veel producten weergegeven moeten worden

Divi Woo Price Module (WooCommerce Productprijs)

Divi Woo Price Module
Met de Divi Woo Price Module kunt u op elk bericht, pagina of productpagina een prijs toevoegen aan het geselecteerde product. Ook kunt u een afwijkende prijs opmaken, zoals bijvoorbeeld een aanbieding. De Divi Woo Price Module heeft onder het tabblad content verschillende instellingsmogelijkheden:

  • Price Text: Hier kunt u de tekst van de prijs invoeren samen met het valutasymbool
  • Sale Old Price Text: hier voert u de oude prijs in, van voor de uitverkoop
  • Sale New Price Tekst: hier voert u de nieuwe uitverkoopprijs in

Divi Woo Add to cart Module (WooCommerce toevoegen aan winkelwagen)

Divi Woo Add To Cart Module
Met de Divi Woo Add to Cart module kunt u via het tabblad content drie onderdelen instellen, namelijk:

  • Button Add to Chart: de knop toevoegen aan winkelmandje
  • Show Stock: u kunt bepalen of bezoekers kunnen zien hoeveel producten nog op voorraad zijn
  • Show Quatity Field: u kunt bepalen of bezoekers een selectieoptie bij het product kunnen zien, waarmee ze kunnen bepalen hoeveel producten ze willen kopen

Bovenstaande instellingen kunt u ook doen via de drie aparte modules: Woo Add to cart, Woo Stock en Woo Quantity. Het voordeel hiervan is dat u dan meer mogelijkheden heeft.

Via het tabblad Design (ontwerp) kunt u de layout van verschillende onderdelen instellen:

  • Text: hiermee maakt u de tekst van het veld producthoeveelheid op
  • Fields: hier maakt u de tekst van getallen op
  • Dropdown Menus: hier kunt u layout van de dropdown menu’s opmaken
  • Button: hiermee maakt u de knop toevoegen aan winkelmandje op
Divi Woo Add To Cart Settings
Hieronder een informatieve video over de Divi WooCommerce Add to Cart module.

Divi Woo Rating Module (WooCommerce Productbeoordeling)

Divi Woo Rating Module
Met de Divi Woo Rating Module kunt u bepalen of een product een beoordelingsveld met sterren krijgt. Het aantal sterren is een gemiddelde van de beoordelingen van het desbetreffende product.

Ook worden het aantal recensies van klanten weergegeven. Deze kunnen bezoekers aanklikken en lezen. De bezoeker ziet alleen een productbeoordeling als er minimaal één beoordeling is gegeven.

Via het tabblad content kunt u de volgende instellingen doen:

  • Show Star Rating: hier bepaalt u of er een beoordeling in de vorm van sterren getoond moet worden
  • Show Customer Reviews Count: hier bepaalt u of het aantal klantbeoordelingen moet worden weergegeven

Via het tabblad design kunt u de volgende aanpassingen in de layout doen:

  • Rating layout: hier kunt u aangeven of u de rating inline of gestapeld wilt weergeven
  • Star Rating: Hier bepaalt u de layout van de sterrrenclassificatie
  • Text: hier kunt u de layout van de tekst van de klantenbeoordelingen opmaken

Divi Woo Stock Module (WooCommerce Productvoorraad)

Divi Woo Stock Module
Met de Divi Woo Stock Module geeft u de voorraad van een product aan, zodat bezoekers kunnen zien of het product nog op voorraad is en hoeveel ze ervan kunnen kopen.

Via het tabblad design kunt van de volgende instellingen de layout opmaken:

  • In Stock Text Styles : hiermee maakt u de layout van de tekst op voorraad op
  • Out of Stock Text Styles: hiermee maakt u de layout van de tekst niet op voorraad op
  • On Backorder Text Styles: hiermee maakt u de layout van de tekst in nabestelling op

Divi Woo Meta Module (WooCommerce Product Metadata)

Divi Woo Meta Module
Met de Divi Woo Meta Module geeft u aan of er metadata van producten weergegeven moeten worden. Metadat zijn gegevens als: product-SKU, productcategoriën en producttags.

Via het tabblad content kunt u de volgende instellingen doen:

  • Separator: hier kunt u bepalen welke scheidingstekens er gebruikt worden
  • Show Sku: hier bepaalt u of het product-SKU weergegeven moet worden
  • Show Categories: hier bepaalt u of productcategoriën getoont moeten worden
  • Show Tags: hier bepaalt u of producttags getoont moeten worden

Divi Woo Description Module (WooCommerce Productbeschrijving)

Divi Woo Description Module
Met de Divi Woo Description Module kunt u een korte en/of lange productbeschrijving toevoegen.

Via het tabblad content kunt u de volgende instelling bepalen:

  • Description Type: hier bepaalt u of u de korte- of lange productbeschrijving wilt weergeven

Divi Woo Tabs Module (WooCommerce Producttabbladen)

Divi Woo Tabs Module
Met de Divi Woo Tabs Module bepaalt u of u tabbladen met extra informatie wilt toevoegen.

Via het tabblad content kunt u er voor kiezen om de volgende tabbladen te tonen:

  • Description (beschrijving)
  • Additional information (aanvullende informatie)
  • Reviews (recensies)

Divi Woo Additional Information Module (WooCommerce aanvullende productinformatie)

Divi Woo Additional Information Module
Met de Divi Woo Additional Information Module bepaalt u of u extra kenmerken van de producten wilt tonen, zoals gewicht, afmeting of andere kenmerken.

Via het tabblad content kunt u het volgende instellen:

  • Show Title: hier bepaalt u of deze extra informatie moet worden getoond

 

Divi Woo Related Products Module (WooCommerce gerelateerde producten)

Divi Woo Related Product Module
Met de Divi Woo Related Products Module kunt u bepalen of er ook gerelateerde producten met dezelfde productcategorie of producttag getoond moeten worden. Dit is handig voor het stimuleren van extra bijverkoop.

Via het tabblad content kunt u de volgende instellingen bepalen:

  • Product Count: hier geeft u aan hoeveel gerelateerde producten u wilt tonen
  • Column Layout: hier geeft u aan hoeveel kolommen er getoond worden
  • Order: hier geeft u aan hoe producten besteld kunnen worden

Bovenstaande instellingen kunt u ook doen via de Divi Shop Module.

Via het tabblad design kunt u van de volgende onderdelen de layout opmaken:

  • Overlay
  • Image
  • Star Rating
  • Body Text
  • Title Text
  • Product Title Text
  • Price Text
  • Sale Badge Text
  • Sale Price Text

Divi Woo Upsell Module (WooCommerce Bijverkoop)

Divi Woo Upsell Module
Met de Divi Woo Upsell Module kunt toevoegen dat er extra bijverkoop getoond wordt. De bijverkoop producten zijn producten die mensen vaak extra kopen als ze een bepaald product kopen. Bijvoorbeeld een telefoonhouder bij een telefoon.
Divi Woo Upsell Module 2
Als u wilt dat er bijverkoopproducten getoont worden, dan dient u eerst via de backend van Divi in te stellen welke producten gekoppeld zijn.

Via het tabblad content kunt u de volgende instellingen bepalen:

  • Product Count: hier bepaald u hoeveel bijverkoop producten u wilt tonen
  • Column Layout: hier bepaald u hoeveel kolommen u wilt tonen
  • Order: hier kunt u instellen hoe de producten besteld kunnen worden

Bovenstaande instellingen kunt u ook doen via de Divi Shop Module.

Via het tabblad design kunt u weer de layout van de volgende onderdelen bepalen:

  • Overlay
  • Image
  • Star Rating
  • Body Text
  • Title Text
  • Product Title Text
  • Price Text
  • Sale Badge Text
  • Sale Price Text

Divi Woo Cart Notice Module (WooCommerce Winkelwagen melding)

Divi Woo Cart Notice Module
Met de Divi Woo Cart Notice Module kunt u de vermelding “toegevoegd aan uw winkelwagen” instellen. Deze vermelding verschijnt dan als de klant bij een product heeft geklikt op de knop toevoegen aan winkelwagen. Deze vermelding toont ook een knop bekijk winkelwagen.

Via het tabblad design kunt u de volgende onderdelen opmaken:

  • Text: hier bepaald u de layout van de tekst van de melding
  • Button: hier bepaald u de layout van de knop winkelwagen bekijken

Divi Woo Reviews Module (WooCommerce Productrecensies)

Divi Woo Reviews Module
Met de Divi Woo Reviews Module bepaald u of er recensies getoond worden.

Via het tabblad content kunt u het volgende aanpassen:

  • Show Author Avatar: hiermee kunt u instellen of er een avatar getoond wordt. Zie hiervoor ook de algemenen instellingen van WordPress
  • Show Comment Count: hiermee kunt u aangeven of het aantal reacties getoond wordt

Via het tabblad design kunt u de layout van de volgende onderdelen bepalen:

  • Fields: voor de opmaak van het beoordelingsformulier
  • Image: voor de opmaak van het avatar veld
  • Title Tekst: voor de opmaak van de titel van de recensie
  • Meta Tekst: voor de opmaak van de naam van de persoon die de recensie heeft gegeven en de datum van de recensie
  • Comment Tekst: voor het toevoegen van tekst bij de recensie
  • Star Rating: voor het opmaken van de sterren
  • Button: voor het opmaken van de recensieknop.

De Divi Shop Module voor uw winkelpagina

Hiervoor heb ik beschreven hoe u de Divi Woo Modules kunt gebruiken bij het aanmaken van een WooCommerce productpagina. Voor uw winkel wilt u natuurlijk ook een winkelpagina hebben. Voor het maken van deze winkelpagina gebruiken we de Divi Shop Module. In de volgende video wordt uitgelegd hoe de Divi Shop Module werkt.

De Divi Shop Module (00:10:35) 10 minuten en 35 seconden

De Divi Pricing Tables Module gebruiken

Binnen uw WordPress website of webshop kunt u ook gebruik maken van de Divi Pricing Tables Module. In de volgende video wordt uitgelegd hoe u deze module kunt gebruiken.

De Divi Pricing Tables Module (00:16:32) 16 minuten en 32 seconden

Instructievideo’s Darrel Wilson – Webshop maken met Divi & WooCommerce

In WordPress een webshop maken met Divi (03:13:00) 3 uur en 13 minuten

Zelf een webshop pagina maken met Divi (00:22:28) 22 minuten en 28 seconden

In WordPress de Divi WooCommerce Builder gebruiken (00:21:58) 21 minuten en 58 seconden

Gerelateerde berichten

Divi shortcodes

Met behulp van de Divi builder (Nederlandse vertaling in WordPress is Divi Themabouwer) kunt u heel gemakkelijk pagina's ontwerpen. Dit wordt echter nog gemakkelijker met behulp van de Divi shortcodes.Visual Builder shortcodes Pagina shortcodes Ongedaan maken: Ctrl+Z...

Lees meer

Elegant Themes Divi – Contactformulier module

Met behulp van de Divi contactformulier module van Elegant Themes kunt u overal op uw website of webshop een contactformulier invoegen. Hieronder word de Divi contactformulier module van Elegant Themes uitgelegd.5 manieren om uw contactformulier op te maken Het Divi...

Lees meer

Elegant Themes Divi – Knop module

Met behulp van de Divi knop module van Elegant Themes kunt u overal op uw website of webshop knoppen toevoegen. Met behulp van deze module kunt u elke knop weer een ander uiterlijk geven. Op de volgende websites kunt u handige css codes voor de divi button module...

Lees meer

Blader door berichten

Pin It on Pinterest

Share This