SaveTo Wishlist voor WooCommerce

Inzichten & Updates

SaveTo Wishlist Blog

WordPress-handleidingen en bronnen om de verkoop te stimuleren met SaveTo Wishlist

Woostify Wishlist: Hoe Knoppen In WooCommerce In Te Stellen (Plaatsings- & Stylinggids)

Woostify Wishlist: Hoe Knoppen In WooCommerce Te Installeren (Plaatsing & Styling Gids)

U installeert een wishlist plugin in uw Woostify winkel en laadt de winkelpagina. De knop staat ergens vreemd. Het verdringt de Toevoegen aan Winkelwagen knop, of het verbergt zich achter een productafbeelding. Soms verdwijnt het wanneer u met de muis over een productkaart beweegt.

Dat is geen klein cosmetisch probleem. Een Woostify wishlist knop die niemand kan vinden, is een opslag die nooit plaatsvindt. En een opslag die nooit plaatsvindt, is een shopper die u niet terug kunt brengen.

Hier is het goede nieuws: SaveTo Wishlist Lite regelt de styling voor je zodra het Woostify detecteert. Waar de knop moet komen te staan, kan het niet voor je beslissen.

Deze handleiding behandelt dus beide helften. Eerst wat de integratie op zichzelf doet. Vervolgens de plaatsingskeuzes die je maakt voor een naadloze lay-out, inclusief twee specifieke posities die je wilt vermijden.

Inhoudsopgave


Waarom de Plaatsing van de Wishlist-knop Bepaalt Of Winkeliers Opslaan

Lachende jonge vrouw houdt een kleurrijk "Bark Translator" apparaat vast naast een verraste Duitse Herder in een heldere productfoto.
Een duidelijke plaatsing van de verlanglijstknop helpt klanten items op te slaan, zodat ze deze niet kwijtraken (klik om te vergroten).

Een verlanglijst is alleen nuttig als klanten deze daadwerkelijk gebruiken, en de plaatsing speelt een grote rol. Bewijs uit de branche benadrukt hoeveel ruimte er is om op te vallen met een goed ontwerp.

De productpagina UX-benchmark van het Baymard Institute werd bijgewerkt in maart 2026. Hieruit bleek dat 52% van de toonaangevende desktop e-commerce sites middelmatige of slechtere prestaties op productpagina's heeft. Op mobiel stijgt dit cijfer naar 62%. De benchmark omvat 155 of meer sites en meer dan 30.000 handmatig beoordeelde scores.

Productlijsten bieden een nog grotere kans. De benchmark van Baymard toonde aan dat 80% van de e-commerce sites aanzienlijke ruimte laat voor bruikbaarheidsverbetering op productlijsten. Dit betekent dat een duidelijke, doelbewuste lay-out je winkel onmiddellijk zal onderscheiden.

Dan is er nog de apparaatsplitsing. Adobe Analytics meldde dat mobiel 56,4% van de online transacties tijdens de feestdagen van 2025 voor zijn rekening nam, een stijging van 54,5% een jaar eerder. Het testen van je plaatsing op zowel desktop- als mobiele schermen zorgt voor een naadloze ervaring voor alle klanten.

🔍️ Eén ding zien we herhaaldelijk: een winkelier kiest een plaatsing, controleert deze één keer op een laptop en gaat verder. De problemen duiken bijna altijd ergens anders op. Meestal op een categorie-archief, op een variabel product, of op een telefoon. Controleer alle drie voordat je het als voltooid beschouwt.

Wil je het bredere plaatje van klanten die kijken en weggaan? Onze gids over WooCommerce browse-verlating behandelt dat patroon in detail.


Wat de SaveTo Wishlist en Woostify Integratie Werkelijk Doet

Jonge vrouw in een blazer tikt op een holografische winkelinterface met het label Save to Wishlist boven een stadsdakterras.
Dezelfde knop, een dozijn mogelijke plekken — de integratie styleert het, jij plaatst het.

De integratie werkt automatisch als een lichtgewicht compatibiliteitsstylesheet, waardoor je winkel snel blijft en je niet hoeft te graven in complexe instellingenschermen.

