Hur vi anpassar WooCommerce-inloggningssidor (3 metoder)

Om du vill ge kunderna en smidigare upplevelse i din WooCommerce-butik, är det en bra början att skapa en anpassad inloggningssida.

Standard WordPress-inloggningssidan ser enkel ut och matchar inte din butiks varumärke. Genom att anpassa den kan du få inloggningsprocessen att kännas mer professionell och varumärkesanpassad.

På WPBeginner har vi hjälpt många användare att skapa anpassade inloggningssidor, och det enklaste sättet är att använda en sidbyggare som SeedProd eller ett formulärplugin som WPForms.

I den här handledningen visar jag hur du designar en helt anpassad WooCommerce-inloggningssida och delar ett kraftfullt verktyg som du också kan använda för att anpassa inloggningssidan för utcheckning.

Varför skapa en anpassad WooCommerce-inloggningssida för kunder?

Att anpassa WooCommerce inloggningssidor låter dig lägga till din logotyp och ändra designen så att den matchar din webbplats. Detta gör att din webbplats ser mer professionell ut och ger en bättre användarupplevelse.

Det låter dig också lägga till fler formulärfält, och det låter dig till och med marknadsföra specifika produkter eller visa specialerbjudanden för kunder.

Annars, när kunder loggar in i din WooCommerce-butik, kommer de att se standard WordPress-inloggningssidan med endast WordPress-logotypen och varumärket.

Den här sidan är okej om du bara vill komma åt din webbplats instrumentpanel. Kunder kan dock avskräckas av den enkla designen och tycka att det är misstänkt att inloggningssidan inte matchar webbplatsens utseende.

Med det sagt, låt oss se hur du kan skapa en anpassad kundinloggningssida i WooCommerce.

Du kan använda snabblänkarna nedan för att hoppa till olika metoder i vår handledning:

• Metod 1: Skapa en helt anpassad WooCommerce-inloggningssida med SeedProd
• Metod 2: Anpassa WooCommerce kundinloggningsformulär med WPForms
• Bonustips: Anpassa WooCommerce utcheckningsinloggningssida
• Vanliga frågor om WooCommerce-inloggningssidor

Metod 1: Skapa en helt anpassad WooCommerce-inloggningssida med SeedProd

Det bästa sättet att skapa en anpassad WooCommerce-inloggningssida för kunder är att använda SeedProd. Det är den bästa WordPress landningssidan och temabyggaren för WordPress, och den är otroligt enkel att använda.

Du kan använda SeedProds dra-och-släpp-byggare för att anpassa designen och layouten på en sida eller ditt WordPress-tema utan att röra en enda kodrad.

För att lära dig mer, se vår detaljerade recension av SeedProd.

Först måste du installera och aktivera SeedProd-pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering ser du välkomstskärmen för SeedProd.

Ange din licensnyckel och klicka på knappen 'Verifiera nyckel'. Du hittar licensnyckeln i SeedProd-kontoområdet.

Därefter kan du skapa en anpassad inloggningssida för din WooCommerce-butik.

Gå helt enkelt till SeedProd » Landningssidor från din WordPress-instrumentpanel och klicka på knappen 'Konfigurera en inloggningssida'.

Därefter kommer SeedProd att visa dig flera mallar. Du kan snabbt välja en och anpassa den efter dina behov. Detta hjälper till att spara tid, och du kan använda en befintlig design för att skapa din egen WooCommerce-inloggningssida.

Pluginet låter dig också skapa en inloggningssida från grunden med en tom mall.

När du har valt en mall öppnas ett popup-fönster.

Ange ett namn för din sida och klicka på knappen 'Spara och börja redigera sidan'.

Därefter ser du dra-och-släpp-sidbyggaren.

Du kan nu anpassa inloggningssidan genom att lägga till nya block i mallen från menyn till vänster.

SeedProd erbjuder standardblock för rubriker, texter, bilder, knappar och mer.

Förutom dessa kan du lägga till avancerade block som en giveaway, kontaktformulär, knappar för social delning, optin-formulär och mer.

Det finns också WooCommerce-block som senaste produkter, utvalda produkter och bästsäljande produkter som du kan lägga till i din mall för inloggningssidan.

Med WooCommerce-blocken kan du enkelt rekommendera dina topprodukter och marknadsföra rabatterbjudanden för att få fler konverteringar.

Dessutom låter SeedProd dig ytterligare anpassa alla sektioner på inloggningssidan. Klicka bara på sektionen, så ser du fler alternativ som att redigera etiketten, färgen, teckensnittet och marginalerna.

