Hoe WooCommerce Cart Flow-tijdlijn te creëren in Divi

WooCommerce is een van de meest populaire e-commerce plug-ins voor WordPress. Om hierbij te helpen heeft Divi een aantal nieuwe Woo-centrische modules uitgebracht die je meer vrijheid geven bij het maken van je standaard WooCommerce-pagina's. We zullen in het bericht van vandaag werken aan het maken van een tijdlijn voor WooCommerce-winkelwagentjes voor Divi . Voor deze periode ontwerpen we een visuele weergave van de user journey. De reis van de gebruiker van de winkel naar de kassa moet zichtbaar worden weergegeven.

Ontwerpvoorbeeld

Voordat we meteen beginnen met ontwerpen, laten we eens kijken hoe ons ontwerp eruit zal zien als we klaar zijn. Hier is het voorbeeld van de winkelwagenpagina.

Dit is ook hoe onze afrekenpagina eruit zal zien.

Om de sjabloon te downloaden, klik hier en download het bestand. Pak het vervolgens uit.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Installeer de sjabloon

Ga naar de Divi Theme Builder in de backend van de WordPress-website om de sjabloon te uploaden.

Vervolgens verschijnt er een pictogram met twee pijlen in de rechterbovenhoek. Wissel het pictogram.

Klik op "Divi Theme Builder-sjablonen importeren" na het uploaden van het JSON-bestand dat u van dit bericht hebt gedownload naar het tabblad Importeren.

U zult een nieuw winkelwagentje, afrekenen en winkelsjabloon opmerken wanneer u het bestand heeft geüpload. Zodra u de sjablonen wilt activeren, slaat u uw wijzigingen op in de Divi Theme Builder.

Maak de tijdlijn van de WooCommerce-winkelwagen

Het volgende gedeelte van onze blogpost laat zien hoe je de WooCommerce-winkelwagentijdlijn voor Divi opnieuw kunt maken als je op zoek bent naar een beetje meer uitdaging. De procedures in deze handleiding kunnen worden gebruikt om een ​​winkelwagentijdlijn te maken die uniek is voor u. Gebruik het als motivatie voor uw volgende WooCommerce- en Divi-inspanningen! Dit is hoe de tijdlijn van de WooCommerce-winkelwagen die we gaan bouwen eruit zal zien:

Laten we beginnen nu we een visuele weergave hebben van wat we gaan maken!

Divi Theme Builder-installatie

Deze sjablonen die we gaan ontwikkelen, hebben invloed op de afreken- en winkelwagenpagina's van WooCommerce. Dus beginnen we aan ons project te werken in de Divi Theme Builder.

Klik op de kaart Nieuwe sjabloon toevoegen op het plusteken.

Kies vervolgens om een ​​nieuwe sjabloon te maken.

Daarna wordt een modaal vak weergegeven met alle verschillende opdrachten die u kunt toevoegen aan de nieuwe sjabloon die u aan het bouwen bent. In dit geval maken we een sjabloon voor de winkelwagenpagina van de WooCommerce-winkel. Navigeer dus naar de WooCommerce-kop in het modale vak en klik op Winkelwagen. Selecteer na het kiezen Sjabloon maken. Door dit te doen, taggen we de winkelwagenpagina met de nieuw samengestelde sjabloon.

Om het afrekensjabloon te ontwikkelen, volgen we een vergelijkbare procedure. Klik op de kaart Nieuwe sjabloon toevoegen op het plusteken.

Kies ervoor om opnieuw een nieuwe sjabloon te maken.

We moeten naar beneden scrollen in het modale venster en Afrekenen kiezen in de WooCommerce-kop om toegang te krijgen tot de afrekenpagina. Selecteer na het kiezen Sjabloon maken.

We kunnen nu onze winkelwagen- en afrekensjablonen opslaan nadat ze zijn gemaakt. Selecteer bovenaan de Divi Theme Builder de groene knop Wijzigingen opslaan.

De WooCommerce-winkelwagenstroom bouwen