SaveTo Wishlist Lite 1.1.1 controleert de actieve WordPress-template-identifier. Wanneer deze exact woostify leest, laadt de plugin een extra stylesheet. Die stylesheet komt bovenop de frontend-stylesheet die je hebt geselecteerd. Het past vervolgens de stapeling, uitlijning en afstand aan, zodat de knop past bij de markup van Woostify.

Hier is wat het verandert, en wat het bewust onaangeroerd laat.

ContextWat de Woostify-stylesheet aanpast
Plaatsingen op afbeeldingen in winkel en archiefVerhoogt de knopcontainer naar z-index: 3, zodat deze boven de productafbeelding wordt gestapeld
Inline plaatsingen in winkel en archiefStelt een verticale flex-lay-out in met een bovenmarge van 10 pixels. Komt ook overeen met de links-, midden- en rechtsuitlijning van Woostify
Samenvatting van enkelvoudig productVoegt een bovenmarge van 12 pixels toe om een ​​schone, evenwichtige afstand te creëren ten opzichte van het element erboven
Kleuren, typografie, randen, afmetingenOngezien. Deze blijven volledig aanpasbaar via uw plugin- en thema-instellingen.

Onze gids voor aanpassing van de wishlist-knop behandelt de instellingen die het uiterlijk bepalen.

Wat de integratie niet doet

De lijst met dingen die de SaveTo Wishlist- en Woostify-integratie niet doen, is net zo nuttig. Het voegt geen JavaScript, geen REST-endpoints en geen database records toe. Het verwerkt geen gebruikersgegevens. Het registreert ook geen Woostify-specifieke weergave-hooks en voegt geen Woostify-instellingenscherm toe.

Aangezien de integratie automatisch op de achtergrond draait, hoeft u niet te zoeken naar een speciaal Woostify-instellingentabblad of -schakelaar. Detectie is automatisch en geen enkele instelling schakelt de Woostify-stylesheet zelf in of uit.

Child themes worden ook ondersteund. Gebruik een child theme waarvan de parent identifier nog steeds woostify is, en de stylesheet wordt op dezelfde manier geladen. De eigen identifier van het child theme wordt niet gebruikt voor detectie.

Zelfs als een aangepaste installatie automatische detectie voorkomt, blijft uw site volledig functioneel. SaveTo Wishlist Lite valt naadloos terug op zijn standaard stylesheet om ervoor te zorgen dat uw knoppen soepel blijven werken.

Stroomdiagram dat laat zien hoe SaveTo Wishlist Lite het Woostify-thema detecteert en de compatibiliteitsstylesheet laadt
Automatische thema-detectie draait naadloos op de achtergrond op elke frontend-pagina (klik om te vergroten).

Wat u nodig heeft voordat u begint

De vereisten zijn kort, en elk ervan is essentieel voor de werking van de integratie.

ComponentVereiste
SaveTo Wishlist Lite1.1.1 of later
WordPress5.8 of later, getest tot 7.0
PHP7.4 of later
WooCommerce4.0 of later, getest tot 10.2
Actief themaWoostify, of een child theme gebouwd op Woostify

SaveTo Wishlist Lite verifieert automatisch of WooCommerce actief is voordat het initialiseert, zodat uw dashboard soepel en veilig blijft draaien.

Twee dingen die u niet nodig heeft: een betaald abonnement en een specifieke Woostify-versie. De compatibiliteitsstylesheet wordt geleverd in SaveTo Wishlist Lite, de gratis versie. Bovendien controleert de code geen Woostify-versie, licentie of companion plugin. Er is ook geen gratis versus Pro-onderscheid aan de Woostify-kant.

Dit geeft u brede compatibiliteit met verschillende Woostify-releases. We raden altijd aan om uw pagina's een snelle visuele controle te geven op uw actieve themaversie om er zeker van te zijn dat alles naar verwachting aansluit.


Hoe Uw Woostify Wishlist Knoppen Te Installeren

De Woostify-integratie werkt out-of-the-box, zodat u zich volledig kunt concentreren op het selecteren van de plaatsing die uw winkel de meest gepolijste uitstraling geeft.

Plaatsing is een van de hendels die we behandelen in onze gids voor optimalisatie van de wishlist-conversie.

Alles staat op één scherm: SaveTo Wishlist → Instellingen → Knop Plaatsing & Stijlen. U heeft beheerdersrechten (manage_options) nodig om dit scherm te openen, zodat de stylinginstellingen van uw site veilig blijven.

