De Divi Webshop Module

Live demo’s van productpagina’s met Woo-modules

Bekijk de volgende live demo’s om te zien wat mogelijk is bij het ontwerpen van productpagina’s met Divi’s Woo Modules.

BEKIJK EEN LIVE DEMO VAN DEZE PRODUCTPAGINA

 

 

 

 

 

 

 

Hoe Divi’s WooCommerce-modules te gebruiken

Inleiding tot WooCommerce-modules

Met Divi’s WooCommerce-modules kunt u WooCommerce-elementen bewerken en opmaken met behulp van de Divi Builder. Hiermee kunt u de kracht van Divi gebruiken om de WooCommerce-elementen waaruit een productpagina-indeling bestaat toe te voegen, te verwijderen en te stijlen om helemaal nieuwe productpagina’s te maken. Nooit meer toevlucht nemen tot externe CSS of het wijzigen van woocommerce paginasjablonen met aangepaste code.

WooCommerce-modules zijn ook niet beperkt tot productpagina’s. U kunt Woo-modules overal op uw site toevoegen om gerelateerde producten dynamisch weer te geven, aangepaste knoppen voor toevoegen aan winkelwagentje voor een bepaald product te maken, volledig aangepaste productgalerijen te maken en nog veel meer.

Als dat niet genoeg was, zijn WooCommerce-gegevens ook beschikbaar via de dynamische inhoudsfunctie van Divi die in alle Divi-modules is ingebouwd. Dat betekent dat u woocommerce-elementen en productinformatie gemakkelijk naar elke module in Divi kunt halen. Als u bijvoorbeeld de Woo Tabs-module niet wilt gebruiken om de aanvullende informatie van uw product weer te geven, kunt u deze toevoegen aan een Divi-schakelmodule met dynamische inhoud.

Hoe WooCommerce-modules werken

WooCommerce-modules werken op vrijwel dezelfde manier als dynamische inhoud al binnen de Divi Builder werkt. Voor elke WooCommerce-module moet u een product selecteren om dynamische inhoud te genereren die aan dat product is gekoppeld. De dynamische inhoud wordt uit de database gehaald en bevat de informatie die u hebt ingevoerd bij het instellen van uw product in woocommerce. Nadat een product is geselecteerd, kunt u de Divi Builder-instellingen gebruiken om de dynamische WooCommerce-productinhoud op te maken zoals u elke normale Divi-module zou doen.

Toegang tot WooCommerce-modules vanuit de Divi Builder

WooCommerce-modules zijn toegankelijk vanuit de Divi Builder, net als gewone Divi-modules.

Zodra het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuw product of pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder, inclusief WooCommerce-modules. Als u Divi Builder op een WooCommerce-productpagina inschakelt, vervangen Woo-modules automatisch de Woo-elementen die op de pagina actief waren voordat Divi werd ingeschakeld. U kunt ook op de knop Voortbouwen op de frontend klikken om de builder in de visuele modus te starten. U kunt ook klikken op de knop Visual Builder inschakelen tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

Nadat u de Divi Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Zoek de Woo-modules in de lijst met modules en klik op een om deze aan uw pagina toe te voegen.

De modulelijst kan worden doorzocht, wat betekent dat u ook “woo” kunt typen om alle Woo-modules te zien of “Woo-titel” kunt typen om snel de Woo-titelmodule te openen!

Zodra de module is toegevoegd, wordt u begroet met de lijst met opties van de module, net als een normale Divi-module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

WooCommerce-modules gebruiken op productpagina’s

Divi’s Woo-modules werken naadloos samen met een WooCommerce-productpagina. Hieronder vindt u een overzicht van het gebruik van Woo-modules op een productpagina in Divi.

Divi gebruikt standaard de standaardsjabloon voor de WooCommerce-productpagina die niet kan worden bewerkt met Divi Builder.

Dit is hoe de standaardproductpagina eruitziet bij het bewerken van de backend.

