Je hebt uren besteed aan het perfectioneren van je webshop, de kleuren kloppen en de producten staan er prachtig bij, maar toch knaagt er iets aan het ontwerp van je navigatiebalk. Het standaard winkelmandje dat standaard bij het thema wordt geleverd, voelt misschien net niet helemaal passend bij de unieke uitstraling die je voor ogen hebt voor jouw merk. Het is een klein detail, maar in de wereld van online verkoop kunnen juist die kleine visuele elementen het verschil maken tussen een standaard website en een professionele merkervaring. In dit artikel ontdek je de verschillende wegen die je kunt bewandelen om dat ene icoontje precies zo te krijgen als jij dat wilt, zonder dat je daarvoor een doorgewinterde programmeur hoeft te zijn.

Waarom zou je het woocommerce winkelmandje icoon veranderen in divi?

Het oog wil ook wat, zeker wanneer klanten door je digitale schappen bladeren. Het winkelmandje is een van de meest bekeken onderdelen van een webshop, omdat het de plek is waar de uiteindelijke conversie begint. Wanneer je gebruik maakt van wordpress en het populaire divi thema, krijg je standaard een functioneel maar vrij algemeen icoon te zien. Door dit aan te passen, zorg je voor een consistente huisstijl die doorwerkt tot in de kleinste details.

Een uniek icoon kan de gebruikerservaring verbeteren door beter op te vallen of juist subtieler op te gaan in het geheel. Bovendien geeft het je de kans om creatief te zijn; misschien past een modern tasje beter bij je modeblog dan een traditioneel karretje, of wil je een icoon dat beter aansluit bij de minimalistische stijl van je portfolio. Het aanpassen van dit element is een krachtige manier om je te onderscheiden van de duizenden andere webshops die dezelfde standaardinstellingen gebruiken.

De basisinstellingen van de divi theme customizer

Voor we in de diepere technieken duiken, is het goed om te weten dat er binnen de standaardinstellingen al wat mogelijkheden zijn. De theme customizer is een hulpmiddel binnen wordpress waarmee je visuele wijzigingen kunt aanbrengen en deze direct live kunt zien. Hoewel de opties hier beperkt zijn voor wat betreft de vorm van het icoon, kun je wel de kleur en de grootte aanpassen.

• Ga in je dashboard naar weergave en vervolgens naar aanpassen.
• Navigeer naar header & navigatie en kies voor header elementen.
• Hier kun je het winkelmandje in- of uitschakelen, maar voor de echte vormveranderingen hebben we een andere aanpak nodig.

Als je merkt dat de standaardopties niet voldoende zijn voor jouw visie, dan is het tijd om naar de krachtigere onderdelen van het systeem te kijken. Voor een uitgebreide uitleg over het bouwen van een volledige navigatiebalk kun je onze divi theme builder header gids raadplegen, waar we dieper ingaan op de structuur van je website.

Het winkelmandje icoon aanpassen via de divi theme builder

De theme builder is misschien wel het meest krachtige onderdeel van het thema. Hiermee kun je sjablonen maken voor je hele website, inclusief de koptekst waar het winkelmandje zich meestal bevindt. In plaats van de standaard header te gebruiken, bouw je een eigen ontwerp met modules.

Wanneer je een menu module toevoegt aan je globale header, heb je meer controle. Hoewel de menu module zelf vaak nog steeds het standaard icoon toont, kun je door middel van een tekst module of een icon module een eigen winkelmandje toevoegen. Dit vereist wel dat je de link naar de winkelwagen handmatig instelt. Dit is een uitstekende methode voor mensen die volledige visuele vrijheid willen zonder direct in de code te duiken.

Het voordeel van deze methode is dat je elk gewenst icoon uit de uitgebreide bibliotheek kunt kiezen. Je kunt zelfs een afbeelding uploaden als je een heel specifiek ontwerp hebt laten maken door een grafisch vormgever. Dit zorgt voor een naadloze integratie met de rest van je wordpress webdesign.

Geavanceerde methode: gebruik maken van css