Stel uw winkel- en archiefplaatsing in

Open onder Winkelpagina de dropdown Knop Plaatsing. Deze ene controle is van toepassing op uw hoofd winkelpagina, productcategoriepagina's en andere productarchieven. Vijf opties zijn gedocumenteerd als goed werkend met de productkaarten van Woostify.

Advanced Coupons heeft een goede vuistregel hiervoor in de handleiding voor het optimaliseren van een e-commercesite: kun je de knop van de andere kant van de kamer zien?

  • Rechtsboven de productafbeelding: De stylesheet plaatst de knop boven de afbeelding.
  • Linksboven de productafbeelding: Zelfde afhandeling als de rechterhoek. Kies welke hoek uw verkoopbadges nog niet gebruiken.
  • Boven de producttitel: Staat in het contentgebied van Woostify's kaarten en neemt de uitlijning van uw kaarten over.
  • Onder de producttitel: Staat onder de titel, dus lange titels duwen deze omlaag in plaats van deze te overladen.
  • Boven de Toevoegen aan winkelwagen-knop: Houdt de opslagactie naast de koopactie zonder ermee te concurreren.
SaveTo Wishlist Winkelpagina-instellingen met Knop Pacement ingesteld op Boven de Knop Toevoegen aan Winkelwagen
De knopplaatsingsregeling voor de winkelpagina, ingesteld op een van de plaatsingen die passen bij Woostify productkaarten (klik om te vergroten).

De drie plaatsingen in het contentgebied nemen automatisch de uitlijning van Woostify over. Stel uw productkaarten in op gecentreerde tekst, en de knop wordt gecentreerd. Links en rechts uitgelijnde kaarten gedragen zich op dezelfde manier.

SaveTo Wishlist-knoppen worden weergegeven in een Woostify-productraster op een WooCommerce-winkelpagina
Wenslijstknoppen binnen Woostify productkaarten op de winkelpagina (klik om te vergroten).

Stel uw plaatsing op individuele producten in

Onder Productpagina vindt u een tweede vervolgkeuzelijst Knop Plaatsing. De twee instellingen werken onafhankelijk, dus het wijzigen van de ene heeft geen invloed op de andere.

SaveTo Wishlist-productpagina-knoplocatie-dropdown geopend, met alle opties voor de plaatsing van de wishlist-knop
De vervolgkeuzelijst Knop Plaatsing Productpagina, met alle positie-opties zichtbaar (klik om te vergroten).

Vier plaatsingen zijn gedocumenteerd als goed werkend op Woostify productpagina's.

  • Boven de Toevoegen aan winkelwagen-knop: Plaats de opslagoptie vóór de shopper voordat deze een aankoop doet.
  • Onder de Toevoegen aan winkelwagen-knop: De standaardinstelling van het instellingenscherm zelf, en deze neemt de bovenmarge van 12 pixels over.
  • Boven de producttitel: Nuttig wanneer uw productoverzicht lang is en u de opslagactie vroegtijdig zichtbaar wilt maken.
  • Onder de producttitel: Staat bij het titelblok in plaats van bij de koopknoppen.
SaveTo Wishlist-knop op een Woostify-pagina met een enkel product onder de knop Toevoegen aan winkelwagen
De wenslijstknop in de enkele productoverzicht van Woostify (klik om te vergroten).

Er is een vijfde optie: Inline met de Toevoegen aan winkelwagen-knop. Test deze positie gerust tegen uw aangepaste productindeling om te zien of deze past bij uw thema-ontwerp.

Beide vervolgkeuzelijsten hebben ook een optie Niet weergeven. Door deze te kiezen, wordt de hook voor het renderen van de knop in die context niet geregistreerd. Dat is schoner dan de knop verbergen met CSS.

Kies hoeveel styling te laden

Op hetzelfde scherm vindt u Frontend Styling en de instelling met het label Frontend CSS Laden. Deze bepaalt welke basis stylesheet wordt geladen. De Woostify stylesheet wordt vervolgens bovenop de door u gekozen stylesheet geladen.

  • Volledige styling: Gebruikt de eigen kleuren en lettertypen van de plugin. Dit is de fabrieksinstelling.
  • Minimale styling: Laat uw thema kleuren en lettertypen overschrijven.
  • Geen styling: Laadt alleen de positionering en neemt alle visuele elementen over van Woostify.
