Beoordeeld door Je bouwt je productpagina's in Elementor, en alles ziet er goed uit. Dan merk je dat de Elementor wishlist-knop ontbreekt. Niet verkeerd geplaatst. Weg.
Je plugin-instellingen beloven een knop. Je productpagina toont niets. Er is niet eens een fout om na te jagen.
Die stilte kost je. Een wishlist-knop die niemand kan zien, is een save die nooit plaatsvindt. En een save die nooit plaatsvindt, is een shopper die je niet terug kunt halen.
SaveTo Wishlist levert twee Elementor-integraties die de kloof dichten. We lopen door het instellen van beide, het kiezen van de juiste, en wat je met de saves daarna doet.
Spring naar:
- Waarom de wishlist-knop verdwijnt op Elementor-productpagina's
- Wat de twee Elementor-integraties daadwerkelijk doen
- Wat u nodig heeft voordat u begint
- Hoe de wishlist-knop toe te voegen met de Elementor-widget
- Hoe de wishlist-knop weer te geven in Loop Grid en Loop Carousel
- Waar de knop te plaatsen zodat shoppers hem daadwerkelijk gebruiken
- Vijf manieren om Elementor Wishlist Saves aan het werk te zetten
- Elementor Wishlist-problemen en hoe ze op te lossen
- Veelgestelde vragen: Elementor Wishlist-knop
- Afronding
Waarom de wishlist-knop verdwijnt op Elementor-productpagina's
De knop vereist een handmatige stap omdat Elementor vertrouwt op aangepaste visuele widgets in plaats van traditionele WooCommerce PHP-sjablonen.
SaveTo Wishlist plaatst zijn knop via WooCommerce actie-hooks. Een standaard product sjabloon vuurt die hooks op ingestelde punten. Dus de plugin weet altijd waar de knop te injecteren.
Echter, een Elementor sjabloon wordt in plaats daarvan samengesteld uit Elementor widgets. Als de jouwe een aangepaste 'toevoegen aan winkelwagen'-knop gebruikt, worden die hooks nooit geactiveerd. Als gevolg hiervan heeft de plugin niets om aan te koppelen.
Archiefpagina's hebben dezelfde hook-beperkingen, maar dan op grotere schaal. Een Elementor Pro Loop Grid rendert de klassieke winkel-loop helemaal niet. In plaats daarvan rendert het de loop-item sjabloon die je hebt ontworpen. Omdat het een aangepaste lay-out gebruikt in plaats van standaard winkel-loop hooks, vereist de knop handmatige plaatsing.
Wat dit lastig te diagnosticeren maakt, is dat het stil gebeurt. Er verschijnt geen foutmelding. Er wordt geen waarschuwing getoond in je admin. En geen enkele instelling in de plugin lost het op.
Dit is ook geen niche-stack. Volgens W3Techs draait Elementor op 12,8% van alle websites.
🔍️ Wat we hebben gezien: Winkel eigenaren bereiken vaak de ondersteuning, bezorgd dat de plugin niet werkt. De realiteit is slechts een verschil in architectuur. De knopweergave werkt prima, maar moet expliciet worden geplaatst binnen de Elementor-sjabloon.
Wat de twee Elementor-integraties daadwerkelijk doen
SaveTo Wishlist dekt Elementor in twee aparte delen. Welke je nodig hebt, hangt af van je Elementor-licentie.
| Mogelijkheid | Wat het doet | Elementor nodig | Toegevoegd in |
|---|---|---|---|
| Save to Wishlist widget | Een native Elementor-widget die je in elke sjabloon sleept om de knop handmatig te plaatsen | Gratis Elementor of Pro | 1.1.3 |
| Loop Grid en Loop Carousel plaatsing | Automatische knopplaatsing op elke productkaart, aangestuurd door je bestaande winkelpagina-instelling | Elementor Pro | 1.1.2 |
Beide worden geleverd in SaveTo Wishlist Lite, de gratis plugin, dus Pro-licentiehouders erven ze ook. Update naar versie 1.1.3 of hoger en je hebt beide.
Je route hangt af van je licentie. Bouw productpagina's in gratis Elementor, en de widget is je optie. Loop Grid, Loop Carousel en Theme Builder zijn allemaal Elementor Pro-functies.
In de praktijk gebruiken de meeste Pro-winkels beide. Automatische plaatsing regelt de archieven. De widget regelt de enkele product-sjabloon.
Eén onderscheid bespaart veel verwarring achteraf. De Elementor-widget plaatst de wishlist knop op een product. Het toont niet de wishlist zelf. Gebruik daarvoor de wishlist block of de [saveto_wishlist] shortcode.
Wat u nodig heeft voordat u begint
Vier dingen moeten op hun plaats zijn voordat de widget iets rendert.
- Elementor, gratis of Pro: de widget werkt in beide. Loop Grid en Loop Carousel vereisen Elementor Pro.
- SaveTo Wishlist Lite 1.1.3 of later: eerdere versies bevatten de widget niet. Controleer uw versie onder Plugins.
- WooCommerce met een gepubliceerd product: de widget wordt alleen weergegeven waar een product is om mee te werken.
- Een template gekoppeld aan een product: een enkele producttemplate, een loop-itemtemplate of een productbewuste pagina.
Daarnaast is er geen aparte configuratiestap. De widget leest uw bestaande verlanglijstinstellingen. Dus een ongewijzigde widget toevoegen toont dezelfde knop die uw winkel al toont.
Hoe de wishlist-knop toe te voegen met de Elementor-widget
Het toevoegen van de widget kost vier stappen. Het stylen ervan kost nog eens drie.
Sleep de widget naar je template
- Open de product sjabloon of pagina die u wilt bewerken in Elementor.
- Zoek in het widgetpaneel naar Save to Wishlist.
- Sleep de widget naar uw lay-out, waar u de knop wilt plaatsen.
- Klik op Bijwerken om op te slaan.
De widget staat onder zowel de WooCommerce- als de Algemene categorieën. Dus browsen werkt net als zoeken. Typen van wishlist, save, favorite of favourite toont hem ook.
Hij wordt direct weergegeven met uw huidige verlanglijstinstellingen. Dat betekent dat u de echte knop op het canvas ziet, geen grijze placeholder.
Kies het knoptype
Button Type staat in de sectie Wishlist Button op het tabblad Content. Het is de enige instelling daar.
Tien stijlen worden meegeleverd met de widget:
- Alleen Tekst, Alleen Icoon, en Icoon en Tekst
- Icoon en Tekst Pil, Solide Icoon, en Solide Icoon en Tekst
- Solide Icoon en Tekst Pil, Minimale Icoon, en Minimale Icoon en Tekst
- Minimaal icoon en tekst pil
Pil-varianten gebruiken volledig afgeronde hoeken. Solide vult de icoonvorm, terwijl Minimaal een lichtere omtrek gebruikt.
De controle staat standaard op uw productknopstijl uit de verlanglijstinstellingen. Deze hier wijzigen, beïnvloedt alleen deze widget, niet uw hele winkel.
Stel de uitlijning in
Uitlijning bevindt zich op het tabblad Stijl onder Lay-out. Dat is waar Elementor de uitlijning voor zijn eigen widgets bewaart.
Open Lay-out, stel vervolgens Uitlijning in op Links, Midden of Rechts. Standaard is Links.
Wijzig de knopkleuren
De sectie Kleuren op het tabblad Stijl geeft u acht bedieningselementen. Elk heeft een normale en een hover-status: Tekstkleur, Achtergrondkleur, Randkleur en Icoonkleur.
Elke picker begint met de kleur die al is opgeslagen in uw verlanglijstinstellingen. Dus een onaangeroerde widget komt overeen met de rest van uw winkel.
Wijzig er één en het overschrijft die kleur alleen voor deze widget. Dat helpt wanneer een enkele template op een donker gedeelte of een foto-achtergrond staat.
Kleuren zijn het enige dat de widget overschrijft. Grootte, opvulling, randbreedte en icoonvorm bevinden zich elders.
Je vindt ze onder SaveTo Wishlist > Instellingen > Knop Plaatsing & Stijlen. Zo restyle je ze één keer en elke knop volgt.
Eén beperking is goed om vooraf te weten. De pickers accepteren alleen effen kleuren, zonder transparantieschuifregelaar en zonder tabblad voor globale kleuren.
Dat komt doordat de verlanglijstknop platte hex-waarden opslaat. Een globale kleur zou correct worden weergegeven, maar zou niet worden overgedragen naar de live pagina, dus de optie is uitgeschakeld om ervoor te zorgen dat je instellingen nauwkeurig zijn.
Voor dezelfde walkthrough met elke vastgelegde schermopname, zie onze kennisbankgids voor de Elementor-widget.
Hoe de wishlist-knop weer te geven in Loop Grid en Loop Carousel
Met Elementor Pro heb je twee routes naar productkaarten. Ze passen bij verschillende niveaus van controle.
Laat de plugin het voor je plaatsen
Je bestaande plaatsing op de winkelpagina is al van toepassing op Loop Grid- en Loop Carousel-kaarten.
Ga naar SaveTo Wishlist > Instellingen > Winkelpagina, kies een plaatsing en sla op. De knop verschijnt op elke kaart zonder dat je de template hoeft aan te raken.
Achter de schermen koppelt de integratie zich aan vier Elementor-widgets in je loop-item-template:
- Productafbeelding: draagt de plaatsingen die aan de productafbeelding zijn gekoppeld.
- Producttitel: draagt de plaatsingen die aan de titel zijn gekoppeld.
- Product Toevoegen aan Winkelwagen: draagt de plaatsingen boven of onder de knop.
- Toevoegen aan Winkelwagen: Elementor's tweede variant voor toevoegen aan winkelwagen, op dezelfde manier behandeld.
Je loop-item-template heeft er minstens één van die vier nodig. Wanneer een kaart volledig is opgebouwd uit aangepaste widgets, moet de plugin je simpelweg de knop handmatig laten plaatsen.
Als een template beide varianten voor toevoegen aan winkelwagen bevat, wordt de anker nog steeds één keer per kaart geactiveerd. De knop wordt dus nooit op die manier verdubbeld.
Gebruik je geen raster? We behandelen dezelfde knop in WooCommerce-producttabellen.
Plaats de widget zelf
Bewerk de loop-item-template en plaats de Save to Wishlist-widget in de kaartindeling. Je krijgt precieze controle over waar de knop op elke kaart staat.
Er is één gedrag waar je hier rekening mee moet houden. Binnen een loop-item behandelt de plugin je widget als een knop per kaart in plaats van een duplicaat. Je winkelplaatsing blijft ernaast renderen.
Kies dus één route of de andere. Als je de widget handmatig plaatst, stel dan je winkelpagina-plaatsing in op Niet weergeven. Anders eindigt elke kaart met twee knoppen.
🔍️ Wat we hebben gezien: de enkele productpagina werkt anders, en dat verrast mensen. Plaats de widget op een Elementor-producttemplate en de plugin schakelt zijn eigen plaatsing op de productpagina voor je uit. Loop-items zijn de uitzondering, dus die hebben de handmatige stap hierboven nodig.
Waar de knop te plaatsen zodat shoppers hem daadwerkelijk gebruiken
Als je de knop overal kunt plaatsen, is de moeilijkere vraag waar deze de meeste opslag oplevert.
Begin met de reden waarom shoppers vertrekken. Volgens het Baymard Institute is het gemiddelde gedocumenteerde percentage winkelwagenverlatingen uit 50 studies 70,22%.
Nog veelzeggender is dat 42% van de Amerikaanse online shoppers zegt dat ze de winkelwagen hebben verlaten omdat ze alleen maar aan het browsen waren. Die mensen wijzen uw product niet af. Ze hebben gewoon pech met de timing.
Advanced Coupons heeft een gids over het verminderen van winkelwagenverlatingen als je ook de checkout-kant wilt aanpakken.
Een wishlist is het enige op de pagina dat is gebouwd om ze op te vangen. Dat herkadert waar de knop voor dient. Het is de tweede call to action voor iedereen die vandaag niet koopt.
Drie plaatsingsregels werken goed voor de meeste winkels:
- Houd het binnen de koopbox: plaats de knop naast de prijs en de knop 'Toevoegen aan winkelwagen'. Een shopper die beslist of hij wil vertrekken, kijkt daar.
- Geef het minder visuele nadruk dan 'Toevoegen aan winkelwagen': de typen 'Minimal' en 'Alleen icoon' bestaan hiervoor. Een wishlistknop die te luid is gestyled, concurreert met de verkoop die je vandaag wilt.
- Op kaarten, geef de voorkeur aan de afbeeldingshoek of onder de titel: de ruimte op kaarten is krap. Een knop over de volledige breedte onder 'Toevoegen aan winkelwagen' doorbreekt de rasteruitlijning op kleinere schermen.
We gaan dieper in op beide oppervlakken in onze gidsen voor best practices voor productpagina's en best practices voor winkelpagina's.
Het plaatsen van de knop op Loop Grid-kaarten is belangrijker dan het op het eerste gezicht lijkt. De meeste browse-abandonment vindt plaats in het archief, voordat een shopper een productpagina opent.
Dus als je enige knop op de producttemplate staat, vang je de weinigen op die doorklikken. Al de rest glipt voorbij.
Vijf manieren om Elementor Wishlist Saves aan het werk te zetten
Een opslag is precies evenveel waard als wat je er vervolgens mee doet. Vijf acties maken van een groeiende wishlist inkomsten.
- Activeer prijsdaler-meldingen: wanneer de prijs van een opgeslagen product daalt, hoort de shopper over een item dat hij al wilde. Zie hoe prijsdaler-meldingen voor wishlists werken.
- Verstuur meldingen bij terug op voorraad: een uitverkocht product dat in een wishlist staat, is een wachtende bestelling. Die shopper informeren wanneer de voorraad terug is, is beter dan hopen dat hij terugkomt.
- Lees opslagen als vraagdata: producten die vaak worden opgeslagen en zelden worden gekocht, vertellen je iets over prijs, verzending of paginatekst. Wishlist-analyses maken het patroon zichtbaar.
- Segmenteer op intentie: een shopper met vijf opslagen en geen bestellingen heeft een andere e-mail nodig dan een terugkerende koper. Wishlist-activiteit geeft je een segment dat de bestelgeschiedenis nooit zou geven.
- Plan seizoenscampagnes rond opgeslagen items: cadeauseizoenen belonen winkels die weten wat elke klant wil. Een wishlist is die lijst, vrijwillig gegeven in plaats van geraden.
Het is goed om duidelijk te zijn over welke onderdelen gratis zijn. Alles hierboven over het plaatsen van de Elementor wishlist-knop wordt geleverd in de gratis Lite-plugin.
Analyses, prijsdaler-meldingen, meldingen bij terug op voorraad en webhooks zijn Pro-functies. Ze beginnen op het Growth-abonnement.
Welke campagnes je ook uitvoert, de conversieratio van de verlanglijst is het getal waar je op moet letten. Het vertelt je of opslaan wordt omgezet in bestellingen.
Visser Labs dekt het lezen van je winkelrapporten als je het bredere plaatje wilt zien.
Elementor Wishlist-problemen en hoe ze op te lossen
Vier problemen verklaren het grootste deel van wat hier misgaat. Elk heeft een specifieke oorzaak.
De knop verschijnt helemaal niet
Werk deze in volgorde af.
- Geen product in context. De widget wordt alleen weergegeven waar WooCommerce een product heeft om mee te werken. Een lege pagina geeft het niets, dus het blijft leeg. Verplaats het naar een sjabloon voor een enkel product, een sjabloon voor een loop-item, of een pagina die een product instelt.
- Gastenverlanglijsten zijn uitgeschakeld. Als Gastverlanglijsten uitschakelen aan staat en je bent uitgelogd, wordt de knop bewust verborgen. Log in, of overweeg of gastenverlanglijsten toestaan geschikt is voor je winkel.
- De plugin is ouder dan 1.1.3. De widget bestaat niet in eerdere versies. Update SaveTo Wishlist en deze verschijnt in het paneel.
Twee wishlist-knoppen worden weergegeven op de productpagina
Dit lost zich meestal vanzelf op. Wanneer je Elementor-productsjabloon de widget bevat, annuleert de plugin zijn eigen plaatsing voor enkele producten.
Gerelateerde producten, upsells en cross-sells worden bewust met rust gelaten. Die kaarten worden in plaats daarvan via je winkelplaatsing weergegeven.
Dus een tweede knop daar is de winkelinstelling die zijn werk doet. Je wijzigt het in SaveTo Wishlist > Instellingen > Knop Plaatsing & Stijlen.
De kleurkiezers doen niets
Twee instellingen schakelen de kleurregelaars uit. Elk toont een bericht in het Elementor-paneel dat uitlegt waarom.
Als je productknopmodus is ingesteld op Thema Standaard, neemt de knop de styling van je thema over. De plugin past geen eigen kleur toe. Schakel de modus naar Voorinstelling om de controle te nemen.
Als je verlanglijsticoon een aangepaste geüploade afbeelding is, doen de twee icoonkleurregelaars niets. Een geüploade afbeelding kan niet worden getint. Wissel het in voor een ingebouwde icoonvorm als kleurcontrole belangrijker is.
Een blog-layout verschijnt in plaats van de wishlist
Als een verlanglijstlink je berichtenarchiefontwerp opent, past waarschijnlijk een Elementor Theme Builder-weergavevoorwaarde te breed toe. Het gebeurt wanneer de weergavevoorwaarde van dat sjabloon gericht is op het berichtenarchief.
Die voorwaarde komt ook overeen met individuele verlanglijstweergaven. Hier is de oplossing:
- Open Templates > Theme Builder en selecteer uw archiefsjabloon.
- Open de Weergavevoorwaarden.
- Verwijder de voorwaarde die gericht is op het berichtenarchief.
- Bouw je berichtenarchief in plaats daarvan als een zelfstandige pagina.
Veelgestelde vragen: Elementor Wishlist-knop
Heb ik Elementor Pro nodig om de wishlist-widget te gebruiken?
Nee, de Save to Wishlist-widget werkt in gratis Elementor.
Elementor Pro is alleen nodig voor Loop Grid-, Loop Carousel- en Theme Builder-sjablonen. Op gratis Elementor is de widget hoe je de knop plaatst.
Zal de widget mijn verlanglijstinstellingen overschrijven?
Alleen de acht kleuren, en alleen voor die ene widget. Knoptype en uitlijning zijn ook per widget.
Al het andere komt nog steeds uit je verlanglijstinstellingen. Dat dekt grootte, opvulling, randbreedte en icoonvorm. Dus een winkelbrede herstyling blijft een enkele wijziging op één plek.
Kan ik de widget en automatische plaatsing samen gebruiken?
Ja, hoewel de twee oppervlakken zich anders gedragen.
Op een producttemplate die de widget bevat, schakelt de plugin de eigen plaatsing op de productpagina uit. Je krijgt één knop.
Binnen een loop item template worden zowel de widget als de shop plaatsing weergegeven. Stel de shop plaatsing in op Niet weergeven als je alleen de widget wilt.
Waarom is er geen transparantieschuifregelaar op de kleurkiezer?
De wishlist knop slaat alleen solide hex-kleuren op.
Een transparante of globale kleur zou correct worden weergegeven en dan terugvallen op de live pagina. Die opties zijn uitgeschakeld in plaats van dat ze je misleiden.
Welke SaveTo Wishlist-versie heb ik nodig?
Loop Grid en Loop Carousel ondersteuning zijn toegevoegd in versie 1.1.2. De Elementor widget kwam in 1.1.3.
Met 1.1.3 of hoger heb je beide. Beide worden meegeleverd in de gratis Lite plugin, dus geen van beide heeft een Pro licentie nodig.
Toont de widget de wishlist zelf?
Nee. De widget plaatst de Save to Wishlist knop op een product.
Om de daadwerkelijke wishlist van een klant op een pagina te tonen, gebruik je in plaats daarvan het wishlist blok of de [saveto_wishlist] shortcode.
Afronding
Het weergeven van de Elementor wishlist knop ging nooit echt over styling. Het ging erom de kloof te overbruggen tussen traditionele WordPress hooks en custom visual builders.
Beide helften van die kloof zijn nu gesloten, op gratis Elementor en op Elementor Pro.
Installatie is het makkelijke deel en duurt minuten. Het echte werk is beslissen waar de knop staat. Daarna is het beslissen wat er gebeurt als een shopper hem gebruikt.
Dit is wat u vervolgens moet doen:
- Update naar versie 1.1.3 of hoger, en controleer dan welk Elementor pad bij je licentie past.
- Sleep de Save to Wishlist widget naar je product template en kies een knop type.
- Schakel Loop Grid en Loop Carousel kaarten in via je shop pagina plaatsing.
- Plaats de knop in de koopbox en op je productkaarten, niet slechts één.
- Laat de saves werken met waarschuwingen, segmenten en vraagdata.
Klaar om een Elementor wishlist knop op elk product in je winkel te plaatsen? Begin gratis met SaveTo Wishlist Lite, of kijk wat de Growth, Plus en Business plannen daarbovenop toevoegen.