Het enige dat u hoeft te doen om Woo-modules op uw pagina in te schakelen, is om de Divi Builder op de productpagina in te schakelen door op de knop “Gebruik de Divi Builder” te klikken.

Nadat u de Divi Builder op een productpagina voor een normaal product hebt ingeschakeld, converteert Divi de productpagina-elementen automatisch naar een verzameling WooCommerce-modules die het standaard Divi-productpaginaontwerp nabootsen. Voor elk van de Woo-elementen die relevant zijn voor uw product, heeft Divi een overeenkomstige WooCommerce-module waarmee u dat Woo-element kunt implementeren en ontwerpen met de Power van de Divi Builder. De producttitel is bijvoorbeeld vervangen door een nieuwe Woo-titelmodule met alle beschikbare ontwerpopties om de titel aan te passen met Divi.

Zo ziet het eruit wanneer u Divi Builder op een productpagina inschakelt.

De gebruiker is dan vrij om alle WooCommerce-elementen (zoals productafbeeldingen, prijs, beschrijving, etc.) aan te passen met behulp van de Divi-builder. Hiermee kunt u volledig aangepaste productpagina’s maken.

Het is belangrijk om te onthouden dat elke Woo-module dynamisch is, wat betekent dat deze afhankelijk is van bestaande woocommerce-gegevens die u al hebt ingevoerd bij het bouwen van uw producten. U moet dus controleren of het product de informatie heeft die nodig is om de module weer te geven. Als u bijvoorbeeld geen upsell-producten voor een bepaald product hebt opgenomen, kunt u de woo upsell-module op die specifieke productpagina niet toevoegen of aanpassen omdat er niets is om weer te geven.

Divi-pagina-instellingen voor productpagina’s

Nadat de Divi Builder op een productpagina is geïmplementeerd, bevatten de Divi-pagina-instellingen iets andere opties. De twee belangrijkste opties om rekening mee te houden, met name bij het werken met Woo-modules, zijn Pagina-indeling en Productinhoud .

Pagina layout

Gebruik deze optie om de lay-out van de productpagina te wijzigen.
De opties Linker zijbalk en Rechter zijbalk geven de standaard Divi Theme-zijbalk weer.

Als u de zijbalk wilt verbergen, kunt u de optie Geen zijbalk of Volledige breedte selecteren.

Een ding dat u zou kunnen overwegen, is het selecteren van een aangepaste zijbalk met behulp van de Divi Builder met een Fullwidth-paginalay-out.

Product Content

Met de instellingen voor Productinhoud kunt u kiezen tussen twee opties:

  • Standaard
  • Vanaf nul bouwen

De standaardoptie schakelt de oude manier in waarop de Divi Builder werkte met WooCommerce-productpagina’s. In principe kunt u met Divi Builder alleen inhoud toevoegen in het beschrijvingsgebied van de standaard WooCommerce-paginalay-out.

Met de optie Build from Scratch kan de functionaliteit van Woo-modules de standaard WooCommerce-productpagina-indeling overschrijven. Er is echt geen reden om over te schakelen van de Build From Scratch-optie, tenzij je moet terugkeren naar de oude manier om dingen te doen.

Woo-modules gebruiken op normale pagina’s en berichten

Divi’s WooCommerce-modules kunnen op elke normale pagina of post op uw website worden gebruikt (niet alleen WooCommerce-productpagina’s).

U kunt bijvoorbeeld eenvoudig een Woo Add To Cart-knop voor een specifiek product in uw winkel toevoegen aan een aangepaste bestemmingspagina die u voor het product hebt gemaakt.

Voeg eenvoudig de Woo Add to Cart-module toe aan de pagina zoals u elke andere Divi-module zou doen.

Zorg er vervolgens voor dat u het product selecteert dat u aan de module wilt koppelen.

In dit geval wil ik een specifiek product selecteren. Daarom zou ik in de vervolgkeuzelijst met producten in de module moeten zoeken om een ​​specifiek product in de WooCommerce-database te vinden.