Instellingen voor SaveTo Wishlist-knoplocatie en -stijlen, met de opties voor het laden van frontend CSS
Frontend CSS Laden staat onder Frontend Styling op het tabblad Knop Plaatsing en Stijlen (klik om te vergroten).

Heb je de typografie en kleuren van Woostify al ingesteld? Dan geeft Minimal of No styling meestal een meer native resultaat. Belangrijk is dat de lay-outregels van Woostify in alle drie de modi actief blijven. Je ruilt de integratie niet in om de kleuren van het thema te krijgen.

Elke modus laadt een ander stylesheet-bestand, dus je keuze verandert ook wat de browser downloadt. Als frontend-gewicht belangrijk voor je is, meet onze WooCommerce wishlist plugin snelheidstest wat SaveTo Wishlist daadwerkelijk aan een pagina toevoegt.


De Twee Plaatsingen Om Te Vermijden Op Woostify

Om de schoonste lay-out direct uit de doos te garanderen, zijn hier twee plaatsingsopties die je voor Woostify wilt omzeilen.

  • Op winkel- en archiefpagina's, vermijd Onder de Toevoegen aan Winkelwagenknop. Woostify rendert die rij binnen een geanimeerd gebied met een vaste hoogte op desktop productkaarten. De wishlistknop kan daar worden afgeknipt, waardoor deze gedeeltelijk of volledig wordt verborgen.
  • Op enkele productpagina's, vermijd de twee plaatsingen op de afbeelding. Woostify gebruikt een aangepaste productgalerij, en knoppen in de hoek worden er niet betrouwbaar in weergegeven.

Deze aanbevelingen zijn contextspecifiek. Afbeeldingshoeken zien er geweldig uit op winkelkaarten, maar zijn niet ideaal voor productgalerijen, terwijl Onder de Toevoegen aan Winkelwagen het beste werkt op enkele productpagina's. Door elke context onafhankelijk in te stellen, blijven je knoppen er schoon uitzien op alle sjablonen.

Matrix van SaveTo Wishlist-knoplocaties die aangeeft welke worden aanbevolen of afgeraden op Woostify winkel- en productpagina's
Het matchen van plaatsingsopties met de juiste context zorgt voor een schone uitlijning op alle pagina's (klik om te vergroten).

⚙️ Belangrijke Installatiestap: SaveTo Wishlist Lite 1.1.1 past plaatsingsopties niet automatisch toe bij activering. Als je ze onaangeroerd laat, gebruiken beide contexten standaardwaarden - Rechtsboven op de Productafbeelding op productpagina's en Onder de Toevoegen aan Winkelwagenknop op winkelpagina's. Op Woostify zorgen het bijwerken van deze standaardwaarden ervoor dat je knoppen perfect aansluiten bij de lay-out van het thema.

De oplossing duurt seconden: Open beide plaatsingsdropdowns, selecteer de aanbevolen opties en druk op Opslaan, zelfs als de waarden op het scherm al correct lijken. Opslaan schrijft de opties naar de database en maakt een einde aan het giswerk.


Hoe Te Bevestigen Dat De Woostify Stijlen Laden

Aangezien er geen instelling is om te controleren, gebeurt de verificatie in de browser. Het duurt ongeveer een minuut.

  1. Bevestig dat Woostify, of een Woostify kindthema, actief is onder Uiterlijk → Thema's.
  2. Laad een frontend-pagina en open de ontwikkelaarstools van je browser.
  3. Zoek in de paginabron naar savetowishlist-woostify.css. Dat bestand is de integratie.
  4. Controleer de volgorde. Het moet worden geladen na het hoofd-stylesheet van SaveTo Wishlist frontend, aangezien het ervan afhankelijk is.
  5. Inspecteer een knop. Met een hoekplaatsing moet de container oplossen naar z-index: 3.
  6. In een enkele product samenvatting moet die container een bovenmarge van 12 pixels hebben.

