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: het label van de winkelwagenknop, het label dat wordt weergegeven nadat een product is toegevoegd, en aan/uit-schakelaars voor ondersteunde plugins zoals Quick View for WooCommerce (deze verschijnen alleen terwijl die plugin actief is)
- Frontend Styling: de instelling Frontend CSS Loading die bepaalt hoeveel van de CSS van de plugin wordt geladen op je winkel (behandeld in de sectie Frontend CSS loading hieronder)
- Productpagina: knopplaatsing en stijl op individuele productpagina's
- Winkelpagina: knopplaatsing en stijl op productvermeldingen
- Winkelwagenpagina: stijl en label voor de knop "Sla winkelwagen op in winkelwagen"
Nadat u een instelling op dit tabblad hebt gewijzigd, klikt u op Wijzigingen opslaan.
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.
Als een ondersteunde plugin zoals Quick View for WooCommerce actief is, toont deze sectie ook een aan/uit-schakelaar ervoor. Zie De knop gebruiken met Quick View for WooCommerce hieronder.
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 wordt weergegeven op de productpagina. De standaardinstelling is Rechtsboven bij de Productafbeelding, maar u kunt ook kiezen voor Linksboven bij de Productafbeelding, Boven de Toevoegen aan Winkelwagen knop, Onder de Toevoegen aan Winkelwagen knop, In lijn met de Toevoegen aan Winkelwagen knop, Boven de Producttitel, of Onder de Producttitel. Om de verlanglijstknop volledig te verbergen op individuele productpagina's, kiest u Niet weergeven.
Als u kiest voor In lijn met de Toevoegen aan Winkelwagen knop, verschijnt er een veld Knopafstand, de ruimte in pixels tussen de Toevoegen aan Winkelwagen knop en de verlanglijstknop. De standaard is 16px en kan worden ingesteld van 0 tot 60px. Uw waarde geldt op elk apparaat. Op aanraakschermen wordt een afstand van minder dan 8px verhoogd tot 8px, zodat klanten niet op de verkeerde knop tikken.
⚠️ Producten zonder prijs of uitverkocht: Vanaf versie 1.0.7 tonen de plaatsingen Boven de knop Toevoegen aan winkelwagen, Onder de knop Toevoegen aan winkelwagen en In lijn met de knop Toevoegen aan winkelwagen ook de winkelwagenknop op producten die geen prijs hebben, uitverkocht zijn of in catalogusmodus zijn. Deze producten verbergen normaal gesproken het "Toevoegen aan winkelwagen"-formulier van WooCommerce, dus de knop valt terug op een nabijgelegen plek in de product samenvatting in plaats van te verdwijnen.
De volgende instelling is Configuratiemodus. Kies Voorkeursinstellingen gebruiken om te kiezen uit kant-en-klare stijlcombinaties, Aangepaste instellingen om zelf de kleuren, randen en tekst in te stellen, of Standaard thema om de eigen knopweergave van uw actieve thema over te nemen.
Knopkleuren en randen instellen
De kleur- en randvelden verschijnen onder Pas de verlanglijstknop op de productpagina aan, en alleen wanneer Configuratiemodus is ingesteld op Aangepaste instellingen. Elk kleurveld opent een kleurenkiezer.
| Veld | Wat het verandert | Standaard |
|---|---|---|
| Knop Tekstkleur | De kleur van de knoptekst. Dit geldt voor knoptypen die tekst weergeven. | #1F2937 |
| Knop Tekstkleur bij Hover | De tekstkleur terwijl een shopper met de muis over de knop gaat. | #DC2626 |
| Knop Achtergrondkleur | De vulkleur achter de knop. | #FFFFFF |
| Knop Achtergrondkleur bij Hover | De vulkleur terwijl een shopper met de muis over de knop gaat. | #F9FAFB |
| Knop Randkleur | De kleur van de knoprand. | #E5E7EB |
| Knop Randkleur bij Hover | De randkleur terwijl een shopper met de muis over de knop gaat. | #DC2626 |
| Knop Randdikte | De randdikte in pixels, van 0 tot 5. | 1 |
| Knop Randafgerondheid | Hoe rond de knophoeken zijn, in pixels, van 0 tot 50. Gebruik 0 voor vierkante hoeken. | 4 |
| Knop Verticale Opvulling | De ruimte boven en onder de knopinhoud, in pixels, van 0 tot 30. | 3 |
| Knop Horizontale Opvulling | De ruimte links en rechts van de knopinhoud, in pixels, van 0 tot 40. | 8 |
Niet elk veld is van toepassing op elk knoptype. De randkleur en -dikte worden alleen weergegeven voor Alleen Tekst en de drie Pil knoptypen. De achtergrondkleuren, randafgerondheid en opvulling zijn niet van toepassing op Alleen Icoon, Solide Icoon of Minimaal Icoon.
Kies het knoptype en de tekststijl
Drie extra velden bevinden zich onderaan de aangepaste instellingen. Knop Tekstgrootte stelt de grootte van de knoptekst in pixels in, van 10 tot 24 (standaard 14). Knop Tekststijl schakelt de tekst tussen Normaal (standaard) en Cursief.
Knoptype bepaalt wat de knop toont en hoe deze eruitziet. De standaard is Minimaal pictogram en tekst. De opties zijn:
- Alleen tekst
- Alleen icoon
- Icoon en tekst
- Icoon en tekst pil
- Solide icoon
- Solide icoon en tekst
- Solide icoon en tekst pil
- Minimaal icoon
- Minimaal icoon en tekst
- Minimaal icoon en tekst pil
Alleen pictogram, Vast pictogram en Minimaal pictogram tonen alleen het pictogram, dus de velden voor tekst, achtergrond, rand en opvulling hebben niets om voor te wijzigen. Om de vorm van het pictogram zelf te kiezen, zie Een knoppictogram kiezen hieronder.
Pro tip: Met Aangepaste instellingen geselecteerd, gebruik je de live preview om te zien hoe je knop eruitziet in zowel normale als hover-toestanden voordat je je 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 is standaard rechtsboven de productafbeelding, maar je kunt deze ook linksboven, boven of onder de knop Toevoegen aan winkelwagen, of boven of onder de producttitel plaatsen. De posities in de hoeken passen het beste bij rasterpagina's. Om de winkelwagenknop op winkel-, categorie- en archiefpagina's te verbergen, kies je 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. De aangepaste velden komen overeen met die van de Productpagina, behalve dat Knoptype hier Knopstijl wordt genoemd.
Pro tip: Voor een strakke, moderne winkelpagina selecteer je Aangepaste instellingen, stel je Knopstijl in op Alleen icoon, en gebruik je een plaatsing in de hoek. Dit bespaart ruimte terwijl de winkelwagenoptie zichtbaar blijft.
De knop gebruiken met page builders
Als u uw winkel- of categorielay-out bouwt met de Elementor Pro Loop Grid of Loop Carousel widgets, wordt de verlanglijstknop automatisch binnen elke productkaart weergegeven, met de plaatsing die u hierboven hebt ingesteld bij Winkelpagina. Geen aparte instelling nodig, maar Elementor Pro moet actief zijn.
Productrasters en carrousels van Premium Addons for Elementor krijgen ook automatisch de knop, volgens uw Winkelpagina plaatsing. Rechtsboven bij de Productafbeelding en Linksboven bij de Productafbeelding tonen de knop bovenaan het detailgebied van de kaart in plaats van op de afbeelding. Zie Hoe de verlanglijstknop toe te voegen met de Elementor widget voor details.
Als je de knop zelf plaatst met de widgets of modules van een builder in plaats van deze instellingen, raadpleeg dan de speciale handleiding voor jouw builder: Hoe de winkelwagenknop toe te voegen met de Elementor-widget, Hoe de winkelwagen toe te voegen aan Divi Builder-lay-outs, of Hoe de winkelwagen toe te voegen aan een pagina met Flatsome's UX Builder.
De knop gebruiken met Blocksy
Als je winkel het Blocksy thema of een Blocksy kindthema gebruikt, heb je geen aangepaste CSS nodig. SaveTo Wishlist laadt automatisch zijn eigen Blocksy-styling, zodat de knop past bij de winkel-, archief- en productpagina's van Blocksy.
Op de Winkelpagina werkt elke plaatsing als volgt op Blocksy:
- Rechtsboven op de productafbeelding, de standaardinstelling, past het beste, omdat Blocksy de linkerbovenhoek van de kaart gebruikt voor zijn Sale-badge.
- Linksboven op de productafbeelding verplaatst de knop naar onder een Sale-, niet-op-voorraad- of aangepaste Blocksy-badge, zodat deze deze niet bedekt. Als de badge erg groot is, of als je meer dan één badge in die hoek weergeeft, gebruik dan Rechtsboven op de productafbeelding.
- Boven de producttitel en Onder de producttitel tonen beide de knop tussen de productafbeelding en de titel, omdat Blocksy zijn eigen titel rendert. Boven de Toevoegen aan winkelwagen-knop toont deze direct onder de titel. Onder de Toevoegen aan winkelwagen-knop toont deze na de Toevoegen aan winkelwagen-knop. Alle vier volgen ze de uitlijning van je Blocksy-kaart: links, midden of rechts.
Op de Productpagina werken alle zeven plaatsingen. Inline met de Toevoegen aan winkelwagen-knop staat naast de Toevoegen aan winkelwagen-knop op desktop en verplaatst zich eronder op smalle schermen. Linksboven op de productafbeelding verplaatst zich ook naar onder een badge in die hoek, hetzelfde als op de winkelpagina.
De knop gebruiken met Quick View for WooCommerce
Als je winkel Reno Quick View van ShapedPlugin (voorheen Quick View for WooCommerce) gebruikt, verschijnt de knop Opslaan in winkelwagen ook in de popup voor snelle weergave. Klanten kunnen een product opslaan zonder de productpagina te openen. Hiervoor is SaveTo Wishlist Lite 1.1.7 of nieuwer vereist.
De popup gebruikt je Productpagina-plaatsing en -stijl, dus er is niets extra's om in te stellen. Een paar dingen werken net iets anders in de popup:
- Rechtsboven op de productafbeelding en Linksboven op de productafbeelding tonen de knop boven de producttitel, niet op de afbeelding.
- Bij een variabel product volgt de knop de variatie die de klant in de popup kiest.
- Als de plaatsing op de productpagina is ingesteld op Niet tonen, wordt de knop ook niet in de popup getoond.
Om de knop buiten de popup te houden, maar wel op je productpagina's te tonen:
- Ga naar SaveTo Wishlist → Instellingen → Knop Plaatsing & Stijlen → Knopinstellingen.
- Schakel Tonen in Quick View voor WooCommerce uit.
- Klik op Wijzigingen opslaan.
De schakelaar staat standaard aan. Deze verschijnt alleen terwijl Quick View voor WooCommerce actief is.
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.
Het Label winkelwagenknop is standaard ingesteld op “Winkelwagen opslaan in verlanglijst”. U kunt dit wijzigen in iets vriendelijkers zoals Winkelwagen opslaan voor later of ♥ Mijn winkelwagen opslaan. Dezelfde knopstijl, kleur, rand en tekstopties die beschikbaar zijn op de product- en winkelpagina's, zijn hier van toepassing, zodat u de consistentie in uw winkel kunt behouden.
Deze sectie heeft ook de optie Configuratiemodus: kies Voorkeursinstellingen gebruiken voor een snelle installatie, Aangepaste instellingen om zelf de kleuren, randen en tekst te regelen, of Themadefault om het uiterlijk van de knop van uw actieve thema over te nemen. Net als op de winkelpagina wordt Knoptype hier Knopstijl genoemd.
Een knopicoon kiezen
Door de Configuratiemodus op Aangepaste instellingen te zetten op de product-, winkel- of winkelwagenpagina wordt een instelling voor Knopicoon voor die pagina weergegeven. Kies uit Hart (standaard), Ster, Bladwijzer of Plus, of kies Aangepast afbeelding om een uploader voor Aangepast knopicoon weer te geven. De knop blijft een hart tonen totdat er een afbeelding is geüpload.
Dezelfde aangepaste instellingen omvatten ook Pictogramkleur knop en Pictogramkleur knop bij hover (beide standaard #DC2626), en Pictogramgrootte knop, van 12 tot 40 pixels (standaard 20). De velden voor de pictogramkleur zijn verborgen wanneer u Aangepaste afbeelding kiest, omdat deze een geüploade afbeelding niet kunnen wijzigen.
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 Winkelwagenactie (Instellingen → Algemeen) om te bepalen wat er na een klik gebeurt. Gebruik Knop plaatsing & Stijlen om labels, plaatsing, kleuren en CSS-laden in te stellen voor elke pagina waar de knop verschijnt.
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.
Wenslijstknop ontbreekt in de quick view popup
Ga naar SaveTo Wishlist → Instellingen → Knop Plaatsing & Stijlen → Knopinstellingen en controleer of Tonen in Quick View voor WooCommerce aan staat. Controleer vervolgens of de plaatsing op de Productpagina niet is ingesteld op Niet tonen. Als alleen ingelogde shoppers deze niet kunnen zien, staat Gastwenslijst uitschakelen onder Instellingen → Gastopties waarschijnlijk aan, wat de knop overal voor gasten verbergt.
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
