Pas uw WooCommerce-inlogpagina aan met Custom Login for WooCommerce

U kunt nu uw WooCommerce-loginpagina aanpassen zonder code. Custom Login voor WooCommerce, nieuw van Visser Labs, geeft terugkerende klanten een merkpagina op /login met vijf sjablonen, uw logo en een promotiepaneel naast het formulier.

De meeste winkels raken hun inlogscherm nooit aan. WooCommerce toont een basis gebruikersnaam- en wachtwoordformulier op de Mijn account-pagina, gestyled door het thema dat u gebruikt. Het werkt, maar het ziet eruit als een slordige toevoeging, en het is de enige pagina die uw terugkerende klanten elke keer zien als ze terugkomen.

Custom Login voor WooCommerce lost dat op. Hieronder bespreken we waarom de standaardlogin tekortschiet, wat de plugin doet, de vijf sjablonen, hoe u het promotiepaneel gebruikt en hoe u dit alles in een paar minuten instelt.

Inhoudsopgave

• Waarom de standaard WooCommerce-loginpagina tekortschiet
• Wat Custom Login For WooCommerce doet
• Vijf sjablonen voor uw WooCommerce-loginpagina
• Verander uw loginpagina in een promotieplek
• Hoe u uw WooCommerce-loginpagina aanpast
• Hoe logins en doorverwijzingen werken
• Voor ontwikkelaars: Hooks en filters
• Prijzen en vereisten
• Geef terugkerende klanten een beter welkom
• Veelgestelde Vragen

Waarom de standaard WooCommerce-loginpagina tekortschiet

De standaard WooCommerce-login is een functioneel formulier zonder eigen branding of berichten. Het bevindt zich binnen de Mijn account-sjabloon van uw thema, dus het wijzigen van het uiterlijk betekent meestal het bewerken van themabestanden of het schrijven van CSS.

De mensen die inloggen zijn uw bestaande klanten, de groep die het meest waarschijnlijk opnieuw koopt. Onze gids over de voordelen van klantbehoud legt uit waarom dat publiek extra aandacht verdient.

Inloggen is ook een punt waar shoppers afhaken. Volgens Baymard Institute veroorzaakten problemen met het opnieuw instellen van wachtwoorden ervoor dat sommige bestaande accountgebruikers de checkout op retailwebsites verlieten tijdens hun tests. Een gerichte inlogpagina met een zichtbare link "Wachtwoord vergeten?" biedt die klanten een duidelijke manier om weer binnen te komen.

Een ander probleem is verspilde ruimte. Een inlogpagina krijgt gestaag verkeer van mensen die u al vertrouwen, en het standaardformulier gebruikt niets ervan om hen te informeren over een uitverkoop, een nieuw product of een loyaliteitsaanbieding. Als u onze strategieën om winkelwagenverlating te verminderen hebt gelezen, weet u hoeveel elke kleine stap in het koopproces telt.

Wat Custom Login For WooCommerce doet

Custom Login for WooCommerce creëert een zelfstandige inlogpagina op /login en stuurt ingelogde shoppers daarheen vanaf Mijn Account. U beheert de lay-out, het logo, de kleuren, de tekst en een promotiepaneel vanuit één instellingenscherm onder WooCommerce.

Dit wordt geleverd in versie 1.0.3:

• Automatische /login-pagina: Het activeren van de plugin creëert een inlogpagina op /login als uw site er nog geen heeft.
• Mijn Account-omleiding: Bezoekers die niet zijn ingelogd en Mijn Account openen, worden naar /login gestuurd en daarna teruggestuurd naar Mijn Account nadat ze zijn ingelogd.
• Vijf sjablonen: Classic Split, Centered Card, Gradient Modern, Dark Mode en Warm Organic.
• Branding-opties: Voeg uw logo toe, wijzig de koptekst en stel kleuren in voor panelen, knoppen, links en invoervelden.
• Bewerkbare formulierlabels: Hernoem de e-mail- en wachtwoordlabels, de tekst "Onthoud mij", de inlogknop en de link "wachtwoord vergeten".
• Promotiepaneel: Toon een koptekst, korte boodschap en call-to-action knop naast het inlogformulier.
• Roterende inhoud: Voeg meerdere promotieboodschappen toe en toon een willekeurige bij elk bezoek.
• Mobiele optie: Verberg het promotiepaneel op telefoons of plaats het onder het inlogformulier.

