Elegant Themes Divi – Webshop maken met Divi & WooCommerce

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

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.

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. 

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:

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 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

Divi Woo Breadcrumb Module (WooCommerce 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)

Divi Woo Images Module (WooCommerce Productafbeeldingen)

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)

• 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)

• 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)

• 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 Rating Module (WooCommerce Productbeoordeling)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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 (00:10:35) 10 minuten en 35 seconden

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

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