Als het bestand niet verschijnt, controleer dan je template-identifier opnieuw. Detectie komt exact overeen met woostify, dus een thema dat is hernoemd of is afgesplitst van die identifier zal het stylesheet niet activeren.

Omdat detectie stil op de achtergrond draait zonder pop-ups voor beheerders, bevestigt een snelle controle in de ontwikkelaarstools dat uw assets perfect worden geladen.

Dieper in de code werken? Onze handleiding voor de wishlist REST API behandelt programmatische toegang.


Gast Wishlists Zijn Belangrijker Dan De Styling

Eén instelling doet meer voor uw opslagpercentage dan enige stylingbeslissing. Het is of ingelogde shoppers de knop überhaupt kunnen gebruiken.

De controle is Gast wishlist uitschakelen, en deze staat standaard uit. Dat betekent dat gasten kunnen opslaan. Schakel deze in, en SaveTo Wishlist Lite stopt met het registreren van zijn winkel- en productknop-hooks voor niet-ingelogde bezoekers. De knop verschijnt helemaal niet.

We raden sterk aan deze standaard ingeschakeld te houden. Baymard's productpagina benchmark toonde aan dat 89% van de sites opslagfuncties niet gemakkelijk toegankelijk maakt voor gasten, wat betekent dat u een geweldige kans heeft om u te onderscheiden. Ondertussen zegt 21% van de ondervraagde shoppers dat ze afhankelijk zijn van opslagfuncties. Dat gat is de kans.

Dezelfde logica drijft WooCommerce gastafhandeling: belangrijke acties naadloos maken voor gasten stimuleert betrokkenheid en verhoogt conversies.

De Woostify-integratie splitst niet op basis van inlogstatus. Gasten en ingelogde klanten krijgen dezelfde plaatsingen en dezelfde lay-outregels. Er is geen aparte gast-styling om te configureren.

Grafiek die 89 procent van de sites vergelijkt die gastbesparingsfuncties verbergen tegenover 21 procent van de shoppers die ze gebruiken
Het inschakelen van gast-wishlists overbrugt de kloof voor de 20% van de shoppers die er de voorkeur aan geven items op te slaan voordat ze een account aanmaken (klik om te vergroten).

Richtlijnen voor reikwijdte en compatibiliteit

De stylesheet richt zich op standaard WooCommerce- en Woostify-markup. Waar uw winkel afwijkt van die markup, stoppen de regels met matchen.

  • Pagina-builder en productgrids met blokken: Ontworpen voor standaard Woostify-kaartmarkup; aangepaste blokgrids moeten met het oog worden gecontroleerd.
  • Snelle weergave-interfaces: Gebruikt standaard knopplaatsing; bekijk uw modale lay-out om de juiste uitlijning te garanderen.
  • Aangepaste productlussen: Een lus gebouwd in een aangepast sjabloon valt buiten het geteste bereik.
  • Woostify premium modules en bijbehorende plugins: Hiervoor is geen compatibiliteit vastgesteld.
  • Gedrag op de winkelwagenpagina: Winkelwagenlay-outs worden apart afgehandeld en worden niet beïnvloed door deze specifieke Woostify-integratie.

Deze stylesheet richt zich specifiek op kern-wishlistlay-outs in SaveTo Wishlist Lite. Als u geavanceerde extensies gebruikt (zoals WooCommerce Wishlist Pro of Gift Registry Addon functies), zorgt een snelle visuele controle ervoor dat alles correct wordt weergegeven.

Hoewel kernfuncties continu geautomatiseerd worden getest, kan aangepaste thema-styling het beste worden geverifieerd met een snelle visuele controle in uw live winkel.

Aangepaste lay-outs en speciale producttypen (zoals niet-op-voorraad of niet-aankoopbare items) zijn simpelweg een snelle visuele controle waard in uw live winkel om ervoor te zorgen dat de knop precies wordt weergegeven waar u hem wilt hebben.

Diagram dat aangeeft welke WooCommerce-contexten de Woostify-compatibiliteitsstylesheet dekt en welke buiten het bereik vallen
Standaard WooCommerce- en Woostify-markup worden kant-en-klaar naadloos weergegeven (klik om te vergroten).

Maakt uw winkel gebruik van een van de niet-behandelde contexten? Onze handleiding voor producttabelintegratie laat zien hoe een andere lay-outcontext wordt afgehandeld.


