Een WooCommerce login popup maken doe je eenvoudig met Elementor Pro. Met de popup builder maak je popups voor allerlei doeleinden, waaronder een inlog popup voor de bezoekers in je webshop. Hoe werkt dit precies? In dit artikel neem ik het stap voor stap met je door.
Werk je nog niet met Elementor Pro? Ontdek de voordelen van Elementor & WooCommerce
Stap 1: Maak een login popup
Ga naar Templates -> Popups en klik op ‘Nieuwe toevoegen’. Geef de popup bijvoorbeeld de naam ‘Inloggen webshop’. Je krijgt direct templates voor popups te zien. Zoek op ‘login’ en je krijgt direct mooie voorbeelden die je kunt gebruiken voor je WooCommerce login popup.
Maak je geen gebruik van de templates en wil je zelf een WooCommerce login popup maken? Dan moet je de Login widget van Elementor toevoegen aan het formulier:
Stap 2: Login widget instellen
Bij het instellen van de widget vind je een aantal opties die je kunt gebruiken:
Redirect after login:
Hiermee kun je de bezoeker redirecten naar een bepaalde pagina. Bijvoorbeeld de account pagina of shoppagina.
Redirect after logout:
Redirect de bezoeker naar een specifieke pagina na het uitloggen. Bijvoorbeeld de homepage of een andere speciaal gemaakte pagina.
Wachtwoord verloren:
Geeft een link weer waarmee bezoekers opnieuw een wachtwoord kunnen aanvragen
Remember me:
Laat bezoekers hun inloggegevens opslaan
Logged in message:
Toont bericht dat het inloggen is gelukt.
Stap 3: Popup login publiceren
Ben je klaar met het maken van de popup? Dan kun je deze publiceren. Met de ‘Publicate settings’ (het scherm dat vervolgens opent) hoef je niets te doen. Klik op ‘Save & close’.
Stap 4: Stel de popup in als link onder ‘inloggen’
De ‘inloggen’ knop staat bij de meeste webshops bovenaan in de header. Mocht je deze op een andere plek hebben staan, dan is dat ook prima. Voor het toevoegen van de WooCommerce login popup maakt dit geen verschil. Zolang je maar gebruik maakt van een widget waarmee je een link kunt toevoegen.
Ga als volgt te werk:
- Voeg een widget toe met een link optie. In dit voorbeeld maken we gebruik van de Titel widget.
- Klik boven het link veld op ‘Dynamisch’ en selecteer vervolgens ‘Popup’
- Klik vervolgens op ‘Popup’ en selecteer ‘Open popup’ en vind de popup die je zojuist hebt gepubliceerd.
Let op: de (menu)titel wijzigt NIET nadat de gebruiker is ingelogd. Als je dit wilt, heb je hiervoor een Elementor add-on nodig. Zo is dit bijvoorbeeld mogelijk met de add-on JetBlocks.
Inlogpagina maken
Maak je liever een inlogpagina dan alleen een popup? Lees hier hoe je een WordPress inlogpagina maakt.
Tip: widget opslaan als global
Is alles gelukt? Sla de widget die je hebt gebruikt om de tekst ‘inloggen’ weer te geven dan op als global. Op die manier kun je hem op meerdere plekken op de website toevoegen en hoef je hem maar vanaf één plek te wijzigen. Lees hier hoe je een widget opslaat als global.
2 reacties
Hi Sanne, duidelijke tutorial. Ik mis wel een paar dingen. Zo zit er geen functie in deze inlogpopup om foutmeldingen (verkeerde user/password) af te vangen. Bij een foute inlog krijg je het standaard WP inlogscherm te zien. Je moet die pagina dus nog stylen, handig als je dat meldt. Hoe los jij dat op?
Hoi Timo,
Dat klopt, dat is inderdaad een beperking van de widget. Er is wel vraag naar deze functionaliteit, zie: https://github.com/elementor/elementor/issues/5355.
Als je helemaal naar beneden scrollt, vind je een code die je kunt gebruiken om je bezoekers wel op dezelfde loginpagina te houden. Niet ideaal, maar voor nu het proberen waard.
Groetjes,
Sanne