Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

WooCommerce login popup maken met Elementor

Inhoud van dit artikel:

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.

Woocommerce login popup templates elementor

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:

Login widget Elementor

Stap 2: Login widget instellen

Bij het instellen van de widget vind je een aantal opties die je kunt gebruiken:

WooCommerce login popup elementor opties

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.

Woocommerce login popup elementor instellen

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.

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Offerte aanvragen

Een nieuwe website laten bouwen? Of hulp nodig bij een probleem of het bouwen van je website? Laat ons weten wat je precies nodig hebt en je ontvangt zo snel mogelijk een prijsindicatie:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.