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
NirvanamanagerAsked:
Who is Participating?
 
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
 
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
 
NirvanamanagerAuthor 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
 
NirvanamanagerAuthor 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
 
NirvanamanagerAuthor Commented:
brilliant. thank you
1
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.