När du är klar med att anpassa WooCommerce-inloggningssidan, glöm inte att klicka på knappen 'Spara' högst upp.

Därefter kan du gå till fliken 'Sidinställningar' och klicka på växlingsknappen 'Sidstatus' för att ändra den från Utkast till Publicera. Sedan kan du fortsätta och klicka på knappen 'Spara' och stänga sidbyggaren.

Härifrån är allt som återstår att få din nya anpassade WooCommerce inloggningssida att visas för användare. För att göra detta, gå till SeedProd » Landningssidor i din WordPress instrumentpanel.

Klicka helt enkelt på omkopplaren under 'Inloggningssida' så att den är grön och säger 'Aktiv'.

När det är aktiverat kommer din nya inloggningssida att visas på din WordPress-webbplats!

Du kan besöka din e-handelsbutik för att se den i praktiken.

Metod 2: Anpassa WooCommerce kundinloggningsformulär med WPForms

Vill du skapa ett inloggningsformulär som också matchar din webbplats tema och erbjuder fler formulärfält?

Standardinloggningsformuläret i WordPress tillåter bara användare att ange sin e-postadress eller användarnamn tillsammans med ett lösenord.

Den största fördelen med att använda ett formulärplugin är flexibilitet. Det gör att du kan placera ditt inloggningsformulär var som helst i din webbutik, som i ett sidofält eller på en produktsida, vilket gör det bekvämt för kunderna.

Det bästa sättet att göra det är att använda WPForms. Det är den bästa WordPress-formulärbyggaren som är nybörjarvänlig att använda. Över 6 miljoner webbplatser använder WPForms för att bygga smartare formulär.

På WPBeginner har vi använt det för att bygga kontaktformulär och årliga undersökningar, och vi älskar det. För att lära dig mer, se vår kompletta WPForms-recension.

Du kan enkelt skapa ett anpassat WooCommerce-inloggningsformulär och visa det var som helst i din webbutik, som sidofältet eller produktsidan.

Först måste du installera och aktivera WPForms-pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till WPForms » Inställningar från din WordPress instrumentpanel och ange licensnyckeln. Du hittar licensnyckeln i WPForms kontoområde.

Därefter måste du gå till WPForms » Tillägg i WordPress adminpanel.

Därefter, scrolla ner till 'Användarregistreringstillägg' och klicka sedan på knappen 'Installera tillägg'.

Nu är du redo att skapa ett anpassat inloggningsformulär för WooCommerce. Gå helt enkelt till WPForms » Lägg till ny för att starta formulärbyggaren.

På nästa skärm kan du ange ett namn för ditt formulär högst upp. Sök sedan efter mallen 'User Login Form' och klicka på knappen 'Use Template'.

Därefter kan du anpassa din mall för användarinloggningsformulär med hjälp av dra-och-släpp-byggaren. WPForms gör det mycket enkelt att lägga till olika fält i formuläret eller ordna om befintliga fält i mallen.

Du kan till exempel lägga till avancerade fält som telefonnummer genom att dra dem från menyn till vänster och släppa dem på mallen.

Du kan ytterligare anpassa varje formulärfält i mallen. Klicka helt enkelt på ett fält och redigera dess etikett, lägg till en beskrivning och gör det till ett obligatoriskt fält i formuläret.

Därefter kan du gå till fliken 'Inställningar' i formulärbyggaren. Under Allmänna inställningar kan du ändra 'Skicka knapptext' till 'Logga in'.

Därefter kan du gå till fliken 'Bekräftelser' för att ändra vad som händer när en användare loggar in framgångsrikt.

Klicka helt enkelt på rullgardinsmenyn 'Bekräftelsetyp' och välj ett alternativ. Du kan visa kunderna ett meddelande, visa en sida eller omdirigera dem till en specifik URL.

Till exempel kan du lägga till ditt WooCommerce-inloggningsformulär på en produktsida och låta kunder snabbt logga in för att köpa din produkt.

När du är klar klickar du helt enkelt på knappen 'Spara' högst upp.

Därefter måste du lägga till WooCommerce kundinloggningsformulär på en sida på din webbplats.

Klicka helt enkelt på knappen 'Bädda in' högst upp i byggaren. Du kan sedan välja om du vill placera formuläret på en befintlig sida eller skapa en ny för det.

Låt oss välja alternativet ‘Skapa ny sida’ för tillfället.

Därefter behöver du ange ett namn för din sida och klicka på knappen 'Låt oss köra!'.

Därefter ser du WPForms inloggningsformulär inuti WordPress-innehållsområdet.

