Uw verlanglijstpagina is vaak de laatste halte voor een klant voordat ze besluiten te kopen. Als die pagina eruitziet als een generieke plugin die niet past bij uw zorgvuldig gekozen merkkleuren en lettertypen, kan dit een 'vervreemding' creëren die het vertrouwen schaadt.
Standaard gebruikt de verlanglijstpagina een blauw kleurenschema dat niet altijd past bij elk WordPress-thema. De instellingen voor Stijlaanpassing van de verlanglijstpagina van SaveTo Wishlist laten u de typografie en kleuren van de verlanglijstpagina wijzigen, zodat deze overeenkomt met de branding van uw winkel, zonder dat u CSS hoeft te schrijven.
Deze handleiding behandelt de beschikbare stijlinstellingen en hoe u deze kunt toepassen.
💡 Opmerking:
Deze instellingen hebben specifiek invloed op de hoofdverlanglijstpagina (waar klanten hun opgeslagen items bekijken) in plaats van op de 'Toevoegen aan verlanglijst'-knoppen op productpagina's.
🔗 Externe bron:
Als u niet zeker weet welke kleuren u moet gebruiken, raden we u aan Adobe Color te bekijken voor inspiratie voor toegankelijke kleurenpaletten.
Vereisten
Zorg ervoor dat u het volgende hebt voordat u begint:
- SaveTo Wishlist Lite geïnstalleerd en geactiveerd in uw winkel
- Een verlanglijstpagina die al is ingesteld (de plugin maakt er automatisch een aan bij activering)
Stap-voor-stap: Uw aangepaste verlanglijstpagina ontwerpen
1. Vind de stijlinstellingen
Al uw ontwerptools zijn gegroepeerd voor gemakkelijke toegang.
- Ga naar SaveTo Wishlist → Instellingen.
- Klik op het tabblad Verlanglijstpagina en scrol omlaag naar de sectie Stijlen.
2. Kop- en titels aanpassen
De kop is het eerste wat uw klanten zien. Laat het opvallen:
- Koptekstgrootte en -kleur: Pas de Koptekstgrootte en Koptekstkleur aan zodat deze overeenkomen met de belangrijkste H1- of H2-tags van uw site.
- Tekstgrootte en -kleur van koptekst: Beheer het subtekst- of beschrijvingsgebied om ervoor te zorgen dat het leesbaar is en overeenkomt met de body-lettertypekleur van uw merk.
3. De verlanglijsttabel stylen
Hier staan de productgegevens. U kunt nu het 'technische' uiterlijk van de lijst finetunen:
- Tekstgrootte van tabelkolommen: Wijzig de tekstgrootte voor koppen zoals 'Productnaam' of 'Prijs'.
- Tekstgrootte van tabelrijen: Pas de lettergrootte van de itemdetails in de lijst aan voor betere leesbaarheid op desktop en mobiel.
4. De popup-modal ontwerpen
Als u de Popup-actie gebruikt, zorg er dan voor dat het venster overeenkomt met de esthetiek van uw site:
- Titelgrootte en -kleur van popup: Stel de lettergrootte en kleur van uw popuptitel in.
- Tekstgrootte en -kleur van popup: Gebruik deze bedieningselementen om ervoor te zorgen dat de instructies duidelijk zijn.
- Opslaan- en Annuleren-knoppen van popup: Gebruik de kleurkiezer voor de knoppen Opslaan en Annuleren.
💡 Opmerking:
Gebruik uw primaire merk kleur voor de Opslaan knop, aangezien deze de aandacht trekt naar de actie.
5. Style de knoppen
Pas de grootte en kleuren van de knoppen op de verlanglijstpagina aan:
- Tekstgrootte knop: Maak uw "Toevoegen aan winkelwagen" knop groter of kleiner om deze aan te passen aan uw design.
- Tekstkleur knop: Zorg voor een hoog contrast (bijv. witte tekst op een donkere achtergrond) door een aangepaste kleur te selecteren.
- Achtergrondkleur knop: Verander het standaard blauw naar uw primaire merk kleur.
6. Voorbeeld en opslaan
- Klik op Wijzigingen opslaan onderaan de pagina.
- Open uw verlanglijstpagina in een nieuw incognito venster om de wijzigingen precies te zien zoals uw klanten dat zullen doen.
✨ Bonustip: Verlanglijstlinks aanpassen
Standaard nemen de links op uw Verlanglijstpagina (zoals producttitels) meestal de globale linkinstellingen van uw thema over. Als u deze kleuren wilt wijzigen om beter aan te sluiten bij uw nieuwe knopstijlen, kunt u deze instellingen meestal vinden in uw WordPress Dashboard onder Uiterlijk → Aanpassen → Typografie → Link / Accentkleur.
💡 Opmerking:
Elk thema is anders opgebouwd! Afhankelijk van welk thema u hebt geïnstalleerd, kan deze instelling ook onder "Globale kleuren" of "Knop & Link Stijlen" staan.
Het thema de styling laten bepalen
De Stijlinstellingen hierboven geven u controle via de eigen kleur- en lettertypeopties van de plugin. Maar als u liever wilt dat uw thema dit allemaal bepaalt, of als de CSS van uw thema al het zware werk doet, kunt u SaveTo Wishlist vertellen om aan de kant te gaan.
Ga naar SaveTo Wishlist → Instellingen → Knop Plaatsing & Stijlen → Frontend Styling. Daar vindt u de instelling Frontend CSS Laden met drie opties:
- Volledige styling — gebruik de kleuren en lettertypen van de plugin (standaard). De plugin laadt zijn volledige kleur- en lettertype stylesheet. Dit is de standaardervaring.
- Minimale styling — laat uw thema kleuren en lettertypen overschrijven. De stylesheet wordt nog steeds geladen, maar
!importantwordt niet gebruikt op decoratieve eigenschappen zoals kleur, achtergrond en rand, zodat de CSS van uw thema de cascade kan winnen. - Geen styling — neem kleuren en lettertypen over van het actieve thema. Knopgroottes, posities en lay-out blijven in elke modus behouden. Alleen visuele styling verandert.
💡 Opmerking:
Admin-stijlen worden niet beïnvloed door deze instelling. Het regelt alleen hoe de frontend-stylesheet wordt geladen voor uw klanten.
Voor & na: De verlanglijstpagina aanpassen aan uw branding
Hieronder een voor-en-na vergelijking die laat zien hoe de verlanglijstpagina kan worden aangepast om beter aan te sluiten bij het thema van uw winkel.
Wisselen tussen tabel- en rasterweergave
Uw klanten zijn niet gebonden aan één enkele lay-out. Op de verlanglijstpagina zien ze een weergavekiezer naast de zoekbalk. Eén klik schakelt tussen de standaard tabelindeling en een raster (tegel) indeling.
De rasterweergave toont de verlanglijstitems als responsieve producttegels. De lay-out past zich aan de schermbreedte aan, toont één kolom op kleine mobiele schermen en stapt op naar twee, dan drie, en uiteindelijk vier kolommen op de breedste schermen. Elke tegel toont de productafbeelding, naam, prijs, voorraadstatus, hoeveelheid en een knop "Toevoegen aan winkelwagen". Alle gebruikelijke itemacties (het driepuntsmenu) zijn nog steeds beschikbaar.
Welke weergave een klant ook kiest, deze wordt opgeslagen in hun browser, dus deze is er de volgende keer dat ze bezoeken vanaf hetzelfde apparaat nog steeds.
Problemen met uw ontwerp oplossen
Mijn wijzigingen worden niet weergegeven op de site
Dit komt bijna altijd door caching. Als u een plugin zoals WP Rocket, LiteSpeed Cache, of een CDN zoals Cloudflare gebruikt, zorg er dan voor dat u Cache Wissen/Opschonen uitvoert na het opslaan van uw stijlen. U kunt ook de officiële WooCommerce-handleiding over caching raadplegen.
De lettertypestijl komt niet exact overeen met mijn thema
De plugin gebruikt standaard de overgenomen lettertypefamilie van uw thema. Deze instellingen laten u de grootte en kleur wijzigen. Als de lettertypefamilie zelf verkeerd lijkt, zorg er dan voor dat de globale CSS van uw thema correct wordt geladen.
De kleuren zien er anders uit op mobiel
Controleer of uw telefoon "Donkere modus" heeft ingeschakeld, aangezien sommige browsers proberen kleuren automatisch om te keren. De kleuren die u instelt in de stijlinstellingen zijn ontworpen om de meeste van deze automatische browseraanpassingen te overschrijven.
Veelgestelde vragen
➤ Moet ik CSS kennen om deze kleuren te wijzigen?
Helemaal niet! We hebben een gebruiksvriendelijke interface gebouwd met kleurkiezers en schuifregelaars, zodat u nooit een regel code hoeft aan te raken.
➤ Zullen deze instellingen mijn pagina vertragen?
Nee. Deze stijlen zijn lichtgewicht en zullen de laadtijd van de pagina niet merkbaar beïnvloeden.
Hulp nodig?
- Premium gebruikers: dien een ondersteuningsticket in en ons team helpt u verder.
- Gratis gebruikers: plaats een bericht in het WordPress.org ondersteuningsforum.