Voor degenen die niet bang zijn voor een klein beetje techniek, is css de beste manier om het icoon te veranderen. Css staat voor cascading style sheets en is de taal die bepaalt hoe je website eruitziet. Met een paar regels code kun je het standaard icoon vervangen door een ander karakter uit het elegante iconenpakket dat standaard in het thema zit.

Elk icoon in dit systeem heeft een unieke code, ook wel een unicode genoemd. Door het pseudo-element van het winkelmandje aan te spreken in je stylesheet, kun je de inhoud veranderen. Dit klinkt ingewikkeld, maar het komt erop neer dat je tegen de browser zegt: “laat hier niet het standaard karretje zien, maar dit specifieke andere symbool”.

Je kunt deze code toevoegen bij de extra css in de theme customizer of in het tabblad geavanceerd van de thema opties. Het grote voordeel hiervan is dat het icoon overal op de site consistent verandert en dat de functionaliteit, zoals het tonen van het aantal producten, behouden blijft. Als je hulp nodig hebt bij het implementeren van dergelijke maatwerk oplossingen, kun je altijd terecht bij onze experts voor professioneel wordpress webdesign.

Het belang van een goed werkend winkelmandje

Naast het uiterlijk is de werking van het winkelmandje cruciaal. Niets is zo vervelend voor een klant als een icoon dat niet reageert of een pagina die traag laadt. Zorg er daarom altijd voor dat je wijzigingen test op verschillende apparaten, zoals mobiele telefoons en tablets. Wat er op een desktop prachtig uitziet, kan op een klein scherm soms wegvallen of onhandig geplaatst zijn.

Daarnaast is de snelheid van je website van belang voor de gebruikerservaring. Te veel zware afbeeldingen of ingewikkelde scripts kunnen je site vertragen. Het gebruik van een lichtgewicht icoon via een font is daarom vaak beter dan het uploaden van een zware afbeelding. Een snelle webshop zorgt voor tevreden klanten en een hogere positie in de zoekresultaten.

Stapsgewijze uitleg voor de css methode

Wil je direct aan de slag met de meest flexibele methode? Volg dan deze stappen om via code je icoon te transformeren. We leggen het uit voor de niet-technische gebruiker, zodat je precies weet wat je doet.

• Zoek eerst de unicode op van het icoon dat je wilt gebruiken. elk symbool in het systeem heeft een code die begint met een backslash, bijvoorbeeld \e015.
• Open je wordpress dashboard en ga naar divi en dan naar thema opties.
• Scroll helemaal naar beneden naar het vak aangepaste css.
• Plak hier de code die het standaard winkelmandje selecteert en vervang de inhoud door jouw nieuwe code.
• Klik op wijzigingen opslaan en ververs je website om het resultaat te bekijken.

Mocht je na het opslaan van de wijzigingen geen verschil zien, dan kan het zijn dat je browser een oude versie van de pagina laat zien. Dit noemen we caching. Het legen van je cache of het bekijken van de site in een incognito-venster lost dit meestal op. Soms kan een technisch probleem zoals een wit scherm optreden bij grotere wijzigingen; lees dan onze tips over het oplossen van visual builder problemen.

Conclusie en volgende stappen

Het aanpassen van het woocommerce winkelmandje icoon in divi is een uitstekende manier om je webshop net dat beetje extra karakter te geven. Of je nu kiest voor de eenvoudige weg via de theme builder of de meer geavanceerde route via css, het resultaat is een website die beter aansluit bij jouw merkidentiteit. Vergeet niet dat een webshop nooit echt ‘af’ is; blijf experimenteren met kleine details om te zien wat het beste werkt voor jouw klanten.

Heb je na het lezen van deze gids nog vragen of wil je dat een expert meekijkt naar de inrichting van jouw webshop? Bij prospects4u helpen we ondernemers dagelijks met het optimaliseren van hun online aanwezigheid. Of het nu gaat om een klein icoontje of een complete herinrichting van je verkoopkanaal, wij staan voor je klaar om van jouw project een succes te maken.