Het plezier begint nu! We gaan beginnen met het opstellen van het schema voor de winkelwagenstroom van de winkelwagenpagina. Om dit te bereiken, openen we de winkelwagensjabloon die we zojuist hebben gemaakt en selecteren we de knop Aangepaste body toevoegen.

We gaan de knop Create Custom Body selecteren die in het modale vak verschijnt, net zoals we deden toen we deze sjablonen en hun toewijzingen maakten.

Nieuwe sectie en rij

We gaan een nieuwe rij maken nu we in de Divi Builder zitten. Er zullen vijf kolommen in deze rij zijn.

Voeg drie Blurb-modules toe aan kolommen 1, 3 en 5 van uw nieuwe rij.

Volg de instellingen van de blurb-module:

Eerste Blurb (kolom 1)

• Titel: winkel
• Lichaam: leeg laten
• Pictogram gebruiken: Ja
• Icoon: Zie screenshot hieronder
• Module Link URL: /shop (Of uw aangepaste link naar uw winkelpagina)

Tweede Blurb (kolom 3)

• Titel: recensie
• Lichaam: leeg laten
• Pictogram gebruiken: Ja
• Icoon: Zie screenshot hieronder
• URL van modulelink: /cart (of uw aangepaste link naar uw winkelwagenpagina)

Derde Blurb (kolom 5)

• Titel: Afrekenen
• Lichaam: leeg laten
• Pictogram gebruiken: Ja
• Icoon: Zie screenshot hieronder
• URL van modulelink: /checkout (of uw aangepaste link naar uw afrekenpagina)

Op dit moment ziet onze WooCommerce-tijdlijn er als volgt uit:

Het maakt niet uit op welke pagina's klanten terechtkomen, we hebben eenvoudige toegang tot onze Blurb-modules nodig omdat we sjablonen maken voor de winkelwagen- en afrekenpagina. Het vermogen van de eindgebruiker—uw klant—om naadloos te schakelen tussen de verschillende afrekenfasen is een belangrijk onderdeel van de WooCommerce-tijdlijn. We zullen eerst de module-instellingen van de eerste blurb, winkel, invoeren om de link naar de standaard winkel-, winkelwagen- en afrekenpagina's van de site toe te voegen.

Het maakt niet uit op welke pagina's klanten terechtkomen, we hebben eenvoudige toegang tot onze Blurb-modules nodig omdat we sjablonen maken voor de winkelwagen- en afrekenpagina. Het vermogen van de eindgebruiker—uw klant—om naadloos te schakelen tussen de verschillende afrekenfasen is een belangrijk onderdeel van de WooCommerce-tijdlijn. We zullen eerst de module-instellingen van de eerste blurb, winkel, invoeren om de link naar de standaard winkel-, winkelwagen- en afrekenpagina's van de site toe te voegen.

Elke Blurb-module ontvangt links naar de normale WooCommerce-pagina's. Maak de nodige aanpassingen aan eventuele aangepaste koppelingen die u voor deze pagina's op uw WooCommerce-installatie hebt gemaakt. We beginnen eerst met de Shop Blurb-module. We typen /shop in het veld Module Link URL. Dit is de standaard URL van de winkelpagina van WooCommerce. Vergeet niet om deze URL te vervangen door uw gepersonaliseerde URL als u deze heeft bijgewerkt.

Klik op de knop met het groene vinkje om uw wijzigingen op te slaan. Vervolgens gaan we naar de Review Blurb-module. De link naar de winkelwagenpagina wordt geleverd door deze module. Wederom wordt het tabblad Link geselecteerd en wordt de modulelink-URL /cart toegevoegd aan de module-URL.

We zullen linken naar de standaard WooCommerce checkout-paginalink, die /checkout is, voor de laatste Blurb-module, de Checkout Blurb-module.

Style Blurb-modules

De styling van onze nieuw toegevoegde Blurb-modules begint dan. Op de modules passen we zweefstijlen toe. Dit verbetert de gebruikerservaring (UX) van de WooCommerce-winkelwagentijdlijn. We willen een andere kleur voor de Blurb-module die de pagina vertegenwoordigt waarop we ons nu bevinden. We willen ook dat het pictogram van kleur verandert en groeit als we eroverheen bewegen.

