Bouwt u uw productpagina's in Elementor en de verlanglijstknop wil niet zitten waar u wilt? SaveTo Wishlist levert een native Elementor-widget, zodat u de knop precies kunt slepen waar deze hoort in plaats van te vertrouwen op de automatische plaatsing van de plugin. Deze handleiding behandelt het toevoegen van de widget, het stylen ervan, het gebruik ervan binnen productgrids en het oplossen van de meest voorkomende problemen.
Wat u nodig heeft
- Elementor, gratis of Pro.
- SaveTo Wishlist Lite versie 1.1.3 of hoger. Eerdere versies bevatten de widget niet.
- WooCommerce, met ten minste één gepubliceerd product.
- Een sjabloon of pagina met een product om mee te werken, zoals een enkele product sjabloon of een product loop.
De widget leest uw bestaande verlanglijstinstellingen, dus er is niets om eerst in te stellen. Plaats deze op een sjabloon en deze rendert dezelfde knop die uw winkel al toont.
Voeg de widget toe aan een product sjabloon
- Open de product sjabloon of pagina die u wilt bewerken in Elementor.
- Zoek in het widgetpaneel naar Opslaan op verlanglijst.
- Sleep de widget naar uw lay-out waar u wilt dat de knop verschijnt.
- Klik op Bijwerken om op te slaan.
De widget verschijnt onder zowel de categorieën WooCommerce als Algemeen in het paneel, dus beide werken als u liever bladert dan zoekt.
De knop wordt direct weergegeven met uw huidige verlanglijstinstellingen. Als er niets verschijnt, raadpleeg dan de onderstaande sectie voor probleemoplossing.
Kies het knoptype
Open de sectie Verlanglijstknop op het tabblad Inhoud. Deze bevat één instelling.
- Stel Knoptype in op de gewenste stijl.
- Standaard is de stijl van uw productknop ingesteld in de verlanglijstinstellingen.
- Het hier wijzigen beïnvloedt alleen deze widget, niet de rest van uw winkel.
Tien stijlen zijn beschikbaar:
- 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
De Pill varianten gebruiken volledig afgeronde hoeken. Solid vult de icoonvorm, en Minimal gebruikt een lichtere omtrek.
Stel de uitlijning in
Uitlijning staat op het tabblad Stijl, waar Elementor de uitlijning voor zijn eigen widgets bewaart.
- Open de sectie Indeling op het tabblad Stijl.
- Stel Uitlijning in op Links, Midden of Rechts.
Uitlijning is standaard ingesteld op Links.
Wijzig de knopkleuren
Open de sectie Kleuren op het tabblad Stijl. Je krijgt acht kleuropties, elk met een normale en een hover-status:
- Tekstkleur en Tekstkleur (Hover)
- Achtergrondkleur en Achtergrondkleur (Hover)
- Randkleur en Randkleur (Hover)
- Icoonkleur en Icoonkleur (Hover)
Elk begint met de kleur die al is opgeslagen in je winkelwageninstellingen, dus een onaangeroerde widget ziet er precies hetzelfde uit als de rest van je winkel. Wijzig er één en het overschrijft die kleur alleen voor deze widget.
Kleuren zijn het enige dat de widget overschrijft. Knopgrootte, opvulling, randbreedte en icoonvorm blijven afkomstig van je winkelwageninstellingen, dus wijzig die in SaveTo Wishlist > Instellingen > Knop Plaatsing & Stijlen.
De kleurkiezers accepteren alleen effen kleuren. Er is geen transparantieschuifregelaar en geen tabblad voor globale kleuren, omdat de winkelwagenknop platte hex-kleuren opslaat.
Toon de knop in Loop Grid en Loop Carousel
Als je Elementor Pro gebruikt, werkt de winkelwagenknop ook binnen de widgets Loop Grid en Loop Carousel. Je hebt twee manieren om het daar te krijgen.
Laat het aan de plugin over. Je knop plaatsing op de winkelpagina is al van toepassing op loop-kaarten, dus de knop verschijnt op elke kaart zonder dat je iets hoeft toe te voegen.
Plaats het zelf. Bewerk de loop-item-sjabloon, voeg vervolgens de widget Opslaan in winkelwagen toe aan de kaartindeling. Dit geeft je controle over precies waar op de kaart de knop staat.
Wanneer je de widget zelf plaatst binnen een loop-item, stopt de plugin met het automatisch weergeven van zijn eigen knop op die kaarten, zodat je één knop per kaart krijgt in plaats van twee. De enige uitzondering is wanneer je winkelknop plaatsing is ingesteld op Niet weergeven. In dat geval laat de plugin de kaarten met rust, omdat het verwijderen van de automatische knop zonder er een terug te plaatsen een stap achteruit zou zijn.
Welke methode moet je gebruiken?
SaveTo Wishlist geeft je drie manieren om winkelwagenfuncties op een pagina te plaatsen, en ze doen verschillende dingen. Het belangrijkste verschil: de Elementor-widget plaatst de knop op een product, terwijl de shortcode en het blok de winkelwagen zelf weergeven. De meeste winkels gebruiken beide.
De Elementor-widget plaatst de Save to Wishlist-knop waar je hem ook neerzet. Gebruik hem bij het bouwen van producttemplates in Elementor. Het is de enige van de drie met eigen stylingopties.
De [saveto_wishlist] shortcode toont de wishlist van een klant. Gebruik hem wanneer de wishlist buiten een Elementor-layout moet verschijnen, zoals op een klassieke editorpagina, een tekstwidget of een builder zonder native element. Zie Hoe de Wishlist Shortcode te Gebruiken.
Het wishlist-blok doet hetzelfde als de shortcode, in de WordPress-blokeditor. Gebruik het wanneer je pagina's bewerkt met blokken in plaats van een paginabuilder. Zie Hoe het Wishlist Gutenberg-blok te Gebruiken.
Probleemoplossing
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 of een template die niet aan een product is gekoppeld, geeft de widget niets om weer te geven, dus deze blijft leeg. Plaats hem op een single product-template, een loop item-template of een pagina die een product instelt.
- Gast-wishlists zijn uitgeschakeld. Als Gast-wishlist uitschakelen is ingeschakeld in je wishlist-instellingen en je de site uitgelogd bekijkt, wordt de knop bewust verborgen. Log in, of schakel die instelling uit, om hem te zien.
- SaveTo Wishlist is ouder dan 1.1.3. De widget bestaat niet in eerdere versies. Update de plugin.
Twee wishlist-knoppen verschijnen op de productpagina
Dit lost zich meestal vanzelf op. Wanneer je Elementor-producttemplate de widget bevat, registreert de plugin zijn eigen plaatsing op de single product-pagina opnieuw, zodat alleen de knop die jij hebt geplaatst wordt weergegeven.
Gerelateerde producten, upsells en cross-sells worden bewust met rust gelaten, omdat die kaarten via de shop-plaatsing worden weergegeven. Als je daar een tweede knop ziet, is dat de shop-plaatsing die zijn werk doet. Wijzig dit in SaveTo Wishlist > Instellingen > Knop Plaatsing & Stijlen.
De kleurkiezers hebben geen effect
Twee instellingen schakelen de kleurregelaars uit, en elk toont een bericht in het paneel dat uitlegt waarom.
Als je productknopmodus is ingesteld op Thema Standaard, erft de knop de knopstijlen van je thema en past de plugin geen eigen kleur toe. Schakel de productknopmodus over naar Voorinstelling in je wishlist-instellingen om kleuren te regelen.
Als je wishlist-icoon een aangepaste geüploade afbeelding is, doen Icoonkleur en Icoonkleur (Hover) niets, omdat een geüploade afbeelding niet kan worden getint. Wissel deze om voor een ingebouwde icoonvorm in je wishlist-instellingen als je kleurenbesturing wilt.
Een blog-layout verschijnt in plaats van de wishlist
Als je een wishlist-link opent en het ontwerp van je berichtenarchief ziet in plaats van de wishlist, neemt een Elementor Theme Builder archief-template de pagina over. Dit gebeurt wanneer de weergavevoorwaarde van die template gericht is op het berichtenarchief, wat ook overeenkomt met individuele wishlist-weergaven.
Om dit te omzeilen:
- Open Templates > Theme Builder en selecteer uw archiefsjabloon.
- Open de Weergavevoorwaarden.
- Verwijder de voorwaarde die gericht is op het berichtenarchief.
- Bouw uw berichtenarchief als een zelfstandige pagina in plaats van een Theme Builder-sjabloon.
Veelgestelde vragen
Heb ik Elementor Pro nodig om de widget te gebruiken?
Nee. De Save to Wishlist-widget werkt in de gratis Elementor. Elementor Pro is alleen nodig voor de Loop Grid- en Loop Carousel-widgets en voor Theme Builder-sjablonen.
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, inclusief grootte, opvulling, randdikte en icoonvorm, komt nog steeds van uw verlanglijstinstellingen.
Kan ik de widget en de automatische plaatsing samen gebruiken?
Ja. De plugin regelt de overlap voor u. Op een product sjabloon met de widget schakelt het zijn eigen plaatsing voor enkele producten uit, en binnen loop items staat het stil zodat elke kaart één knop toont.
Waarom is er geen transparantieschuifregelaar op de kleurkiezer?
De verlanglijstknop slaat alleen effen hex-kleuren op. Een transparante of globale kleur zou correct worden weergegeven in de editor en vervolgens terugvallen op de opgeslagen kleur op de live pagina, dus die opties zijn uitgeschakeld in plaats van u te misleiden.
Hulp nodig?
Als u een vraag heeft of tegen problemen aanloopt, staan we klaar om u te helpen.
- Premium gebruikers: Open een supportticket
- Gratis gebruikers: Bezoek ons communityforum
