Uw winkel heeft zijn eigen uitstraling, met zijn eigen kleuren, lettertypen en lay-out. Deze handleiding laat u zien hoe u de SaveTo Wishlist knop hierop kunt afstemmen, op de product-, winkel- en winkelwagenpagina's, zonder enige code aan te raken.
Vereisten
- WooCommerce geïnstalleerd en geconfigureerd.
- SaveTo Wishlist Lite geïnstalleerd en actief.
- Administrator toegang tot uw WordPress-dashboard.
Verlanglijstactie
De instelling Knop Toevoegen aan verlanglijst bepaalt wat er gebeurt wanneer een klant op de verlanglijstknop klikt. U vindt deze onder SaveTo Wishlist → Instellingen → Algemeen → Verlanglijstactie.
Er zijn drie opties:
- Doorsturen: stuurt de klant direct naar hun verlanglijstpagina na het klikken. Goed voor winkels waar u wilt dat klanten hun verlanglijst onmiddellijk bekijken.
- Pop-up: toont een bevestigingspop-up zonder de pagina te verlaten. Handig als u wilt dat shoppers op de pagina blijven en verder winkelen.
- Vervagen: een klein bevestigingsbericht vervaagt naast de knop om te bevestigen dat het product is opgeslagen, zonder navigatie of pop-up. Het is de meest subtiele optie, ideaal als u minimale onderbreking van de winkelstroom wilt.
Waar de instellingen te vinden
Ga naar uw WordPress Dashboard → SaveTo Wishlist → Instellingen → Knop Plaatsing & Stijlen.
U ziet vijf hoofdsecties:
- Knopinstellingen – label van de verlanglijstknop en het label dat wordt weergegeven nadat een product is toegevoegd
- Frontend Styling – de instelling Frontend CSS Laden die bepaalt hoeveel van de CSS van de plugin wordt geladen in uw storefront (behandeld in de sectie Frontend CSS laden hieronder)
- Productpagina – knopplaatsing en stijl op individuele productpagina's
- Winkelpagina – knopplaatsing en stijl op productvermeldingen
- Winkelwagenpagina – stijl en label voor de knop "Winkelwagen opslaan in verlanglijst"
Knopinstellingen
Label Verlanglijstknop stelt de standaardtekst in voor alle verlanglijstknoppen in uw winkel. De standaard is Opslaan in verlanglijst, maar u kunt dit wijzigen in iets dat past, zoals Toevoegen aan favorieten of Later bewaren. Houd het kort en duidelijk.
Label Geselecteerde Verlanglijstknop laat u een ander label weergeven nadat een product aan de verlanglijst is toegevoegd. De standaard is Verwijderen uit verlanglijst, waarmee shoppers het item met één klik kunnen verwijderen. U kunt dit wijzigen in iets dat bij uw winkel past.
Pro tip: Houd knoplabels kort en actiegericht om het voor shoppers gemakkelijk te maken actie te ondernemen.
Productpagina
De sectie Productpagina bepaalt hoe de verlanglijstknop verschijnt op individuele productpagina's waar shoppers een enkel product bekijken voordat ze kopen.
Knoplocatie bepaalt waar de knop op de productpagina verschijnt. De standaardinstelling is Onder de knop Toevoegen aan winkelwagen, maar u kunt ook kiezen voor Boven de knop Toevoegen aan winkelwagen, Boven de producttitel, Onder de producttitel, Rechtsboven de productafbeelding, of Linksboven de productafbeelding.
⚠️ Producten zonder prijs of niet op voorraad: Vanaf versie 1.0.7 tonen de plaatsingen Boven de knop Toevoegen aan winkelwagen en Onder de knop Toevoegen aan winkelwagen ook de verlanglijstknop op producten die geen prijs hebben, niet op voorraad zijn of in catalogusmodus zijn. Deze producten verbergen normaal gesproken het WooCommerce-formulier voor toevoegen aan winkelwagen, dus de knop valt nu terug op een nabijgelegen plek in de productbeschrijving in plaats van te verdwijnen.
De volgende instelling is de optie Configuratiemodus. Kies Voorinstellingen gebruiken om te kiezen uit kant-en-klare stijlcombinaties, of kies Aangepaste instellingen om handmatig de volledige kleurkiezer, lettertypen en groottecontroles te openen.
Pro-tip: Gebruik de live preview om te zien hoe uw knop eruitziet in zowel de normale als de hover-status voordat u uw wijzigingen opslaat.
Winkelpagina
De sectie Winkelpagina regelt hoe verlanglijstknoppen verschijnen op uw productgrids, categorisepagina's en archiefpagina's, overal waar shoppers meerdere producten tegelijk bekijken.
Knoplocatie staat standaard onder de knop Toevoegen aan winkelwagen, maar u kunt de knop ook in de rechterbovenhoeken van productafbeeldingen of boven/onder producttitels plaatsen. Voor een strakke, moderne uitstraling op gridpagina's werkt de positie in de rechterbovenhoek doorgaans erg goed.
Net als de sectie Productpagina heeft deze de optie Configuratiemodus. Kies Voorinstellingen gebruiken voor een snelle installatie met kant-en-klare combinaties, of Aangepaste instellingen om elke kleur, lettergrootte, randbreedte en tekststijl te finetunen om bij uw winkelbranding te passen.
Pro-tip: Probeer voor een strakke, moderne winkelpagina knoppen met alleen een icoon in de rechterbovenhoeken. Dit bespaart ruimte terwijl de verlanglijstoptie zichtbaar blijft.
Winkelwagenpagina
De sectie Winkelwagenknoptekst is voor de knop “Bewaar winkelwagen op verlanglijst”, de knop waarmee shoppers hun hele winkelwagen in één keer kunnen opslaan. Het is geweldig voor klanten die later terug willen komen of hun selecties willen delen.
De Winkelwagenknoptekst staat standaard op “Bewaar winkelwagen op verlanglijst”. U kunt dit wijzigen in iets vriendelijkers zoals Bewaar winkelwagen voor later of ♥ Bewaar mijn winkelwagen. Dezelfde opties voor stijl, kleur, lettertype en grootte die beschikbaar zijn op de product- en winkelpagina's, zijn hier van toepassing, zodat u de consistentie in uw winkel kunt bewaren.
Deze sectie heeft ook de optie Configuratiemodus: kies Voorinstellingen gebruiken voor een snelle installatie, of Aangepaste instellingen om zelf de kleuren, lettertypen en groottes te regelen.
Frontend CSS laden
De instelling Frontend CSS laden bepaalt hoeveel van de stylesheet van de plugin wordt geladen op uw winkel. U vindt deze onder SaveTo Wishlist → Instellingen → Knop Plaatsing & Stijlen → Frontend Styling.
Er zijn drie opties:
- Volledige styling — gebruik de kleuren en lettertypen van de plugin (standaard). Laadt de volledige stylesheet van de plugin. Werkt direct voor de meeste winkels.
- Minimale styling — laat uw thema kleuren en lettertypen overschrijven. Laadt kleuren en achtergronden zonder
!importantoverrides, zodat de CSS van uw thema kan winnen waar deze conflicteert. Probeer dit eerst als de verlanglijstknop conflicteert met uw thema. - Geen styling — neem kleuren en lettertypen over van het actieve thema. Laat de kleuren en lettertypen van de plugin vallen, zodat de knop deze overneemt van uw thema. Het beste voor ontwikkelaars die een volledig aangepaste build doen. De knopgroottes, posities en layout CSS van de plugin blijven in elke modus behouden.
Samenvatting
Gebruik Verlanglijst Actie (Instellingen → Algemeen) om te bepalen wat er gebeurt na een klik. Gebruik Knop Plaatsing & Stijlen om labels, plaatsing, kleuren en CSS-laden in te stellen voor elke pagina waar de knop verschijnt, met Omleiden, Popup of Vervagen die bepalen wat er na een klik gebeurt.
Beste praktijken
- Stem knopkleuren en -stijl af op uw winkelthema
- Houd labels kort en actiegericht
- Test knoppen op mobiel voor leesbaarheid en tikgrootte
- Gebruik de live preview om uw instellingen te bevestigen voordat u opslaat
Probleemoplossing
Knopstijl wordt niet bijgewerkt na opslaan
Als u instellingen wijzigt en de knop er aan de voorkant hetzelfde uitziet, probeer dan de Configuratiemodus te wisselen van Voorinstellingen gebruiken naar Aangepaste instellingen (of vice versa) en sla opnieuw op. Wis ook eventuele caching plugins of CDN-cache. Gecachte CSS kan voorkomen dat stijlveranderingen worden weergegeven.
Verlanglijstknop conflicteert met thema CSS
Als de knop er kapot uitziet of conflicteert met uw themastijlen, ga dan naar SaveTo Wishlist → Instellingen → Knop Plaatsing & Stijlen → Frontend Styling en schakel Frontend CSS laden van Volledige styling naar Minimale styling. Dit laat de CSS van uw thema kleuren en lettertypen overschrijven waar ze conflicteren. Voor een volledig aangepaste build geeft Geen styling u een blanco lei.
Veelgestelde vragen
Wat is het verschil tussen Voorinstellingen gebruiken en Aangepaste instellingen?
Voorinstellingen bieden u een set kant-en-klare stijlcombinaties, zodat één klik een gecoördineerde look toepast. Aangepaste instellingen ontgrendelen individuele bedieningselementen voor kleur, lettergrootte, randbreedte, icoon en hover-effecten, zodat u alles handmatig kunt finetunen.
Wat doet Fade visueel precies?
Op product- en winkelpagina’s toont het klikken op de verlanglijstknop een korte bevestigingsmelding (een vinkje en “Toegevoegd aan [verlanglijstnaam]”) die naast de knop verschijnt, ongeveer twee seconden blijft staan en dan weer verdwijnt. De knop zelf blijft de hele tijd zichtbaar. Op de winkelwagenpagina verdwijnt de knop Opslaan winkelwagen naar verlanglijst kort om de opslag te bevestigen. Er is geen pop-up en geen paginaomleiding.
Blijven mijn aanpassingen behouden als ik van thema wissel?
Ja. Knopstijlen worden opgeslagen in de plugininstellingen, niet in je thema. Het wisselen van thema zal je labeltekst, kleuren of plaatsingskeuzes niet opnieuw instellen. Dat gezegd hebbende, sommige thema’s overschrijven knopstijlen met hun eigen CSS, dus het is de moeite waard om het uiterlijk te controleren na een themawijziging.
Hulp nodig?
- Premium gebruikers: Open een supportticket
- Gratis gebruikers: Bezoek ons communityforum