Styling van de Blurb-module

• Pictogramkleur: #eac989
• Kleur pictogram zweven: #9fa2ce
• Tekstuitlijning: midden

Titeltekst:

• Titel Koptekst: H4

• Titellettertype: Baskerville
• Titel Lettertype Gewicht: Vet
• Titel tekstkleur: #354e7c

Transformeren:

• Transformatieschaal (desktop): 100%
• Schaal transformeren (zweven): 115%

We passen de ontwerpparameters toe op de andere Blurb-modules in onze rij nadat we klaar zijn met het configureren ervan voor de eerste Blurb-module.

Alleen de modules in onze sectie zijn de objecten waarnaar we onze stijlen willen uitbreiden. Dit is belangrijk om te onthouden, vooral als u werkt aan een pagina met bestaande inhoud.

Styling van de Cart Blurb-module

We gaan het stadium waarin onze gebruiker zich nu bevindt een aparte pictogramkleur geven om de verschillende stadia van het afrekenproces aan te geven. We zullen bijvoorbeeld de kleur van de Blurb-module wijzigen die verwijst naar de winkelwagenfase van het proces als ze zich op de winkelwagenpagina bevinden.

Blurb-module winkelwagenpagina:

• Pictogramkleur (bureaublad): #f6c6c5
• Pictogramkleur (zweven): #9fa2ce

Voeg tijdlijnverdelers toe

We beginnen met het toevoegen en aanpassen van onze Divider-modules nadat we onze Blurb-module hebben gebouwd en vormgegeven. De tweede en vierde kolom van onze rij bevatten de Divider Module.

Stijl tijdlijnverdelers

Vervolgens zullen we Divider Modules aanpassen. Breng de volgende wijzigingen aan in Divider-instellingen.

Zichtbaarheid:

• Divider tonen: Ja

Lijn:

• Lijnkleur: #354e7c
• Lijnstijl: gestippeld
• Lijnpositie: Verticaal gecentreerd

Maatvoering

• Scheidingsgewicht: 5px

Laten we de stijlen van deze Divider Module naar de andere module in onze rij kopiëren en plakken met behulp van een heel slimme Divi-functie. Vervolgens klikken we met de rechtermuisknop op de Divider Module die is voltooid. Vervolgens selecteren we Module-instellingen kopiëren. Vervolgens klikken we met de rechtermuisknop op de Divider Module, die op dit moment niet gestyled is. De laatste stap is klikken op Module-instellingen plakken. Tijd besparen is tijd verdienen!

Aangepaste CSS

Onze tijdlijn voor de WooCommerce-winkelwagen ziet er momenteel als volgt uit:

We gaan wat CSS aan onze rij toevoegen om ervoor te zorgen dat onze Divider-modules correct zijn uitgelijnd en om onze tijdlijnmodule mobiel-responsief te maken.

We moeten eerst de rijopties voor onze WooCommerce-winkelwagentijdlijn invoeren voordat we onze aangepaste CSS kunnen toevoegen. We kiezen dan voor het tabblad Geavanceerd. Last but not least nemen we de volgende CSS op in het hoofdelement:

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

Klik nu op het groene vinkje om de instellingen op te slaan.

De afrekenpagina instellen

Op onze winkelwagenpagina hebben we de basis gelegd voor onze WooCommerce-tijdlijn voor de winkelwagenstroom. Maar we moeten ons afrekenpaginasjabloon bijwerken met ons voltooide werk om ons tijdschema af te ronden. Om onze procedure voor de afrekenpagina te vereenvoudigen, gebruiken we het rechtsklikmenu, een van de originele functies van Divi. Laten we gaan!

Kopieer de winkelwagenstroomtijdlijn van de winkelwagenpagina

We keren terug naar de winkelwagenpagina. We zullen de Divi Builder echter niet voor de body gebruiken.

