How to Create Popup Login Form in Wordpress and Woocommerce?

so you have a nice website with a woocommerce shop and you have a login link in the menu if you click and it takes you to the my account page and this is a default woocommerce my account page it's okay but nothing special and therefore today we're going to tweak it in a way that if someone clicks on the login link it opens up in a pop-up and as you see in the pop-up there is also a sign up option here also we're gonna tweak the my account page to show it a bit differently as you see on the screen right now so it's gonna take only a couple of minutes to make it work so jump in now let's start by adding the one plugin to the site therefore go to the plugins add new and search for login signup pop-up this one here install and activate it and after that you'll see a menu down here go to the settings and there are a bunch of things for you to configure so let's take a look at those first registration fields later i'm going to show you how to add or modify those those are here also you can access them by clicking here here you can choose whether to enable registration next one is whether to autolog in your user on a signup or not next one if you want to show the forget password or password reset that option then activate this one here if the user registers then what is a user default role if you're using woocommerce and then it would be wise to choose a customer but you can choose whatever role here you want next on login redirect later i'm going to show what does it does register redirect and logout redirect i would suggest you to leave this one here activated success endpoint what it does for you it clears the cache and login and register if you have a cache plugin enabled next one replace my account form if you do that then the default woocommerce registration and login form will be replaced i'm going to show you what i mean i'm going to deactivate those save it now i'm going to refresh this page and as you see my default login form is activated but if i activate those save it then it will will be automatically replaced here next one auto open popup and open once or we can set up the pages later i'm going to show you what does it mean now under the style tab you can set up the customization rules for your site text colors and so on here it's a sidebar image i'm going to show you later what is it but you can change it here sidebar position width and so on next one is advanced tab for custom css and the info tab is really useful because it shows you four ways how you can add those links to your site first is from the menu next one with the link third one with a class and fourth with a short code so let's start with the menu here i'm going to go to the appearance menus i'm going to choose my main menu here select and now there is a login sign a pop-up and there are a bunch of links for you to add over there for example if you have the login and logout i'm going to save it and open up as a logged-in user then there is only log out menu here now let's take a look what the logged out user sees there is a login menu if you click here there is a pop-up this is the sidebar image i was talking about a bit earlier so let's change it go to settings style sidebar image select maybe this one here insert into post save it now let's refresh it open it up and there it is with a couple of clicks i changed the pop-up image so i added it here let's see what else we can do here go to the info and there is a short code for you well let's grab this short code and i'm going to go to the appearance and customize now this part depends on your team if you don't use a proxy team or cadence or astra which allows you to customize the header in a way you see right now then this one is not for you but i'm using the blockchain theme this one allows me to add the html element here so i'm gonna paste the shortcode publish it and now if i go on a front page there is a logout link here and if i refresh a page there is a login here and this way you can use short codes for adding the pop-up login okay i'm going to go back here to the menu info tab next one is a rather self-explanatory just paste the link replace my site.com with your own site link and there is a login option for you i'm not going to go through all of those here but all the explanations are well described here now instead let's take a look at the fields here those are the registration fields you can add the field choose the one you like or you can rearrange fields if you click on it there are settings here you can use columns choose icon and so on really easy to use if you're done with it then just save if you mess something up then reset under the settings there are ways for you to customize your form with icon size background colors icon colors and so on you can customize it as you like now let's tweak it a bit i'm gonna go to the appearance and menus and i'm gonna create a new menu it's called account menu create it now i'm gonna add some links first is login next one is hello first name for logged in users and there will be also a logout button hello login logout save menu and now what shall i do with it i'm gonna go to the appearance and customize once again since my team is proxy team it allows me to add two menus on the header if you're interested then take a look at the description of this video there is a coupon code for the proxy pro version you can use so i'm gonna delete the html element i added before instead i'm going to add the menu 2 here and i'm going to choose it to be account menu this one here it's already showing up under the design i'm gonna makes it font weight regular and it's gonna be probably 13 pixels publish that's a refresh on the first page so it takes me to the account page and this one logs me out and if i'm logged out then there is a login button here although it seems to me that the font weight should be a bit better so let's customize it once again let's see what is a font weight here so 15 pixel regular let's do that 15 pixels and no uppercase so much better refresh there it is now i'm going to add a icon over there therefore i'm going to go to the fontor awesome site i'm going to search for sign in icon this one here i'm just gonna click here and copy it next one i'm gonna go to the appearance and before logging i'm just gonna paste this one now i'm gonna search for sign out once again i'm gonna grab this one and paste it before log out and hello first name maybe it would be wiser to add the account over there therefore i'm gonna paste this one my account this way user knows exactly what it is and i'm gonna look for user i like the user with circle and copy once more paste save it refresh it and there it is although now it seems to me that it needs some spacing therefore i'm gonna tweak it here i'm gonna click and write style margin right 7 pixels and i'm gonna copy this part and add it to other ones also so save it refresh it looks good let's see how does it look like here well done now let's tweak it a bit more i'm gonna go to the login sign up settings and login redirect i'm gonna go to the my account page and i need my users to be redirected to the orders page therefore i'm gonna copy this link here paste it here delete this part i'm just gonna give them my account orders and after the logout i want the users to be redirected to the home page therefore i'm gonna add the dash here save it and let's test it first i'm gonna log out i'm redirected to the home page let's login login successful and i'm redirected to the orders page now let's tweak it a bit more i'm gonna activate the auto open pop-up i'm gonna show you what does it mean so i'm on a site i'm gonna refresh it and as you see the pop-up opens up automatically on every page i don't want it to be opened on every page therefore i'm gonna add here a slug for the my account page that is my account save it and now let let's see what happens i'm gonna refresh this page to demonstrate that it doesn't not open up now i'm gonna go to the my account page and as you see the login opens up this way you can set up the pages you would like the pop-up to be opened automatically now as you saw it wasn't so difficult to accomplish a couple of minutes of copying and pasting and your site has a nice looking my account page if you're new to my channel then take a look at the next video you see on the screen right now because it's also full of useful content also if you like this video then press thumbs up and subscribe to my channel meanwhile take care

Channel: WP Simple Hacks - Wordpress tips and tricks

Views: 3,323

Keywords: popup login form in wordpress, how to add popup login form in wordpress, wordpress popup plugin, wordpress popup login register, wordpress popup login, woocommerce popup plugin, login/signup popup ( inline form + woocommerce ), woocommerce login popup, woocommerce popup signup and login forms, woocommerce login/signup popup, woocommerce login and registration popup plugin, wordpress registration form plugin, wordpress registration form, wordpress registration page

Id: If4SSOja9O0

Length: 12min 0sec (720 seconds)

Published: Mon May 10 2021