Härifrån kan du anpassa och styla ditt inloggningsformulär genom att öppna blockpanelen på skärmens högra sida. I avsnittet 'Teman' kan du välja mellan över 40 färdiga teman för att ge ditt inloggningsformulär ett unikt utseende.

Du kan också ändra stil och storlek på formulärfälten, etiketter, knappar och mer.

När du är nöjd med designen kan du förhandsgranska ditt formulär, publicera den nya sidan och visa den anpassade WooCommerce-inloggningen för dina kunder.

Du kan också lägga till ditt WooCommerce-inloggningsformulär i din butiks sidofält. På så sätt kommer ditt formulär att visas på varje produktsida och låta kunder logga in snabbt.

Gå helt enkelt till Utseende » Widgets från din WordPress-instrumentpanel. Klicka sedan på knappen '+' och lägg till ett WPForms widgetblock.

Därefter kan du välja din inloggningsformulär från rullgardinsmenyn och ange en titel.

När du är klar klickar du på knappen 'Uppdatera'.

Du kan nu besöka din webbutik för att se inloggningsformuläret i sidofältet.

För fler sätt att skapa en anpassad inloggningssida för WooCommerce-kunder kan du se vår guide om hur man skapar en anpassad inloggningssida för WordPress.

Dessutom kan du också se vår handledning om hur man lägger till en navigeringsmeny i WordPress så att du kan lägga till din WooCommerce-inloggningssida i din webbplatsnavigering.

Bonustips: Anpassa WooCommerce utcheckningsinloggningssida

WooCommerce tillåter återkommande besökare att logga in under utcheckningsprocessen. Ett generiskt eller klumpigt inloggningsformulär på utcheckningssidan kan dock avbryta köpprocessen och leda till förlorade försäljningar.

Genom att skapa en sömlös, varumärkesanpassad inloggningsupplevelse vid detta kritiska steg kan du minska övergivna kundvagnar och bygga mer förtroende hos dina kunder.

Det bästa sättet att göra det är att använda ett kraftfullt funnel builder-plugin som FunnelKit.

Den levereras med professionellt designade mallar som ersätter standardsidan för utcheckning, vilket ger återkommande kunder en mycket bättre och enklare inloggningsupplevelse. Detta hjälper till att minska friktionen och gör det mer sannolikt att de slutför sina köp.

Du har också möjlighet att A/B-testa de flera flödena, försäljningssidorna och uppsaljserbjudanden.

FunnelKit ger dig detaljerad analys av varje steg i din WooCommerce-funnel.

Den levereras också med ett kraftfullt tillägg för marknadsföringsautomation, FunnelKit Automations.

Det låter dig anpassa WooCommerce-e-postmeddelanden, skicka e-postmeddelanden i WooCommerce för övergivna kundvagnar, välkomstserier och mer.

Om du menar allvar med att växa din WooCommerce-butik, då är detta ett av de verktyg du måste ha som vi rekommenderar.

Vanliga frågor om WooCommerce-inloggningssidor

Här är några frågor som våra läsare ofta ställer om att skapa WooCommerce-inloggningssidor i WordPress:

Kan jag använda dessa anpassade inloggningssidor för vanliga WordPress-användare också?

Ja, absolut. Metoden med SeedProd ersätter standard WordPress-inloggningssidan för alla användare, inklusive administratörer och redaktörer. Metoden med WPForms låter dig placera ett inloggningsformulär var som helst, vilket också kan användas av alla användarroller.

Behöver jag kunna koda för att anpassa min inloggningssida?

Inte alls. Både SeedProd och WPForms är utformade för att vara användarvänliga med dra-och-släpp-byggare. Du kan skapa en professionellt utformad inloggningssida utan att röra en enda kodrad.

Är det gratis att skapa en anpassad WooCommerce-inloggningssida?

Båda plugins erbjuder gratisversioner att komma igång med. För att få tillgång till de specifika inloggningssidmallarna och avancerade funktionerna som visas i den här handledningen behöver du dock Pro-versionerna av antingen SeedProd eller WPForms.

Vilken metod är bättre för min butik, SeedProd eller WPForms?

Det beror på dina specifika behov. SeedProd är idealiskt om du vill skapa en helt separat, fullt utformad inloggningssida som perfekt matchar ditt varumärke.

Å andra sidan är WPForms bättre om du vill ha ett flexibelt inloggningsformulär som du kan lägga till på olika platser på din webbplats, som en sidofält eller en utcheckningssida.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en anpassad WooCommerce-kundinloggningssida. Du kan också se vårt expertval av de bästa WooCommerce-plugins och vår guide om hur du begränsar inloggningsförsök i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.