Klik met de rechtermuisknop op de Custom Body van de winkelwagensjabloon. Selecteer daarna Kopiëren in het rechtsklikmenu.

We zullen nu het werk dat we hebben voltooid in de winkelwagensjabloon in de afrekensjabloon plakken nadat we deze hebben gedupliceerd. In de afrekenpaginasjabloon klikken we met de rechtermuisknop op de knop Aangepaste body toevoegen om dit te bereiken. Als u klaar bent, verschijnt de optie Plakken in het menu. Klik op Plakken om de Custom Body van de checkout-paginasjabloon naar de winkelwagenpagina-sjabloon te kopiëren.

U kunt nu zien dat de sjabloon voor de afrekenpagina en de winkelwagensjabloon beide een aangepaste body hebben. Dit stelt ons in staat om de ontwerpprocedure van de site te versnellen. Dank je wel, Divy. We klikken op de groene knop Wijzigingen opslaan bovenaan de bouwer om onze wijzigingen in de betaalsjabloon op te slaan.

Checkout-pagina bijwerken

Laten we, na wat tijd uit het ontwerpproces te hebben gehaald, de laatste aanpassingen aan de afrekenpagina maken om ervoor te zorgen dat deze naadloos integreert met de rest van ons project. Klik eerst op het potloodpictogram om de Custom Body van de checkout-paginasjabloon te bewerken.

Stijl Kassa Icoon

Begin nu met het stylen van ons kassapictogram. De module-instellingen van de afrekenknop worden geopend wanneer u op het tandwielsymbool klikt.

Ga naar het tabblad Ontwerp van de module Module-instellingen. De titel "Image & Icon" moet worden aangeklikt. De kleur van het pictogram wordt gewijzigd. Selecteer daarom het pipetpictogram en voer de hexadecimale waarde #f6c6c5 in. Als gevolg hiervan zal het pictogram de kleur van de huidige pagina aannemen, namelijk roze.

Winkelwagenpictogram bijwerken

Het zal nodig zijn om terug te gaan en de pictogramkleur van het winkelwagenpictogram te wijzigen. We gaan terug naar de module-instellingen om dit te bereiken. Vervolgens selecteren we het tandwielpictogram van het winkelwagensymbool.

We gaan nogmaals naar het tabblad Ontwerp van de module-instellingen. Selecteer daarna het pipetgereedschap in het gedeelte Afbeelding &-pictogram. Voer vervolgens #eac989 in hexadecimaal formaat in.

Vergeet na het verlaten van de Divi Builder niet uw instellingen en al uw moeizame werk op te slaan.

Margje allemaal samen

Hoewel de winkelwagentijdlijn de belangrijkste focus van deze tutorial is, vereist de sjabloon ook het gebruik van extra WooCommerce-modules. Deze extra WooCommerce-modules moeten aan elke sjabloonpagina worden toegevoegd om uw winkel compleet te maken.

Winkelwagen pagina sjabloon

• Woo Cart-producten: hiermee wordt de WooCommerce-winkelwagen weergegeven
• Woo Cart Totals: laat het subtotaal, belastingen en meer zien met deze module

Sjabloon voor afrekenpagina

• Woo Notice-module: we gebruiken deze module om fouten, informatie of mededelingen weer te geven die betrekking hebben op het uitchecken
• Woo Checkout Billing: Deze module kleurt de facturatiegegevens van uw klanten
• Woo Checkout Details: in tegenstelling tot de winkelwagentotalen, toont deze module de daadwerkelijke productnamen, hoeveelheid en meer
• Woo Checkout Billing: Om de beschikbare betaalmethoden te tonen, hebben we deze module toegevoegd aan de checkout-pagina

Afsluiten

Een winkelwagentijdlijn geeft klanten een visuele weergave van hun reis door uw site. Je hebt de mogelijkheid om met Divi een nieuwe component aan je WooCommerce-winkel toe te voegen en aan te passen. Je kunt wat je hier hebt geleerd toepassen op je eigen klant en persoonlijke websites dankzij de tools van Divi. Laat het me weten als je deze tutorial buiten de klas gebruikt!