Dit zou natuurlijk het product zijn dat ik op de bestemmingspagina wil plaatsen. De module haalt de productgegevens vervolgens dynamisch op en voegt in dit geval het product toe aan de winkelwagen door op de knop te klikken.

U kunt ook meerdere WooCommerce-modules combineren voor volledig aangepaste lay-outs voor uw productinformatie. U wilt bijvoorbeeld een product aanbieden met meerdere Woo-modules die allemaal aan hetzelfde product zijn gekoppeld, zodat de informatie dynamisch wordt bijgewerkt.

Hier is een voorbeeld van een bestemmingspagina die 6 Woo-modules gebruikt die allemaal dynamisch informatie over hetzelfde product bevatten.

En omdat elke Woo-module is gestileerd met behulp van Divi’s krachtige ingebouwde ontwerpinstellingen, kunt u een geweldig uitziend productgedeelte krijgen voor uw bestemmingspagina.

Woo-modules met andere WooCommerce-pagina’s

De woocommerce-modules werken ook op andere WooCommerce-pagina’s. Deze omvatten de pagina’s Winkel, Afrekenen en Winkelwagen. U kunt bijvoorbeeld speciale producten op de WooCommerce Account-pagina plaatsen zodat alleen gebruikers met een account ze kunnen zien.

En vergeet niet buiten de kaders te denken. U kunt absoluut Divi-modules gebruiken om uw eigen aangepaste versie van een winkelpagina te maken.

Inzicht in elke Woo-module en hun instellingen

Woo Module-instellingen begrijpen

Woo-module-instellingen hebben dezelfde structuur en gebruikersinterface als een normale Divi-module, compleet met drie tabbladen – Inhoud, Ontwerp en Geavanceerd.

Inhoud

De inhoudsopties variëren afhankelijk van de WooCommerce-module. Omdat elke WooCommerce-module echter met dezelfde structuur is gebouwd als een normale Divi-module, zijn de lay-out en functionaliteit van de Woo-modules vertrouwd en intuïtief. Voor het grootste deel haalt elke Woo-module inhoud uit een bepaald product. Dus in plaats van een tekstvak voor het invoeren van statische tekst, ziet u een vervolgkeuzemenu om het product te selecteren waarvan u gegevens wilt ophalen.

Product selectie

Het tabblad Inhoud bevat handige opties waarmee u het product kunt kiezen dat aan de module is gekoppeld. U kunt bijvoorbeeld de standaardselectie ‘dit product’ in de module Woo Title behouden om de titel van het product op die huidige productpagina weer te geven.

Dit is de standaardkeuze omdat u normaal gesproken de informatie wilt weergeven voor het product dat aan die productpagina is gekoppeld.

U kunt er echter ook voor kiezen om het “Laatste product” weer te geven, dat de module-inhoud weergeeft voor het nieuwste product dat aan uw winkel is toegevoegd.

Of u kunt een afzonderlijk product selecteren uit de verschillende producten die in WooCommerce zijn gemaakt.

Let op de gebruikersinterface van het pop-upvenster voor productselectie. Aangezien u veel producten zult hebben om uit te kiezen in uw WC-productdatabase, heeft Divi het vinden van deze producten gemakkelijk gemaakt door een zoekbalk bovenaan en volgende / vorige navigatie onderaan op te nemen.

Aangepaste tekstinhoud

Voor het grootste deel is elke Woo-module dynamisch ten opzichte van een bepaald product. Dit betekent dat de inhoud die op de pagina wordt gegenereerd, afkomstig is van de informatie die aan uw product is toegevoegd aan de backend in WooCommerce. Dus het selecteren van een product is alles wat u echt moet doen in de meeste Woo-modules. Sommige Woo-modules hebben echter een optie om aangepaste tekstinhoud toe te voegen die relevant is voor de module. Een goed voorbeeld hiervan is de Woo Breadcrumbs-module waarmee u aangepaste tekst voor de homelink en een aangepast scheidingsteken kunt toevoegen.