WooCommerce is awesome. But, when customers want to log-in to track their orders, they are presented with the default WordPress login experience, which isn’t ideal.
So, watch this video and learn how you can completely customize your WordPress Login pages in a few simple steps.
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
So you build this beautiful e-commerce Website designed with the utmost care Perfectly chosen fans beautiful Graphics Colors the images everything is on point But when users go to log into the site To track their orders of other Information then they're presented with This the default WordPress login page it Breaks the entire experience right Because it doesn't match the entire Experience of the website so in this Video let's fix that in this video I'm Going to show you how to design a custom Login page for your woocommerce website In very very easy steps let's go so I'm Inside the admin area of my WordPress Website and I'm going to give you two Different ways to design beautiful login Pages for your woocommerce website I'm Going to also give you a third method Which is combining the first and the Second method to use a hybrid solution And I'm going to also tell you the Advantages of using the third solution All right so let's start with the first Solution and that is by creating Beautiful customized login pages with WP Forms yes WP forms technically is a Form-based plugin but if you decide to Purchase the pro version or if you Invest in the pro version you also get Some amazing features like creating Beautiful login pages so I'm not going To go into a lot of details about what
WP forms does because there's a lot of Features to cover what I'm going to just Do is I already have WP forms the Premium version installed on my site I'm Going to start demonstrating how to Create a beautiful looking login page so What I'm going to do is first go to WP Forms and not creating a new forms first I'll go into the add-ons section just Reminding you add-ons and of course the Registration feature and the login Feature or custom page feature is Available in the premium version so you Have to purchase a plan and activate With your active license key so what are Add-ons in WP forms they are technically Like plugins for WP forms so they are Called add-ons and they help enhance the Functionality of WP forms and because Not everybody wants to use or needs to Use all the features keeps the base Plugin clean and small so inside the Add-ons you'll see there are tons of Different add-ons available which you Can use to enhance and the feature set Of WP forms I'm not interested in all of These but just the one which is the user Registration add-on which you see right Here and what this module or this add-on Lets you do is create customized login Registration and password reset forms That you can embed anywhere on the site So exactly that's exactly what we're Going to do so what I'm going to do is
Click the install add-on which will Install the add-on directly from Connected from my account it takes a few Seconds let's wait for it to finish so Now the add-on is installed now we can Start creating a form which will double Up as the login form on our site so what I'm going to do is go to WP forms menu Entries I'm going to go to add new which Is adding a new form and once the form Creation option opens up I'll be Presented with a lot of templates these Are predefined templates I can utilize To create any kind of form on my site But since I'm interested in creating a Login form instead of filtering out or Browsing through hundreds of different Templates I'm going to just go to the Add-on templates and as you remember I Just installed the add-on for user Registration so it's going to give me Three different options user login user Password reset form user registration Form so technically the method I'm going To describe will work for all three so You can create a customized beautiful Looking login form password reset form And even a user registration form right So in this case I'm gonna just go Demonstrate with the user login form so I'm gonna go to use template which will Just import the base template on my form And this since the login page just Requires a username and a password
There's not nothing much you want to do Or you need to do but you can still make Some customizations if you want to for Example you have say the username or Email and the password fields and the Button is submit let's change it to Let's say login so I'll click the submit Button which will open up the general Settings of the form and I have the Submit button text here so let's say I Change this to something like Login And I can also change the processing Text to checking credentials so when I Click the button first I'll see checking Credentials and then I'll be logged in Automatically Checking credentials All right so uh WP forms also has some Other features which you can utilize for Example if you want to send emails out To yourself and an activity or a form is Submitted you can do that you can have Also have confirmations that means uh When a user logs in instead of uh Directing or instead of letting them see The navigation or I say the admin area Of your site you can redirect them to Home page or the account page that's Also possible so for example default Confirmation for this particular form is Go to URL and this is the home page of The test website I have which is perfect Right because I don't want users to log
In and see the admin area because that Might be confusing to users I just want To direct them to either the account Page or the home page in this space in This case it's the home page which is Perfect so you can configure it any way You like so in the user registration Section also you can have this option For example if the user is already Logged in and they open the login page What happens so in this case they just See a message that hey you are already Logged in and just show a log out link So this uh everything is already Perfectly ticket apart from a couple of Changes we made so let's go back to Fields here and once you've done Everything the confirmation or the Button text has been customized we can Save the form and what we'll do now the Form is created now we need to create a New page and we need to embed this form There and that will become your new Login form got it so what I'm going to Do is instead of creating a new page I'll just use the embed feature here Which will help me create a new page Automatically so I'll just create a new Page and I'm going to just name the page As new login right new Login Let's go So automatically a new page will be Created for me and this login form is
Auto or automatically will be embedded On the page for me so let's wait for the Page to load and I'm going to Demonstrate a couple of additional Features or say what you can do on the Page to match the branding of your Website so the page has now been created And the wp form or the form that we Created with WP forms has already been Embedded let me change the title of the Page to just login because new login Doesn't make sense for end users and I'm Gonna what uh else I'm gonna do is just Demonstrate how would you do this Manually if you already had a page so if I just click here and I delete this that Means this is a blank page you can use Any page what you need to do is embed The form using WP forms WordPress block So I'll just type in WP forms And in the form or this uh selector that You see here you'll select the form that You just created which will act as the Login form so for example if I click Here the user login form is what the Format we just created so I'll click it And it'll be embedded on this page now This is where it gets interesting Because we're using the block editor in WordPress we can do everything that we Want inside the block Editor to Completely customize the page any way we Like so if I want to add images if I Want to add text or if I add or install
Add-ons for Gutenberg or the of the Block editor I can use those add-ons to Even add enhanced elements on the page For example I have one of the add-ons For woocommerce or say one of the Add-ons for the block editor installed On the site so what I'm going to do is Demonstrate how it works for example if I go here let me add a container which Is a more of a selection of like how I Can add columns to the page so let's say If I select this layout and in this Layout I have a couple of options I can Add two different blocks so instead of Having this block here I can add a WP Forms block here which will just add the Wp forms on the side So I can select this form and I can Delete the form here And let's say I'm not a great designer But let's say if I wanted to add an Image here so I'll just go here and I'll Say Mitch And in the image block I'll just go to The media library I think I already have An image here this image works I'll add This here And of course I can crop the image if I Want I'll just try and crop this if it Works otherwise just for demonstration I Think it's it's more than enough but the Idea here is this instead of having the Default or just a blank styling the
Gutenberg and the block editor gives you A lot of control especially with Different add-ons to customize and Beautify the page which I've just Demonstrated here so if I just publish This page let's say and I open this up In a new tab you'll see how the page Actually looks like of course I haven't Finished the page but still it gives you An idea of what the page can look like In just a few minutes for work of course I'm already logged in so it shows that Okay you can log out but if I open this Entire page in a new incognito window You will see the login form working Brilliantly so let's wait for it to load And now you can see the image and the Beautiful looking form page of course With a little bit of finesse you can Match the exact branding of your site And let's say if I open the credentials Up I have the credentials for this Website if I try and login let me see if It works and let's also copy and paste The password Here And let's login Checking credentials this is what we Configured and now automatically I'm Logged in and automatically redirected To the home page which is also Reconfigured so it's also providing a Bit of abstraction from the user that They have no idea that you're using WordPress so if you go to login it'll
Actually go to the back end of the site Because of course it's not been changed So the original URL of the page has not Been changed but now what you can do is Just go to the menu of your site I'm Going to just demonstrate this right now Let me just minimize this so if I go to This page I have this page so I'll copy The URL I'll go to the menu entry of my Website and on the top header menu where The login page is I'll just replace this With this new page so I'll go to Appearance Menus And you see a custom menu here or custom URL here which is login with custom link So instead of the regular URL for login I just add this new URL which I just Created and I'm going to save the menu And once again what I'm going to do is Go to the incognitive window I'm going To close this first And once I've closed this I'm going to Open up the website again in an Incognito tab so let me just copy the Website's URL and now since I have Replaced the login URL this login should Also take me to the new login page so Once I click this I'm already logged in because of course There's another session open but you get The idea once I've changed the login URL Here so I can use this new page anywhere I like and the best part about WP forms
Is that instead of using it on a page What you can do is you also use it in Widget areas of your site let's say for Example in for uh particular areas let's Say for example you had a sidebar or you Had the footer where you want to add the Login information or you want to add the Form for login you can just embed the wp Form there using the widget options Inside WordPress and that will also Start acting as a beautiful login Registration or login page for your WordPress website so that's method Number one using WP forms to create Beautiful looking and customizable login Forms the stock quote method number two So let's talk about the second method to Create beautiful looking login Pages for Your woocommerce website and the reason We need a second method is because the First method utilizes WP forms which is Powerful but it still uses the block Editor which leaves a lot to be desired When it comes to the design elements so If you want to create really customized Beautiful design for your website the Block editor might not cut it in the Design Department that's why I'm Demonstrating a second method and the Second method will be using a plugin Called seed broad which is a beautiful Powerful and one of the best page Builders out there on the market and What page Builders let you do is design
Your page completely visually and WP Forms or I say Ctrl has a lot of Features it integrates with WP forms as Well but it also gives you a lot more Features than just creating a page so if You go to the seed Cross website which I'm going to link down in the Description you'll be able to check out All the features I have the premium Version available which also has some Theme building features which is not the Scope of this video but I'm going to Demonstrate some of those features Anyway while we are constructing the Page so I already have seed plot Installed on massage activated with the Premium version so what I'm going to do Is go to seed plot first go to landing Pages which is just a term for a page That users land on and instead of trying To create a new page you see some Options already present here so what Seatbelt allows you to do is create a Coming soon module or coming soon mode Where let's say your website is under Construction you can just create a Coming soon page maintenance mode so Let's say you're working on the site Maintenance page a login page which is Of course what we are trying to learn Here and also a custom 404 page so Ctrl Allows you to design meta areas or a Complete important areas of your website As well including login page which can
Completely create right inside seed plot So what I'm going to do is let's enable The feature first the login page feature So what it says create a custom login Page for your site optionally replace The default login page and if in the First method we did create a new login Page but we didn't replace the original Page in here with seed plot you Technically have the option of replacing The old login page completely so let's Set up a login page first and what we'll Do is start the steps to design the page Configure the page let's explain how it Works so what sheet plot does is it Gives you first templates to choose from Uh of course you can design everything From scratch which is the blank template Option here but let's say you find a Beautiful looking login page right here You don't have to do all the work right It's already created for you for example Let's say this Greenery login page Matches the theme of the website that we Are currently working with right if I Click the magnifying icon you'll see how The page appears on desktop let the Image load so this is how the signing Page or signup page is going to look Like looks beautiful what you can do is Check out the mobile preview as well Which also looks good so let's say if This is the page you're working with you Can choose the template which will
Create or prompt you to enter a new name Just for this demonstration I'm going to Do login Seed prod Right the name is descriptive just Because uh demonstration right so I'll Click save and start editing the page And what we'll do this will do is open Up the seed plot editor which is a one Of the easiest editors to use of in Terms of drag and drop now what you can Do or what uh is available to you is Complete control over what this page Looks like so if you click any of the Elements on the page let's say for Example you click here you can change The headline you can change the email Address or change the fields the labels The placeholders all the fields are Completely customizable for you now what You can also do is change this image for Example if you want to change the Background image you want to add Elements you want to add headings for Example if I want to add a heading I can Just drag it here just place it Somewhere and I'll just notice where the Options available I can just place it Here and now I can start adding elements On the page so complete control is Available to me from whatever I want to Do and of course you have tons of Elements to work with we can have videos We can have images buttons text lists
And advanced social profile social Sharing tons of options of course not All of them make sense when it comes to A login or sign-in page but you have These options available when creating Any page on the site so once you're Happy with the complete page leading to Configure the page in a few different Ways first of all if you don't want to Replace the original login page you can Just save the page again take the URL of The page paste it anywhere you want this To be available to your users but what You can also do is go to page settings And you have some options that you can Work with so you can have the page title You can change it you have the page URL You have the page status which you Publish or it will automatically go to Publish and you can also redirect the Default login page to this page so if You enable this feature what will happen Is if somebody actually tries to use the Original login page which is W usually Is example.com or just url.com Then automatically we'll go to uh this New page that you created but keep in Mind that the password reset page and All those pages they won't be changed Automatically but it's also I say a good Level of action if you want to do this Otherwise uh if your users are not tech Savvy you actually don't need to do this So let's keep it the without enabling
This feature in this case but what I'm Going to do is go back to design and I'm Going to save this page And once I've saved the page I'll go Back to uh exit the dashboard and I'm Going to demonstrate how the page looks Like the method number three I was Talking about technically the page login Or login feature of the page will work Exactly because everything has worked Out the form is created you can just Enter credentials to start working out Right but there's one interesting thing That you can utilize which I mentioned In the beginning of the video which we Can combine both methods and what this Means is you can utilize seed plots Design capabilities and WP forms login Form capabilities to create a third Problem or third solution or a page Which combines both of them and the Benefit of that is that once you've Created a beautiful login page or a form That works with WP forms you can have All the design options in the world but The form for the login still works so You can still embed that forms in widget Areas of your website anywhere you like Still have it in uh like the sidebar the Footer or any other page that you like You can utilize the form multiple times So let's say if there's an account page Or there's a public page that you want To create you can still have the login
Page or login form there while utilizing The same design options of ctrot without Having to create two login pages so just For an example I'm going to demonstrate How it's going to work I'm going to Disable the login page just for a second Which we created I'm going to create a New landing page so I'm going to create Add new landing page And once again I'll be presented with The template options or templates so I'll just find login once again and what I'm going to do is just create the same Page or let's try and pick a different Page this time So what I'm going to do is let's pick This one I'll just click the this page And I say login Seed prod WP forms and I'm going to save and start Adding the page and what I'm doing is Creating a brand new page similar to What I did in WP forms but instead of Using seed plots forms I'm going to just Add the wp forms right here with the Integration so I'm going to click this And this is a login form it's already Added via seed product seed plot this is Coming from seed plot so if I delete This The form will disappear of course but if I go here I type in WP forms I go to Widgets I'll find W performs here and I Can drag and drop it right here the same
Thing that we did on the page when we Were working with uh WP forms is the Exact same thing but the interface is a Little bit different what I'm doing is Selecting the form once again which I Want to embed here on the page of course This is a signing or sign in page I'm Going to use user login form so once It's done I'll just click the apply Button and now the template is now Showing up here so of course I can Modify the design for it to look a Little bit better but the idea here is Very simple now instead of using seed Prods login form we are using WP forms Login form so once this page is saved Again it will create a URL so let's say For example if I click save And I go back to the dashboard I'll Publish the page as well I'll close this For now just to give you an example this Is the page we just created so if I just Preview this page or I just say Copy the link of this page this is the URL let me just copy it and I'll open it In a new incognito window once again Precise and I'll just go open this login Page in an incognitive window and now You see this is a beautiful login page That shows up here and now this is Coming from WP forms but the page design Is coming from seed broad Best of Both Worlds right and of course you can do The same thing that we did in Step
Number one just copy this login page URL I'll close this incognitive window I'll Go to the appearance the menus of WordPress once again I'm gonna go to login and instead of This I'm going to just take this and Save this And once the page is saved let's take The URL of the website Incognito window once again because I Don't want to be logged in Open the website up And now if I click the login link here On the main header menu it's going to Take me to the seed plot page but with The form embedded coming in from WP Forms and as I said the benefit of using This approach is that I can still embed This form anywhere on the site without Having to have two login pages right Best of Both Worlds mind blown amazing Amazing technique so that's how you Customize and create beautiful looking Login pages on your woocommerce website Method number one using WP forms method Number blue using seed plot and Method Number three combining the power of two Powerful plugins to create a flexible Solution that you can utilize on your Website any way you like if you have any Questions about this entire video leave That in the comments if you enjoyed this Liked it learn something new make sure To leave a thumbs up it helps us out and
Of course if you're interested in more Tutorials watching tutorials like just Like this one make sure to subscribe to This channel I'll catch you in the next Video very soon take care
