Awesome checkout wizard using jQuery

Checkout or order processing is a final stage of any marketing campaign or eCommerce website without any doubt. So I create modern design awesome checkout wizard using HTML, CSS and jQuery fully hand-coded. In this checkout wizard, you see when first step is completed than its close and up next is open as same follow with other steps. Or, suppose if you filled any wrong entry and submit those step than you again go to same step directly or those steps is already completed and have no mistake which shown as completed. So its user-friendly or easily to manage custom changes as per requirement at the developer ends.

checkout wizard

For see the live demo click on demo –

19 comments
  1. Thanks for a such a wonderful checkout form. When click one tab after done every tab is open by click. just tell how to open only one tab at a time .

    • Thanks..
      After the complete one tab I add class “complete” on this, if user again come click on this after the completed than I remove class “complete” and add class on last open tab “jumb-here”. So according this logic after the tabs complete only tab open.

  2. i wrapped the code in a FORM and when clicking the first button it submits the Form. How can i bypass this ? Im using a ASP.net MVC 5 application. Thanks in advance!

  3. hi thanks for such a wonderful tutorial but i found a problem when i click continue button it s working fine but i can also access the upper hide tab thats the problem . can u please tell me how can i just open one tab at a time. if i click one tab other will be disabled and without clicking continue button no tab will be open including upper tab . thanks for advance.

  4. Hello Rashid,
    Thanks for your comment.
    For disabled the other tabs firstly add the class like “tab-disabled” on others tabs only not in current open tab. and than write this code:

    $(“.tab-disabled”).click(function(e){
    return false;
    });

  5. hi,

    if we are using the form inside the login tab section the form is submitting and the page get refresh so the tab is not getting slide up. how to use forms inside that.
    if the user havent filled the fields the form should be shown and after filling the details the form (login information )should slide up. please send me the reply soon its urgent for me

  6. Hi Sanjay,

    Thanks for such an awesome checkout form. Have been searching lot for this. Finally I got here.
    I have a form input fields inside each tab and have to validate these fields before it goes to the next step/tab when clicked on continue button. I’m trying in my way to achieve this, but could not get this done as i’m not that good in jquery. Could you please help me how to validate the fields on current tab and then go to the next tab if the validation is successful. please give me an example code ASAP.

Add Comment

Required fields are marked *. Your email address will not be published.