How to create a popup for login in woocommerce

How do I create a Pop-up menu for login/create login like "experts-exchange.com" or "wish.com" for my woo commerce site
NirvanalearnerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Instead of a pop up, use a modal and perhaps you are using the term pop up generically.  

A stand alone modal library https://robinparisi.github.io/tingle/ but if you are using bootstrap there is a built in function. https://getbootstrap.com/docs/4.0/components/modal/.  Because you are using WP / Woocomemerce, you are better off using a plug in https://wordpress.org/plugins/tags/woocommerce-modal/

Either way, a modal is nothing more than a hidden div that is shown (popped up) after a click or some other type of event. Just before the modal is activated, you will inject your html form (or hard code it but that is more limiting). From there you will have a form you generated to initiate your log in.
1
NirvanalearnerAuthor Commented:
Thank you, I was able to create login pop-up, however got one more question how can I customize the modal or embed the attached script in the menu
login-sign-up-form-concept.zip
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I found the codepen here https://codepen.io/THEORLAN2/pen/MyedKo

>  how can I customize the modal or embed the attached script in the menu

This is a 2 part question.

1) To customize the modal you are going to use html and css in your modal body.  

2) Embedding the script.  You are not really embedding the script. You are simply listening for actions such as clicking a button. The modal may start off hidden, but it is part of the html page like anything else. It just comes alive when the modal is activated.  Also keep in mind that script you are pointing to is javascript. That javascript is gathering form data an submitting to the back end code. It's not actually doing any logging in/checking credentials. That part is done on the server with php and the database.

Assume you have
<div id="modal">
     <div id="modal-body">
               <input name="username" >
                <input name="password" >
               <button id="submit">submit</button>
     </div>
</div>

Open in new window

Your javascript code to listen for the button click will be
$(function(){  // will run once the document is loaded
      $('#submit').on('click',function(){
             // RUN YOUR SCRIPT HERE  
       });
});

Open in new window

1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NirvanalearnerAuthor Commented:
Hi Scott, Sorry couldn't check yesterday. will check today and will let you know. Thank you and sorry for the delay in responding.
0
NirvanalearnerAuthor Commented:
brilliant. thank you
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.