Het verklaart ook compatibiliteit met High-Performance Order Storage. WooCommerce beschrijft HPOS als een database structuur die specifiek is gebouwd voor e-commerce ordergegevens, volgens de WooCommerce HPOS-documentatie. Winkels die ernaar zijn overgeschakeld, zien geen compatibiliteitswaarschuwing voor Custom Login for WooCommerce.

Vijf sjablonen voor uw WooCommerce-loginpagina

Elk sjabloon is een compleet ontwerp van de inlogpagina en u schakelt ertussen met één klik op het tabblad Sjabloon. Uw logo, koptekst en labels worden overgenomen, dus het proberen van een andere look duurt seconden. Centered Card toont het inlogformulier op zichzelf, zonder het promotiepaneel, dus kies een van de andere vier als u een aanbieding wilt tonen.

Sjabloon	Hoe het eruitziet
Classic Split	Strak wit inlogformulier aan de ene kant, gekleurd promotiegedeelte aan de andere
Centered Card	Een enkele inlogkaart op een donkere achtergrond, zonder het promotiepaneel
Gradient Modern	Een heldere gradiënt achtergrond met een zwevende witte kaart
Dark Mode	Een donker thema met accentkleuren
Warm Organic	Warme tinten en afgeronde vormen voor een vriendelijk gevoel

Classic Split is de lay-out die we gebruiken in de Visser Labs winkel. Sommige sjablonen behouden meer van hun eigen kleurenschema dan andere, dus bekijk uw Ontwerptab kleuren op het sjabloon dat u kiest. Als u wilt dat uw inlogpagina exact overeenkomt met uw merk kleuren, is Classic Split een goed begin.

Hier ziet u hoe elk sjabloon eruitziet met voorbeeld winkel branding. We hebben deze vijf voorbeeldwinkels gebouwd op onze testwebsite, één per sjabloon, zodat u het bereik kunt zien voordat u kiest.

Verander uw loginpagina in een promotieplek

Het promo paneel plaatst een aanbieding voor elke klant die inlogt. Het toont een kop, een korte boodschap en een knop die naar elke gewenste locatie linkt, direct naast het inlogformulier waar uw klanten al naar kijken.

U stelt het in op het tabblad Inhoud. Schakel Promo sectie inschakelen in, vul dan vier velden in:

1. Promo Kop: De titel in het paneel.
2. Promo Inhoud: Eén of twee zinnen ondersteunende tekst.
3. Knop Tekst: Het label op de call-to-action knop.
4. Knop URL: Waar de knop naartoe gaat. Het opent in een nieuw tabblad, dus de inlogpagina van de klant blijft open.

Een andere boodschap tonen bij elk bezoek

Roterende inhoud laat u meerdere promo's tegelijk uitvoeren. Schakel Rotatie inschakelen in, klik op Item toevoegen, en geef elk item zijn eigen Kop, Inhoud, Knop Tekst, Knop URL en Afbeeldings-URL. Custom Login voor WooCommerce kiest dan willekeurig één item telkens als de pagina wordt geladen.

Dit werkt goed voor winkels met meer dan één ding te zeggen. Eén item kan een seizoensuitverkoop pushen, een ander een nieuwe productreeks, en een derde uw nieuwsbrief aanmelding.

Wat we hebben gezien: Op onze eigen Visser Labs inlogpagina, adverteert het promo paneel helemaal geen Visser plugin. Het roteert aanbiedingen voor onze zusterplugins, zoals SaveTo Wishlist en Advanced Coupons, en de SaveTo Wishlist aanbieding bevat een getraceerde link zodat we de klikken kunnen zien. Een inlogpagina is een goede plek om iets gerelateerds te cross-sellen, omdat de mensen die het lezen al een account bij u hebben. Ons artikel over verkoop stimuleren met SaveTo Wishlist Pro behandelt waarom een wishlist aanbieding geschikt is voor terugkerende klanten.

