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.
Geselecteerde Verlanglijst Knop Actie bepaalt wat er gebeurt wanneer een shopper op de knop klikt van een product dat al op hun verlanglijst staat. De standaardinstelling is Verwijderen van Verlanglijst, waarmee het product met één klik weer wordt verwijderd. Schakel het over naar Verlanglijst Bekijken om de shopper in plaats daarvan naar hun verlanglijstpagina te sturen.
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.
Knop Plaatsing bepaalt waar de knop verschijnt op de productpagina. De standaardinstelling is Onder de Toevoegen aan Winkelwagen Knop, maar u kunt ook kiezen voor Boven de Toevoegen aan Winkelwagen Knop, In lijn met de Toevoegen aan Winkelwagen Knop, Boven de Product Titel, Onder de Product Titel, Rechtsboven bij de Productafbeelding, of Linksboven bij de Productafbeelding. Om de verlanglijstknop op enkele productpagina's volledig te verbergen, kiest u Niet weergeven.
⚠️ 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 Voorkeursinstellingen Gebruiken om te kiezen uit kant-en-klare stijlcombinaties, Aangepaste Instellingen om de volledige kleurkiezer, lettertypen en groottecontroles handmatig te openen, of Themadefault om het uiterlijk van de knop van uw actieve thema over te nemen.
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.
Knop Plaatsing staat standaard onder de knop Toevoegen aan Winkelwagen, maar u kunt de knop ook plaatsen in de rechterboven- of linkerbovenhoek van productafbeeldingen of boven/onder producttitels. Voor een strakke, moderne uitstraling op rasterpagina's werkt de positie in de hoek meestal erg goed. Om de verlanglijstknop op winkel-, categorie- en archiefpagina's te verbergen, kiest u Niet weergeven.
Net als de sectie Productpagina heeft deze de optie Configuratiemodus. Kies Voorkeursinstellingen Gebruiken voor een snelle installatie met kant-en-klare combinaties, Aangepaste Instellingen om elke kleur, lettergrootte, randbreedte en tekststijl fijn af te stemmen op de branding van uw winkel, of Themadefault om het uiterlijk van de knop van uw actieve thema over te nemen.
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 Voorkeursinstellingen Gebruiken voor een snelle installatie, Aangepaste Instellingen om zelf de kleuren, lettertypen en groottes te regelen, of Themadefault om het uiterlijk van de knop van uw actieve thema over te nemen.
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