Veelgestelde Vragen: SaveTo Wishlist En Woostify

Moet ik de Woostify-integratie inschakelen?

Nee. Er is geen Woostify-instellingenpagina, geen schakelaar en geen optie die de stylesheet op zichzelf regelt. SaveTo Wishlist Lite controleert de actieve sjabloon-ID wanneer het frontend-assets laadt. Als het woostify leest, wordt de stylesheet automatisch geladen.

Werkt het met een Woostify-kindthema?

Ja. De detectie kijkt naar de ID van de bovenliggende sjabloon, niet naar de eigen ID van het kindthema. Zolang de bovenliggende sjabloon nog steeds woostify is, wordt de compatibiliteitsstylesheet normaal geladen.

Heb ik SaveTo Wishlist Pro nodig hiervoor?

Nee. De Woostify-compatibiliteitsstylesheet wordt geleverd in SaveTo Wishlist Lite, de gratis versie, vanaf release 1.1.1. Betaalde abonnementen voegen wishlist-analyses, prijsdaler-meldingen en meldingen over weer op voorraad toe. Geen van deze is vereist voor Woostify-layoutondersteuning.

Veranderen mijn knopkleuren of lettertypen?

Nee. De Woostify-stylesheet wijst geen kleuren, typografie, randen of knopafmetingen toe. Het past alleen layout-eigenschappen aan: stapelvolgorde, flex-uitlijning en afstand. Het uiterlijk blijft onder uw knopinstellingen, uw Frontend CSS Loading-modus en uw thema.

Welke Woostify-versie wordt ondersteund?

SaveTo Wishlist Lite ondersteunt automatisch huidige Woostify-versies via template-identificatie, waardoor u volledige flexibiliteit heeft bij thema-updates. We raden altijd aan om de actieve themaversie een snelle visuele controle te geven bij het aanpassen van layouts.

Waarom ontbreekt mijn wishlist-knop op de winkelpagina?

Controleer drie dingen op volgorde. Ten eerste, of de plaatsing van de winkelpagina is ingesteld op Niet weergeven, wat de weergave volledig stopt. Ten tweede, of Gast-wishlist uitschakelen is ingeschakeld terwijl u de pagina uitgelogd bekijkt. Ten derde, of u Onder de knop Toevoegen aan winkelwagen gebruikt op de winkelpagina, wat soms conflicteert met de geanimeerde productkaarten van Woostify.


Geef de Opslaan Knop Een Plek Om Te Leven

De Woostify-integratie is ontworpen om slank, snel en moeiteloos te zijn. Het verwijdert layout-wrijving, zodat uw opslagknoppen eruitzien als een natuurlijk, ingebouwd onderdeel van uw thema, stil op de achtergrond werkend zonder onnodige ballast toe te voegen.

Het enige wat overblijft is het kiezen van de plaatsingen die uw producten het beste benadrukken en passen bij de stijl van uw winkel.

  • Bevestig de vereisten en dat Woostify de actieve sjabloon is (wat u nodig hebt).
  • Open beide plaatsingsdropdowns en sla ze expliciet op, zelfs als ze er correct uitzien (hoe in te stellen).
  • Selecteer aanbevolen lay-outposities voor winkelarchieven en enkele productpagina's (te vermijden plaatsingen).
  • Controleer of de compatibiliteitsstylesheet wordt geladen om uw thema-instellingen te verifiëren (hoe te bevestigen).
  • Houd gast-wishlists ingeschakeld om het aantal opgeslagen items door shoppers te maximaliseren (gast-wishlists).
  • Bekijk paginabuilder-grids, snelle weergaven en aangepaste loops op uw live site (limieten).

Uw Woostify wishlist-knoppen moeten eruitzien alsof ze samen met uw thema zijn ontworpen, niet er achteraf aan vastgeplakt. Onze Woostify-installatiegids leidt u door het instellingenscherm. Of vergelijk wat elk abonnement bevat op de SaveTo Wishlist-prijslijst.

Download de Beste WooCommerce Wishlist Plugin

Creëer wishlist-functionaliteit en laat uw winkel snel en eenvoudig groeien.
Download SaveTo Wishlist Nu

Artikel delen

Voltooi Uw Aankoop