Kiezen hoe de promo eruitziet op mobiel

Telefoons hebben geen ruimte voor twee panelen naast elkaar, dus het tabblad Ontwerp heeft een instelling Mobiel Promotie Weergave met twee keuzes. Verbergen op mobiel toont alleen het inlogformulier op kleine schermen, en dit is de standaardinstelling. Onder het inlogformulier plaatsen houdt de promo zichtbaar eronder.

Kies Plaatsen onder het inlogformulier als je promo een echt aanbod bevat. Behoud de standaardinstelling als het paneel voornamelijk decoratie is.

Hoe u uw WooCommerce-loginpagina aanpast

Om je WooCommerce-inlogpagina aan te passen, werk je met vier tabbladen en één Opslaan-knop. Alles staat onder WooCommerce > Aangepast Inloggen.

1. Installeer en activeer de plugin. Upload Aangepast Inloggen voor WooCommerce via Plugins > Nieuwe Toevoegen, en activeer deze vervolgens. Je /login-pagina wordt automatisch aangemaakt.
2. Activeer je licentie. Open het tabblad Licentie, voer je Licentiesleutel en de Activeringse-mail in die je bij aankoop hebt gebruikt, en activeer. Een actieve licentie geeft je plugin-updates en ondersteuning.
3. Kies een sjabloon. Klik op het tabblad Sjabloon op het ontwerp dat je wilt.
4. Merk het. Plak op het tabblad Ontwerp je logo-adres in Logo URL (SVG, PNG en JPG worden ondersteund, en 200x60px wordt aanbevolen), stel vervolgens je Inlogkop in.
5. Stel kleuren en labels in. Nog steeds op het tabblad Ontwerp, pas Paneelkleuren, Knopkleuren, Promotieknopkleuren, Linkkleuren en Invoerkleur aan, en hernoem vervolgens alle Formulierlabels die je wilt wijzigen.
6. Voeg je promo toe. Vul op het tabblad Inhoud het promopanel in of schakel roterende inhoud in.
7. Opslaan. Klik op Instellingen Opslaan bovenaan het instellingenscherm, open vervolgens jouwwebsite.com/login in een privé browservenster om het resultaat te controleren.

Gebruik een privévenster voor die laatste controle. Ingelogde gebruikers die /login bezoeken, worden direct naar Mijn account gestuurd, dus je ziet de inlogpagina niet terwijl je bent ingelogd als beheerder.

Hoe logins en doorverwijzingen werken

Aangepast Inloggen voor WooCommerce gebruikt de eigen inlogflow van WooCommerce, dus de accounts, wachtwoorden en bestelgeschiedenis van je klanten blijven hetzelfde. Alleen de pagina waarop ze inloggen is nieuw.

Een paar details zijn het vermelden waard:

• Inloggen met gebruikersnaam of e-mail: Het inlogveld accepteert beide, net als standaard WordPress.
• Terug naar waar ze begonnen: Wanneer een shopper vanaf Mijn account naar /login wordt gestuurd, keren ze na het inloggen terug naar Mijn account.
• Wachtwoordherstel werkt nog steeds: De link 'Wachtwoord vergeten?' gaat naar de normale wachtwoordherstelpagina van WooCommerce, en die pagina wordt nooit omgeleid.
• Uitloggen landt op /login: Na het uitloggen keren klanten terug naar je inlogpagina met een bevestigingsbericht.
• Eén foutmelding: Een verkeerd wachtwoord en een onbekende gebruikersnaam tonen dezelfde melding: 'Onbekende gebruikersnaam of onjuist wachtwoord.' Dit voorkomt dat iemand het formulier gebruikt om te controleren welke accounts bestaan.

Het inlogformulier gebruikt ook de standaard WooCommerce-inlogformulierhooks. Extensies die velden toevoegen aan het WooCommerce-inlogformulier, zoals CAPTCHA-plugins, kunnen deze ook aan uw nieuwe pagina toevoegen. Als bots een probleem zijn voor uw winkel, behandelt onze gids over hoe nepbestellingen in WooCommerce te voorkomen het bredere plaatje.

Voor ontwikkelaars: Hooks en filters

