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.
- SaveTo Wishlist Lite versie 1.1.6 of hoger als je de knop wilt in Premium Addons voor Elementor productgrids.
- 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.
Het plaatsen van de widget binnen een loop-item schakelt de eigen knop van de shop-plaatsing niet uit. Als je shop-knop-plaatsing nog actief is op die template, toont de kaart beide: de knop van de shop-plaatsing en die van de widget. Om de widget de enige knop op de kaart te maken, stel je shop-knop-plaatsing in op Niet weergeven in SaveTo Wishlist > Instellingen > Knop-plaatsing & Stijlen.
Toon de knop in Premium Addons productgrids
Als je Premium Addons for Elementor gebruikt, verschijnt de verlanglijstknop op elke kaart van de WooCommerce productgrid- of carrouselwidget. Je voegt hiervoor geen widget toe. De knop verschijnt vanzelf zodra SaveTo Wishlist Lite 1.1.6 of hoger actief is.
De knop volgt je Winkelpagina > Knop-plaatsing instelling in SaveTo Wishlist > Instellingen > Knop-plaatsing & Stijlen:
- Boven de Producttitel, Onder de Producttitel, Boven de Toevoegen aan winkelwagen-knop en Onder de Toevoegen aan winkelwagen-knop plaatsen de knop op de bijpassende plek op de kaart. Als je grid dat deel van de kaart verbergt, of de Toevoegen aan winkelwagen-knop ergens anders toont, verschijnt de knop aan het einde van de details van de kaart.
- Rechtsboven op de Productafbeelding en Linksboven op de Productafbeelding tonen de knop bovenaan het detailgebied van de kaart in plaats van op de afbeelding. Premium Addons heeft geen plek binnen het afbeeldingsgebied voor de knop.
- Niet weergeven verbergt de knop ook in Premium Addons grids.
Als Gastverlanglijst uitschakelen aan staat, zien uitgelogde bezoekers de knop ook niet in deze grids.
Als de optie Cache-instellingen van de grid-widget op het tabblad Geavanceerd in Elementor is ingesteld op Actief, wordt de knop niet toegevoegd. Dit voorkomt dat de verlanglijststatus van één bezoeker wordt gecached en aan iedereen wordt getoond. Stel deze in op Standaard of Inactief om de knop te tonen.
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.
Premium Addons productgrids hebben helemaal geen widget nodig. De knop verschijnt automatisch op elke kaart, zoals beschreven in de vorige sectie.
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.
Update naar SaveTo Wishlist Lite versie 1.1.5 of hoger om dit te repareren. De enkele verlanglijstweergave wordt nu opgelost naar de verlanglijstpagina zelf, dus een Elementor Theme Builder archief-template komt er niet meer mee overeen. Rewrite rules worden automatisch geflusht bij een update, dus er hoeft niets opnieuw te worden opgeslagen in Permalinks.
De fix is niet van toepassing in drie opstellingen, dus de onderstaande work-around is nog steeds het antwoord als je in een van deze zit:
- De verlanglijstpagina is een concept of is verwijderd in plaats van gepubliceerd.
- Je gebruikt WPML en twee taalversies van de verlanglijstpagina delen dezelfde slug.
- De verlanglijstpagina is ook ingesteld als de Berichtenpagina onder Instellingen > Lezen.
Als je een eerdere versie gebruikt, of als je site overeenkomt met een van de bovenstaande gevallen, kun je het 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, maar de twee plaatsingen coördineren niet automatisch overal. Op een enkele product sjabloon die de widget bevat, schakelt de plugin zijn eigen plaatsing voor enkele producten uit, zodat je één knop krijgt. Binnen een loop item schakelt het plaatsen van de widget de shop plaatsing niet uit. Als deze nog actief is, worden beide knoppen weergegeven. Stel je shop knop plaatsing in op Niet weergeven als je wilt dat de widget de enige knop op de kaart is.
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?
- Premium gebruikers: Open een supportticket
- Gratis gebruikers: Bezoek ons communityforum