Ontwikkelaars kunnen het gedrag van Custom Login for WooCommerce aanpassen met twee filters en drie acties. Dit is de ondersteunde manier om het aan te passen zonder pluginbestanden te bewerken.

• clwc_login_redirect: Wijzig waar een klant naartoe gaat na een succesvolle login. Het ontvangt de doorverwijs-URL en de gebruiker.
• clwc_logout_redirect: Wijzig waar een klant naartoe gaat na het uitloggen.
• clwc_after_login_form: Wordt uitgevoerd na het inlogformulier, voor extra links of mededelingen.
• clwc_login_footer: Wordt uitgevoerd in de voettekst van de inlogpagina.
• clwc_login_enqueue_scripts: Enqueue scripts of stijlen voor de inlogpagina. De pagina vuurt wp_enqueue_scripts niet af, dus gebruik deze actie in plaats daarvan.

De doorverwijzing na het inloggen gaat ook via WooCommerce's eigen woocommerce_login_redirect filter, dus bestaande doorverwijscodes blijven werken.

Prijzen en vereisten

Custom Login for WooCommerce wordt verkocht als een jaarlijkse licentie; controleer de pluginpagina voor de huidige prijzen. Dat is inclusief automatische updates en ondersteuning, en het valt onder de 14-dagen niet-goed-geld-terug-garantie van Visser Labs.

Uw winkel heeft nodig:

• WordPress 5.8 of hoger
• PHP 7.4 of hoger
• WooCommerce 6.0 of hoger

Geef terugkerende klanten een beter welkom

Uw inlogpagina is een van de weinige pagina's die mensen bewust bezoeken, steeds opnieuw. Wanneer u uw WooCommerce-inlogpagina aanpast, wordt dat bezoek een merkmoment, en het promotiepaneel geeft u een plek om terugkerende klanten te laten zien wat er nieuw is.

• Ontdek waarom de standaard login tekortschiet voor uw winkel
• Kies een van de vijf sjablonen die bij uw merk past
• Stel het promotiepaneel in met een aanbieding voor terugkerende klanten
• Volg de installatiestappen en test in een privévenster

Klaar om uw WooCommerce-inlogpagina aan te passen? Haal Custom Login for WooCommerce en geef uw terugkerende klanten een inlogpagina die eruitziet als uw winkel.

Veelgestelde Vragen

Wat is een aangepaste WooCommerce-loginpagina?

Een aangepaste WooCommerce-loginpagina is een speciale aanmeldingspagina met uw eigen ontwerp, in plaats van het standaardformulier op de Mijn account-pagina. Custom Login voor WooCommerce maakt er een aan op /login met uw keuze uit vijf sjablonen, uw logo, aangepaste kleuren en een optioneel promotiepaneel.

Hebben mijn klanten nieuwe wachtwoorden nodig?

Nee. Custom Login voor WooCommerce gebruikt de standaard WordPress- en WooCommerce-login, dus elk bestaand account, wachtwoord en bestelgeschiedenis blijft zoals het is. Klanten loggen in met dezelfde gegevens op de nieuwe pagina.

Verandert Custom Login voor WooCommerce de WordPress-admin login?

Nee. Het beheert de klantlogin op /login en de doorverwijzing vanaf Mijn Account. Uw wp-admin inlogscherm wordt niet gewijzigd.

Kan ik verschillende promoties op mijn inlogpagina tonen?

Ja. Schakel roterende inhoud in op het tabblad Inhoud en voeg zoveel items toe als u wilt. Elk item heeft zijn eigen kop, tekst, knop en afbeelding, en Custom Login voor WooCommerce toont er bij elk bezoek één willekeurig.

Werkt het met HPOS?

Ja. Versie 1.0.3 verklaart compatibiliteit met WooCommerce High-Performance Order Storage, dus winkels die HPOS gebruiken, zien geen compatibiliteitswaarschuwing.

Wat gebeurt er als een ingelogde klant /login bezoekt?

Ze worden rechtstreeks naar hun Mijn Account-pagina gestuurd. Het inlogformulier verschijnt alleen voor bezoekers die niet zijn ingelogd.