Improved Magento one page checkout design (CSS only!)

When you've got some experience in Magento, you know it's one page checkout (the default checkout page of Magento) isn't nearly as sexy as the rest. The vertical accordeon initially looked ok, but after three years everyone has learned it's one big jumpy, confusing and bloated interface that just doesn't do the job. Many have fallen for the simple interface of the commercial one step checkout module, but we at H&O always believed the default OPC had some potential underneath its dusty layer of CSS.

One page checkout improvement with tabbed design

Ok, that's not true. But for one of the projects we were recently working on, we weren't able to use the commercial one step checkout module because of some other modules that were extending our checkout. As an experiment, we decided to redesign the vertical accordeon design to a horizontal interface with progressbar. We removed some less-important elements (mainly text-related) and redesigned the forms to create a better, less space consuming single column of elements. We ended up with a good looking, improved checkout design that we think is more inituitive than the original. The beauty of it all is that we made it a CSS only solution, meaning we did not make any changes to the template files. This gives our improved checkout the following benefits:

  • No complex installation process, just a minor css upgrade to your existing template
  • Crossbrowser compatible
  • Easy to customize to fit your own design
  • CSS3 animated (won't do any harm in Internet Explorer)
  • CSS only, so you can still use other commercial checkout extending modules
  • Comes in two designs, one with process indicaton bar and one with a tabbed design

I can't tell anything about higher conversion rates, a better user checkout experience or reduction of shoppingcart dropouts just yet, but I've got the idea that this is a way better checkout experience than you can offer through the original one page checkout. Try it yourself and use the comments to let me know what you are experiencing. I would also love to see what you guys can come up with in terms of design (show me those shiny customised OPC designs!).

Please join our mailinglist to download for free, no spam guarantee. If you've already joined our mailinglist before, please login at our secured download page

Notes

  • To install, copy the provided CSS and paste it in your styles.css, just below the one page checkout styles. (search for the comment: /* One Page Checkout */)
  • The CSS provided is designed to work for Magento's default theme. If your webshop uses a custom theme and you've made some small ajustments to the checkout already, you might have to tweak our CSS a little.

H&O is expert in het oplossen van complexe Magento vraagstukken, maatwerk grafisch ontwerp en het bouwen van custom Magento modules.

Als je op zoek bent naar een partner die je kan helpen met het beantwoorden van moeilijke Magento vragen, een maatwerk productimport voor je ontwikkeld of een custom Magento module voor je schrijft die jouw assortiment met een andere webshop koppelt, dan ben je aan het juiste adres. H&O heeft zich sinds 2007 verdiept in de techniek en ontwikkelingen van het e-commerce CMS, speelt een actieve rol in de community, heeft verschillende modules uitgebracht en heeft voor klanten uiteenlopende technische modules ontwikkeld. Ons kantoor is gevestigd in Roelofarendsveen, direct naast de A4 én slechts op 15 minuten afstand van Amsterdam. Neem contact met ons op en kom eens langs, dan bespreken we jouw vraagstuk!

Erwin Otten

Erwin Otten is a Web Designer / Graphic Designer from Oude Wetering (The Netherlands) and co-founder of Hachmang & Otten. With an education in communication & multimedia design, he is passionate about web design at all levels including (information) architecture, interaction, code, and graphic design. Contact Erwin Otten

Comments
  • Hidayet Ok

    (apr 11)
    Reply to this comment

    Great modification ;)

  • Kamil

    (apr 12)
    Reply to this comment

    Well done! Really nice work :)

  • Mooshi

    (apr 12)
    Reply to this comment

    Very nice! thank you very much…great!

  • Nick

    (apr 12)
    Reply to this comment

    Looks good, except in IE

    • Erwin Otten

      (apr 12)
      Reply to this comment

      Hi Nick, you are right. Something seems to be broken in IE6 / IE7. I’ll release an update asap!

      • Nick

        (apr 12)
        Reply to this comment

        Wouldn’t worry about IE6, it can barely handly a png. A fix for IE7 would be nice if possible.

        • Erwin Otten

          (apr 12)
          Reply to this comment

          To Fix IE7 place the following below the line .opc .step-title,.opc .allow .step-title,.opc .active .step-title {...}

          .opc .step-title,.opc .allow .step-title,.opc .active .step-title { *display:block; *float:left

          I’m still looking into IE6 ;)

  • Tino Fotiou

    (apr 12)
    Reply to this comment

    This extension is greatly appreciated, many thanks :)

    I have a problem with my theme. Which file I should look into to fix this problem with the extensions breaking up my cart view: http://awesomescreenshot.com/0e1b9iw65

    • Tino Fotiou

      (apr 13)
      Reply to this comment

      More precisely, which parameter I have to change to move the whole table to right position from the top and left? I presume it is on styles.css because that is the only one changed.

      • Erwin Otten

        (apr 13)
        Reply to this comment

        Hi Tino. From the look of your screenshot I’m guessing your ol with class .opc{} has got a margin. Try if you can find it in styles.css and remove it, or set it to zero with:

        .opc {margin!important} 
        • Tino Fotiou

          (apr 13)
          Reply to this comment

          Hi, thanks for the advice, although meddling with the margins on opc class is only moving the table relatively under the grey bar where as I’m trying to find the correct parameter to move the whole thing to correct place.

          My theme’s default OPC:
          http://awesomescreenshot.com/09ebb1l03

          With your splendid looking, .opc margins tweaked but still flawed (red square):
          http://awesomescreenshot.com/0b4bb1f87

          I’m comparing the old and the new css but the whole table hasn’t moved a single bit till I started, and I’m only changing between this OPC 2 and the old one, so it’s gotta be somewhere there. I’m no good in coding so appreciate any help :)

  • Tino Fotiou

    (apr 13)
    Reply to this comment

    The problematic line was this: .checkout-onepage-index .col-main { padding:0; border:0; }
    removing it makes this work with my theme, small margins but I’ll remove them later.

  • Steve Maggs

    (apr 14)
    Reply to this comment

    Excellent and simple (for us, thanks to you). I hated the vertical checkout so this was really welcome as a way of improving it quickly.

  • Tino Fotiou

    (apr 15)
    Reply to this comment

    After previous problem I’m now facing another, which is the fax number and telephone number messing the OPC on step two like this: http://awesomescreenshot.com/0a2betc27

    I have removed the fax number from billing.phtml and shipping.phtml as instructed by google hits I found, where else it’s lurking, I can’t find it…

  • cathal

    (apr 22)
    Reply to this comment

    Doesn’t seem to work at all in Chrome unless I’m doing something wrong, IE8 looks fine bar some tweaking

    • Erwin Otten

      (apr 26)
      Reply to this comment

      Thanks for the comment Cathal, I will take a look at it. I assume you use win/chrome (since the video has been shot in mac/chrome)?

      • cathal

        (apr 28)
        Reply to this comment

        Well just had another look at it in Chrome and now it works fine.
        Dunno if its something I removed from the css since I tweaked a lot of it while working in IE8 and didnt change anything else in other code.

  • ravi

    (mei 04)
    Reply to this comment

    hi ,

    i have set accordion verticle menu in my e commerce website but it doesn’t show in checkout and login form !!!!!!!!!!!!!
    can you please help me with this ???????????

  • Sogle

    (mei 06)
    Reply to this comment

    There seems to be a problem when tabbing through the input fields (on step 2 and 3). When you tab too “far” things jump in the wrong position.

    Any fix for this?

  • M0RPHlNE

    (mei 06)
    Reply to this comment

    Hello,

    I implement this on my site. It is great. I appreciate you sharing it. I have one concern. I have a long form on the billing section if the customer chooses to register. When they click on “Continue”, it goes to the next step but they are still at the bottom of the page. Do you know of a way to make the page jump to the top when the next step loads?

    Thank you!

  • Raju Kumar

    (mei 06)
    Reply to this comment

    great job. You have changed every thing without touching the code. even not touched the JavaScript code.
    This is the point of inspiration for designers.

    I was searching the one page check out and came to this improved css, this solved my problem.

    Thanks You !

  • Peter

    (mei 12)
    Reply to this comment

    I like the new layout very much, but got a wish.
    I would like to have a guest checkout only, so no login stuff.
    Can I just delete some lines in the CSS (and which ones?) or does it take more to make that happen?

    Thanks in advance. Peter

    • Erwin Otten

      (mei 12)
      Reply to this comment

      Hi Peter,

      What you could do is to hide the login block on your checkout page and center the guest checkout option :

      #opc-login .col-2 {display:none}
      #opc-login .col-1 {float:none;margin:0 auto} 

      However, as you can see visitors can still select the radio button ‘Register’. You could modify the javascript to auto select ‘Guest checkout’ (you’ll find a tutorial here) and hide the radio options too:

      #opc-login .col-1 ul.form-list {display:none} 

      This will probably work, but a better solution would be to remove the login form(s) from the templates completely.

  • Sogle

    (mei 13)
    Reply to this comment

    Hello Erwin,

    Any luck solving the “Tab” issue so far?

    There’s another slight issue with the review table. Because OPC has a static height it does not scale when orders reach the bottom. This means checkout button jumps out of sight and is not click-able anymore.

    I’ve been able to fix this issue adding a tiny bit of CSS.

    Adding a height (set to own preferences) and an overflow-x:hidden will add a scrollbar to #checkout-review-table-wrapper when orders reach the bottom. This way the checkout button will be in sight no matter how many products are bought.

    Greetings,
    Sogle

    • Petrache Nicolae

      (mei 14)
      Reply to this comment

      hello. can you specify exactly the code lines? thanks

      • Sogle

        (mei 16)
        Reply to this comment

        Hello Petrache,

        I’ve added nothing more than a

        #checkout-review-table-wrapper { height:300px; overflow-x:hidden; }

        to my improved check-out CSS. Just below the .opc line.

        Height can be set to own preferences.

        Greetings,
        Sogle

        • Jo

          (nov 29)
          Reply to this comment

          i posted #checkout-review-table-wrapper { height:300px; overflow-x:hidden; } below my /*opc*/
          but dont seen to be working ! >,<

          ideas ?

          Thanks in advance

  • Leo

    (mei 16)
    Reply to this comment

    Hi,

    does this work with Magento 1.5.1.0 ? I just “installed” the code and got the problem that only step one is shown in the top line. After pressing the button “ok” and checking the guest radio box it goes on with no new step. I can go backwards as often as I want but there is always step one.

    Is there a problem with 1.5? For testing we just tried the “standard template”.

    Best wishes,
    Leo

  • Mike

    (mei 17)
    Reply to this comment

    Hi Leo, to get around this, comment out, or remove all extra lines of CSS AFTER the ‘.block-progress’ declarations in your styles.css up until the ‘/* Multiple Addresses Checkout */’ comment.

    HTH,

    Also, great work guys this is a really beautiful solution. Many thanks!

    Mike

    • Mike

      (mei 17)
      Reply to this comment

      Leo, disregard what I said previously - paste the new one-page checkout CSS just BEFORE the ‘/* Multiple Addresses Checkout */’ comment, keeping all other CSS intact.

      This should now work perfectly.

      HTH,
      Mike

      • Leo

        (mei 19)
        Reply to this comment

        Hi Mike!

        Thanks for the information. BOTH solutions work. I used the second one now. The only problem I have is that the telephone field is too long so it reaches in the first step….

  • HaLo

    (mei 18)
    Reply to this comment

    @ Sogle:

    I think the TAB-issue could only be solved by adding the slide-animation to the “accordion.js”. The current slide-effect only works in CSS3 browsers because of this line of css:

    .opc:first-of-type .step[style*=‘display:none;’],
    .opc:first-of-type .step[style*=‘display: none;’]{display:block !important;}

    If you comment them out, you dont have that problem anymore, but the animation is gone…

  • Sogle

    (mei 19)
    Reply to this comment

    @HaLo

    That’s what I was thinking aswell. Since div’s are still active but not in sight, tab key will find them.

    I would like to see how many customers find out about this problem, since this fix is more important than the animation for me.

  • Chris

    (mei 20)
    Reply to this comment

    Does this work with Magento 1.3.2.4? I have a style.css file in the default theme, however, all the one-page-checkout styles are located in my boxes.css file. Applying the opc 2 code after /* One Page Checkout */ has no affect on my checkout.

    • Paul Hachmang

      (mei 25)
      Reply to this comment

      Hi Chris,

      The template structure has had a mayor overhaul with Magento 1.4 and therefor I do not believe this to be working with 1.3.x.

  • Merlijn Ackerstaff

    (mei 23)
    Reply to this comment

    Thank you so much! This seems like a great solution, way sexier and purely based on only changing the css.
    Respect!

    • Erwin Otten

      (mei 31)
      Reply to this comment

      Thanks for the kind words Mr. Ackerstaff. It’s great to see people appreciate the fact that we’ve managed to do this by only changing some CSS!

  • Peter

    (mei 25)
    Reply to this comment

    I face the same problem as Tino Fotiou (apr 15) meaning phone-number and fax-number is mashed up.
    I entered the website so you can take a look hopefully you can help me

    • Paul Hachmang

      (mei 31)
      Reply to this comment

      Dit you manage to solve this problem? If I take a look at your checkout process there doesn’t seem to be anything wrong with it.

  • Sogle

    (mei 30)
    Reply to this comment

    I do not see your website link in your post Peter. Can you please add it?

    Most likely some HTML problem, probably missing a </div>

  • Pat

    (jun 05)
    Reply to this comment

    Great work, thanks. Haven’t figured out how to make the height flexible but probably only possibly w/ some js code

    • Erwin Otten

      (jun 06)
      Reply to this comment

      Hi Pat. You are right, in order to make the height flexible you’ll need some JS. In most cases however, a static height will probably do. Let me know if you’ve found a good javascript solution yourself.

      • Erwin Otten

        (jun 06)
        Reply to this comment

        Pat, I wrote a quick solution to make the height of the .opc ‘container’ resize for the last of the checkout (order review) This is the only place that troubles me, because when a customer wants to purchase a lot of different products, the ‘Place order’ button is pushed down by the overview table.

        In opcheckout.js (/skin/frontend/base/default/js), place the following on line 817:

        var tableHeight = $('checkout-review-table').getHeight();
        $(
        'checkout-step-review').setStyle({height:(tableHeight+100)+'px'});
        $(
        'checkoutSteps').setStyle({height:(tableHeight+270)+'px'});
        $$(
        '.main')[0].setStyle({height:(tableHeight+415)+'px'}); 

        Good luck

        • Nate

          (jan 12)
          Reply to this comment

          I have the same issue but your fix is not working for me. Could you help? Thanks

          • Andre Xori

            (apr 05)
            Reply to this comment

            My solution for dynamic height was simple. I got the Erwin Otten solution and just called it every two seconds during the checkout. It will keep verifying when should change the height.  Just put it in the beggining of the opcheckout.js

            window.setInterval(‘fixHeight()’, 2000);
            function fixHeight(){
            var tableHeight = $(‘checkout-review-table’).getHeight();
            $(‘checkoutSteps’).setStyle({height:(tableHeight+270)+‘px’});
            }

            hope it helps! :)

  • Joaquim

    (jun 07)
    Reply to this comment

    Hi Peter, as you have fixed the problem with the phone and fax? thanks

  • Igor Ocheretnyi

    (jun 09)
    Reply to this comment

    You are genius. Thousand developers, but only you create the best solution.

    P.S. I am also Magento developer of thousand. :)

  • Paul Hachmang

    (jun 10)
    Reply to this comment

    Small IE update. Not really related to this checkout in specific, but more to the checkout in general. Make sure you force IE9 in IE8 mode.

    I’ve done this using this nice module: http://decadentwaste.net/2011/05/magento-extension-google-chrome-frame-ie-ua-compatibility/

    Although it should have been fixed in Magento 1.5.1.0, the prototype (javascript library) version used doesn’t officially support IE9. Therefor to solve all of your problems force IE9 in IE8 mode.

    In the new Magento 1.6.x version, the prototype library is updated, but we’ll have to wait for that.

  • Alex

    (jun 28)
    Reply to this comment

    Cool.

  • Gergie

    (jul 03)
    Reply to this comment

    Brilliant!!

  • Erwin Otten

    (jul 04)
    Reply to this comment

    Thanks guys, awesome comments!

  • jonny

    (jul 08)
    Reply to this comment

    this desgin is very cool ,and please send it to my email,thank you my dear

  • Joey

    (jul 08)
    Reply to this comment

    ziet er goed uit! Vroeg me alleen af hoe ik ervoor kan zorgen dat ik de checkout pagina zelf verander.
    Ik zou graag een banner onder Betalings Methode toevoegen.
    Hiermee bedoel ik bijvoorbeeld een banner met dat je veilig kunt betalen bij ons en dat retourneren gratis is.

    Ik krijg nergens gevonden waar ik dit in deze pagina aan moet passen..

    • Erwin Otten

      (jul 11)
      Reply to this comment

      Dag Joey,

      Als je een banner (eenvoudige afbeelding) wilt plaatsen onder de te kiezen betaalmethoden dan kun je dit doen in deze template: /app/design/frontend/yourpackage/yourtheme/template/checkout/onepage/payment.phtml. Je kunt hier gewoon html schrijven, dus <img src="locatie/afbeelding.jpg"/>

      Succes!

  • ldn_tech_exec

    (jul 14)
    Reply to this comment

    great work mate. this is fantastic, magento should update their source to include this.

  • sanjeev

    (jul 16)
    Reply to this comment

    You are very intelligent. Great thought and logic in magento.

  • Jon zhuang

    (jul 26)
    Reply to this comment

    This is very great! But it don’t show good in IE6、7、8.I think you should edit this.

  • francesco

    (aug 10)
    Reply to this comment

    Hello,

    your css trick looks great but Explorer breaks my checkout at the second step (Shipping method)...probably because I have used a custom theme:
    http://biofarm.it/magento/checkout/onepage/

    any suggestion on how to fix it?
    Thank you in advance

  • Ben

    (aug 31)
    Reply to this comment

    Hi

    I have a problem, you can take a look at it at my demo store here: http://bandmerch.elementfx.com/m4/index.php/checkout/onepage/
    If you continue to press the tab button then the whole thing moves across and it screws up the formatting. Also, the telephone and fax fields are not aligned correctly. Any fix?

    • Erwin Otten

      (sep 01)
      Reply to this comment

      Hi Ben,
      If I look at line 455 of your styles.css and remove

      width:275px

      the fax and telephone problem seems to be fixed. I don’t know what the collateral consequences are when you remove this line, but it’s something worth looking at! We don’t have a fix for the tab thingy yet. What you could do is to give a tabindex of -1 to all checkout input’s (with javascript), this will disable tabbing through the form completely.

      • Oliver Stott

        (jul 01)
        Reply to this comment

        Can anyone explain the solution for tabindex with Javascript???? Is there a working solution that anyone can provide or is it just a case of going through all the inputs and changing???

  • Diogo Haynes

    (sep 05)
    Reply to this comment

    Amazing!!! Some people in Brazil, just copied it, and sell for an exhobitant price!!! Thank you!!!

  • Magento ontwerp

    (sep 28)
    Reply to this comment

    Well this vertical accordeon design to a horizontal interface with progressbar…It may have some more elements but it is also sufficient…It covered important head..

  • Valentin

    (okt 02)
    Reply to this comment

    Hi Erwin,

    I’m hoping that you can help me out with a tiny problem.
    On the checkout page, after you click proceed to checkout ( which is supposed to take you to the credit card page which is handled by another company) the button dissapears ( as it should) and then it’s clickable again, which is a big problem if users decide to click it twice. Is this a javascript thing?

  • Anastasia

    (okt 04)
    Reply to this comment

    Hi!
    Looks great! But the place order button missing in 1.4.2.0.(

  • Tommie

    (nov 13)
    Reply to this comment

    Hee mannen,
    Ik krijg hem maar niet aan de praat is het nog wel te gebruiken voor magento 1.6?
    En ik heb een template gekocht, wel wat aangepast, maar wat zou ik daarvoor moeten veranderen dan aangezien de code anzich prima lijkt..

    • Erwin Otten

      (nov 14)
      Reply to this comment

      Hoi Tommie. Jazeker, deze CSS checkout werkt prima in 1.6! Het ligt absoluut aan je template of je implementatie.  Probeer anders eens de standaard theme i.p.v je aangeschafte template. Installeren is simpel: plak de code onder de standaard checkout opmaak (zoek naar /* One Page Checkout */) in styles.css. Succes!

  • Andre xori

    (nov 21)
    Reply to this comment

    Hey Folks! Amazing job! congrats.
    My only concern is that my login form is not working anymore. When I submit email and password, page refreshs but nothing happens and it does not log in. Any ideas?
    Regards

  • Pulkit

    (nov 23)
    Reply to this comment

    Hey , Floating is not working in mozilla as well as IE - its working in chrome. ANy help on this.
    waiting for a solution.
    http://www.a1delhiflowers.com

    Please have a look at cart in mozilla and plz tell me the solution if possible.

    • Erwin Otten

      (nov 28)
      Reply to this comment

      Floating?  You mean the animation. In that case you are right, only chrome will animate. You could do some javascript animation, but then you’ll risk doing damage. We like our CSS enhancement to be clean and simple!

  • Carlos Vieira

    (nov 24)
    Reply to this comment

    Hi folks, it is really great this CSS… If I could make it works, I put it above the place is asked, but didn’t worked, if you could see I would appreciate. Thanks.
    printfenix.com.br

  • Freddy

    (nov 25)
    Reply to this comment

    Hello
    Ik heb ingeschreven maar waar te krijgen van de OPC CSS om het te testen op Magento 1.6.1. -Ik schreef dank aan google vertalen:) -

  • uniformes profissionais

    (nov 26)
    Reply to this comment

    estou com problemas em meu checkout, há alguma forma de restaurá-lo?

    • Erwin Otten

      (nov 28)
      Reply to this comment

      Just remove the CSS we provided, nothing should be broken. If so, you’ve probably made some adjustment by yourself. Good luck!

  • Kartvizit

    (nov 28)
    Reply to this comment

    Thank you it saved my day.

  • sam

    (dec 06)
    Reply to this comment

    Hi
    Thanks for this amazing CSS file.. I have implemented this style and its fine in every step but when in get to step 6 the ‘place order’ button is missing in both progress bar and with tabs!!! the only different is in Page Checkout with tabs step 6 moves to new line but still ‘‘place order’’ button is missing… can u please help..
    Thanks

    • fluke

      (mar 07)
      Reply to this comment

      i have the same problem. i tried to fix it myself but i failed to do so. please help us mr otten!

  • SchmidtMarilyn

    (dec 10)
    Reply to this comment

    Lots of specialists say that personal loans help a lot of people to live the way they want, just because they can feel free to buy needed things. Furthermore, some banks offer student loan for different persons.

  • vitor

    (dec 21)
    Reply to this comment

    Thats fantastic, thanks a lot for making this and sharing!
    Found a bug in IE, when you sign in to an existing account, but pick the option to add a new adress the form dissapeared from the screen and u had to TAB to find it. I’ve fixed it by using “clear:both;” in the property .opc .form-list li fieldset
    Tested in IE8 and IE9 and worked nice. Hope it helps!

  • Maurice

    (dec 29)
    Reply to this comment

    Hey Mannen, is het mogelijk om de hoogte van de de tabellen mee te laten scalen? Nu heb je 1 lange pagina, ook als er een beperkt aantal content in staat. Alvast bedankt!

    • Erwin Otten

      (dec 30)
      Reply to this comment

      Hoi Maurice! Wat bedoel je met de hoogte van de tabellen? Het klopt dat het geheel een statische hoogte heeft, omdat de ‘tabs’ absoluut zijn gepositioneerd. Als je dat storend vindt kun je deze oplossing gebruiken:

      In opcheckout.js (/skin/frontend/base/default/js), place the following on line 817:

      var tableHeight = $('checkout-review-table').getHeight();
      $(
      'checkout-step-review').setStyle({height:(tableHeight+100)+'px'});
      $(
      'checkoutSteps').setStyle({height:(tableHeight+270)+'px'});
      $$(
      '.main')[0].setStyle({height:(tableHeight+415)+'px'}); 
      • Vitor

        (dec 30)
        Reply to this comment

        Hey guys, not sure what u talking about, but using the google translator i think its about the lots of products on the order review step, making the place order button dissappear from screen. I´ve got a quick fix for that, changing the overflow property in opc. Use overflow-x:hidden;overflow-y:auto; and a scroll will appear if needed. Not the most beautiful solution, but do the job!
        Hope it helps.

  • Wouter

    (jan 18)
    Reply to this comment

    Guys, nice, ziet er goed uit. Ik ben alleen mijn reviews kwijt na implementatie van de css code. Die stonden op iedere pagina aan de linkerkant. Bekend probleem?

    • Erwin Otten

      (jan 19)
      Reply to this comment

      Hi Wouter. Hmm, dat is gek. De OPC CSS bevat alleen maar .opc classes, dus er kan niet zoveel fout gaan. Heb je de reviews ook op de checkout pagina gezet? Wellicht zou je eens alle display:none ‘s kunnen weghalen, kijken wat er gebeurd. Laat maar weten of het gelukt is!

  • Vivek Gounder

    (jan 25)
    Reply to this comment

    This was some amazing stuff Erwin, we are learning magento as of now for a small project. We were wondering what is the best way to go around modification of the checkout process, as for the styles thank you for giving us a direction on to go about it, but we would like to remove some unwanted fields and stuff, it seems you are quite experience in using magento can you provide us some direction on what is the best way to go about modifying the checkout process.?

    • Erwin Otten

      (jan 27)
      Reply to this comment

      Hi Vivek, thanks for the kind words. Actually, we haven’t been in the situation that we needed to modify the checkout heavily, but there are tons of information about it on the forums. This article from Inchoo for example, will learn you how to add a tab to the checkout and this one and this one explain for example how to remove the mandatory telephone field.

  • fish

    (feb 13)
    Reply to this comment

    I can’t get this to work on magento 1.6. It changes nothing about the look of the checkout process.

    • Erwin Otten

      (feb 13)
      Reply to this comment

      Hi Fish. If it’s not working, you’re probably doing something wrong ;) Please check if you placed the CSS in the right file (just below the original styling of the checkout), flush your caches, disabled merging CSS and disable your CDN. Let me know if it works out!

  • Andy

    (feb 15)
    Reply to this comment

    Great work….cheers

  • karpov

    (feb 23)
    Reply to this comment

    hi how to download this css i cant get download link on my mail

  • christoph

    (mar 07)
    Reply to this comment

    Thanks for sharing, great work ! Is it possible to assign a dynamic height to .opc ? I dont want it to be 970px high, no matter how much content there is….

  • JCPenney

    (mar 08)
    Reply to this comment

    This is a nice and clean interface. Really like it.

  • Stefan

    (mar 08)
    Reply to this comment

    Hi, many thanks for this great free of charge css. In firefox and chrome it is working perfect. In IE 9 it’s messing up. We work with magento 1.6.2. Is it compatible? If so suggestions are much appriciated.

  • kev

    (mar 09)
    Reply to this comment

    there is a big problem with this css. you cant just set the height to 970px. if someone purchases 15 products there is not enough vertical space and he wont be able to click the purchase button in step 5 because the content will be cut…...

  • kev

    (mar 09)
    Reply to this comment

    ups, havent seen someone allready posted a solution to this

    • Erwin Otten

      (mar 09)
      Reply to this comment

      Hi Kev!

      The solution for your problem was already given in one of the comments :D.

      In opcheckout.js (/skin/frontend/base/default/js), place the following on line 817:

      var tableHeight = $('checkout-review-table').getHeight();
      $(
      'checkout-step-review').setStyle({height:(tableHeight+100)+'px'});
      $(
      'checkoutSteps').setStyle({height:(tableHeight+270)+'px'});
      $$(
      '.main')[0].setStyle({height:(tableHeight+415)+'px'}); 

      Good luck!
      Erwin

      • Fabian

        (feb 25)
        Reply to this comment

        But whats with all the other steps before? 970px height is too much for some steps, how to do this?

  • freshkid

    (mar 14)
    Reply to this comment

    Hi,
    I tried to do this code and the form does not change height. This happens when i select “Sign up and checkout together”  in the first step.
    here is my js file http://pastebin.com/AcwmsYnQ

  • zoyd

    (mar 20)
    Reply to this comment

    this looks lovely and there would no problem fiddling with the css but mine seems stuck at the first or second step. what could have gone wrong? is there other js files needed outside opcheckout in the base theme?

  • zoyd

    (mar 20)
    Reply to this comment

    well i think i might have solved the problem. it seems you MUST have 2columns-right template activated in the checkout.xml… at least that’s how it miraculously worked for me.

  • nikl

    (mar 22)
    Reply to this comment

    This is fantastic - thank you so much!
    I managed to get the correct dynamic height for the review step, but if I go back from there, this height will be used for all steps. I am therefore looking for a way to get the right dynamic height for each checkout step - is this possible? I thought I could add modified versions of the js code into each step section in opcheckout.js but this doesn’t seem to work for some reason…

  • nikl

    (mar 23)
    Reply to this comment

    Ok, so I was hoping I could use jQuery to get the dynamic height but it will always use the height defined by the billing step, from there it will not change.
    This code gnerally does work, but I need to fidn a way to update it for each step:
    [removed]
    jQuery(document).ready(function($){
      $(’#checkoutSteps’).css({height: $(’.step’).height()+84+“px”});
    });
    [removed]

  • Ilan

    (mar 28)
    Reply to this comment

    On first hand, I want to thank you Mister Otten for this wonderful css template.

    I found a solution to get the dynamic height. It is not working perfectly but it does what we want :

    Event.observe(window, “load”, function() { 
    Ajax.Responders.register({
      onComplete: function() {
      if (Ajax.activeRequestCount == 0) {
      $$(’.step’).each(function(el) {
        if (el.visible()) {
        var children_height = (Prototype.Browser.IE) ? 250 : 280;
        el.childElements().each(function(el) { children_height += parseInt(el.getDimensions().height); });
        $(‘checkoutSteps’).setStyle({‘height’: children_height + ‘px’});
       
        }
      });
      }
      }
    });
    });

  • nikl

    (mar 30)
    Reply to this comment

    Ilan, thank you for this - best solution sofar!
    Do you know, if it’s possible, to make this work when going back in checkout via the progress numbers?

    • Erik

      (jun 27)
      Reply to this comment

      change the first line to:
      Event.observe(window, “click”, function() {

  • Ashwin

    (apr 12)
    Reply to this comment

    Hai , I am devloping a cart site where user will choose a frame , glass and mat. I have got all the calculated values with product name till Add to cart page and this page “checkout/onepage/” but when i place order i get a product value that has been uploaded in admin. Could any one help me on this?

  • Ashwin

    (apr 12)
    Reply to this comment

    Hai , I am devloping a cart site where user will choose a frame , glass and mat. I have got all the calculated values with product name till Add to cart page and this page “checkout/onepage/” but when i place order i get a product value that has been uploaded in admin. Could any one help me on this?

  • Simon

    (apr 20)
    Reply to this comment

    Hey excellent work, serious css going on.
    Any idea how I would go about getting the main div to shrink in size to fit each content step of the cart?

  • Simon

    (apr 20)
    Reply to this comment

    Whoops

    • Erwin Otten

      (apr 20)
      Reply to this comment

      Guess you found out :D

      • Simon

        (apr 20)
        Reply to this comment

        Hi Erwin,
        I read over Ilans solutions, could you give me a pointer on to where to put his code in the opcheckout.js file?
        I tried adding it but it breaks the checkout for me.

        Any suggestions would be great.

  • nikl

    (mei 02)
    Reply to this comment

    Simon, add it within the script tag in onepage.phtml

  • snh

    (mei 04)
    Reply to this comment

    Ziet er super uit . Hebben wel wat probleempjes zie ik

    De mooie vakjes en uitlijning om de balletjes laten Chrome en Safari niet zien hier
    En de adresvelden vallen erg naar beneden (dat was eigenlijk best wel compact)
    En heb je nog ervaring met het verwijderen van het provincie veldje?

    Heb je nog eens een update erop gezet?

    http://imagebin.org/210951

  • Harshad

    (mei 21)
    Reply to this comment

    Thanks for the code it’s really very useful and works like magic…

  • Jamie Jackson

    (mei 21)
    Reply to this comment

    Nice alternative to the many one page checkouts on the market, trying this on a clients project at present.

  • NTS

    (mei 23)
    Reply to this comment

    Is there a way where you can hide the shipping information and shipping method (since it will be flat fee or free shipping, haven’t decided yet).  What I’d like to do is to make the shipping address always be the default billing address and remove the ability for customers to add a new address.  The only way they would be able to change their address is through My Account.

    This way, I only have the login screen, billing address screen, payment information screen, and order review screen.  How can I accomplish this?

  • Mihrican

    (aug 10)
    Reply to this comment

    It is exactly I have looked for,  really great work. Thank you Erwin.

  • adesh

    (aug 17)
    Reply to this comment

    Nice Work in css ................

  • nikl

    (sep 04)
    Reply to this comment

    Even with Ilan’s and Erik’s help, the height of the step div will still not reset every time, sometimes leading to input fields being cut off by the box height, only a manual refresh will fix this. Also the resetting of the height always takes a couple of seconds.

  • Paul

    (sep 07)
    Reply to this comment

    This doesn’t seem to work for us. We have version 1.12.0.2 Enterprise. We modified the file: /skin/frontend/enterprise/default/css/styles.css. Added the CSS after the /* One Page */ section and before the /* Block: Checkout Progress */ section. When we refreshed the checkout page, it’s a mess. What’s wrong?

  • Jonas

    (sep 13)
    Reply to this comment

    He,
    Iemand al een oplossing gevonden voor het “Tab” probleem?
    Al de rest werkt prima (Magent 1.7.x) hier, schitterende oplossing. Biedt veel voordelen voor het gebruik van bepaalde modules in de check-out omdat deze oplossing puur css gebaseerd is.
    Dit moet 1 van de betere check-out aanpassingen zijn die er bestaat denk ik !

  • ramesh

    (sep 14)
    Reply to this comment

    accordion in right side progress bar in checkout page is not working for me. now i can’t able to change shipping or billing addressess. please help me

  • GoWebBaby Magento Development

    (sep 18)
    Reply to this comment

    It is possible to adjust the height of the note to the tables scaling? Now you have one long page, even if a limited number of content in it. Thank you!

  • Ravi

    (sep 18)
    Reply to this comment

    Its great and user friendly

  • Martijn

    (sep 23)
    Reply to this comment

    I ran into problems with our one-step-checkout and some other modules. Giving this a try, loving it so far!

  • srinivas

    (sep 26)
    Reply to this comment

    thanx a ton!! you saved lot of time and you did it in nice way!!!

  • Mark Anthony

    (okt 24)
    Reply to this comment

    Would you be able to give me an idea how to easily/quickly (I know, with Magento those are not always good words to use) add a modal popup to one or more sections of the checkout? In other words, I’d like to place a link in one or more sections that brings up shipping and warranty info in a modal box. I may want to call the terms and conditions from Mage, or just write my own copy.

  • Mark Anthony

    (okt 25)
    Reply to this comment

    Also, I’d like to know how to trigger a modal window that requires a response on clicking certain buttons, like the “next” button between sections of the checkout, or the calculate button for shipping/tax.

  • Mat

    (okt 27)
    Reply to this comment

    Revised variable height of steps code to make OOP and to cope with variable height payment review step and to cope with possibility a user might click ‘step 1’ to start again once they’ve reached the Payment step.
    (Height of each step set in CSS should be set in ems to cope with users changing the page height by increasing font size.)

    In : openSection: function(section) { ,—>  in the if(section.id != this.currentSection) {
    call a new function (setSectionHeight) . Include the variable ‘section’ - add this on line 56.
    You will be adding this new function to the end of the Accordion.prototype

    if(section.id != this.currentSection{
                this
    .closeExistingSection();
                
    this.setSectionHeight(section); /* Modifications for absolute CSS step changes */
                
    ......

    Next add the new function at the endafter closeExistingSection: function()
        
    },
        
        
    setSectionHeight: function(section{  
            
    var chkS = $('checkoutSteps'),
            
    opc section.down('.step'),
            
    opcH opc.getStyle('height');
            
            
    chkS.setStyle({ heightopcH });
             
            if($(
    'checkout-review-table') != null{
       
    var tableHeight = $('checkout-review-table').getHeight();
       
    chkS.setStyle({height:(tableHeight+340)+'px'});
      
    }
      
      
    $$('.step-title').each(function(element){  
       
    var opc element.next('.step'),
       
    opcH opc.getStyle('height'),
       
    setStepHeight = function(){
        
    if($('checkout-review-table-wrapper') != null{
         
    $('checkout-review-table-wrapper').remove();
        
    };
        
    chkS.setStyle({height:(opcH+70)+'px'});
       
    };
       
    Event.observe(element'click'setStepHeight);   
      
    }); 
        
  • mark9991

    (nov 07)
    Reply to this comment

    hey! this is very cool!

    just one short question: do i have to delete the old css code after installing this one or can i leave it in the file?

    • Paul Hachmang

      (nov 07)
      Reply to this comment

      The CSS code is an override, so leave the old code there or else it wont work :)

  • Tinku Chandra De

    (nov 07)
    Reply to this comment

    About Height issue i see a solution which is given H&O. Solution is something like this..

    In opcheckout.js (/skin/frontend/base/default/js), place the following on line 817:
    <
    div class=“codeblock”> var tableHeight = $('checkout-review-table').getHeight();
    $(
    'checkout-step-review').setStyle({height:(tableHeight+100)+'px'});
    $(
    'checkoutSteps').setStyle({height:(tableHeight+270)+'px'});
    $$(
    '.main')[0].setStyle({height:(tableHeight+415)+'px'});  </div

    My question is 817Line varies Magento Version.. Currently im using 1.7.2. Im to much confused where to put these code in my opcheckout.js under base.In my 817 Line these lines r available..

    }
            checkout
    .setStepResponse(response);
            
    //checkout.setPayment();
        
    },
    .......
    Can u please explain briefly about this issue or else whats ur magento version
  • Marek

    (nov 28)
    Reply to this comment

    border-radius for step numbers not working in IE

  • ravi

    (dec 10)
    Reply to this comment

    i want to .opc height different for each step.Please help me if you know

  • Shravan Kanth

    (dec 28)
    Reply to this comment

    Hi Erwin Otten.!.
    Thanks for your CSS code.
    We implemented & modified your css code in opc and its working fine in Firefox, Chrome & IE9.
    But we have problem in IE8 (.opc .step tabs are overlapping), In this case we are seeing last step instead of first step (Collapse). Can we have solution for this please..
    Thanks in Advance..

  • Rahul

    (jan 08)
    Reply to this comment

    Awesome

  • Falk

    (mar 06)
    Reply to this comment

    The solutions by Erwin Otten or Andre Xori to fix the height problem of #checkout-review-table causes an error “... is null or not an object”
    So in
    /template/checkout/review/info.phtml
    I canged

    [removed]
    //<![CDATA[
        
    decorateTable('checkout-review-table');
        
    truncateOptions();
    //]]>
    [removed] 

    to

    [removed]
    //<![CDATA[
        
    decorateTable('checkout-review-table');
        
    truncateOptions();
     var 
    tableHeight = $('checkout-review-table').getHeight();
     $(
    'checkoutSteps').setStyle({height:(tableHeight+750)+'px'});
    //]]>
    [removed] 

    and it works ;)

  • Rutger

    (mar 07)
    Reply to this comment

    Wow, good job, with some very minor changes it fits my site perfectly!

  • Peter

    (mar 26)
    Reply to this comment

    Very cool, great work guys,

    Does this work with enterprise??

  • Surendra Vikram Singh

    (apr 06)
    Reply to this comment

    Its Great!! Thanks!!

  • PhongVu

    (mei 29)
    Reply to this comment

    ^^

  • Ilan

    (jun 08)
    Reply to this comment

    Hello,
    I contact you today because I have seen your code in a paid extension :
    http://www.magentocommerce.com/magento-connect/catalog/product/view/id/18376/

    Is it normal ?
    Ilan

  • Markz

    (jun 11)
    Reply to this comment

    Outstanding modification!  This is precisely what I was looking for. Keeping all the functionality of the standard magento checkout, no code mods just simple CSS styling!  Too cool! And, the ability to navigate backwards to previously filled out form parts is a HUGE plus! No more broken emptied cart because client used the browser back button to change a prior entry.  Very nice job. Thank you!
    Markz

    • Paul Hachmang

      (jun 19)
      Reply to this comment

      Watch your email inbox, we’ll be releasing a completely responsive theme with this checkout and a LOT of other awesome features.

  • snh

    (jun 11)
    Reply to this comment

    How is the last/this version workign? We had some isues with prior functions ... is this code being maintained?

    Also, how does this work on mobiles? (responsive yes/no)

    • Paul Hachmang

      (jun 19)
      Reply to this comment

      The checkout is running fine on the sites of a few clients of us. We know there are some issues with the checkout, most solutions can be found in the comments here somewhere.

      The checkout isn’t responsive at the moment. We are working on a template that has a completely responsive checkout, responsive everything in fact, completely build from the ground up. We’ll be sending out an email to everyone who downloaded this checkout before, so stay tuned.

  • Raj

    (jun 13)
    Reply to this comment

    First of thanks for providing a wonderful design. Currently I am facing a problem when I use date picker in the shipping method page. Half portion of the date picker is displayed behind the progress bar/checkout main layout. Kindly help me to resolve that.

    • Paul Hachmang

      (jun 19)
      Reply to this comment

      The problem is that some portion of the checkout is hidden inside a container div (overflow: hidden). With most datepickers it is possible to set an element where it should be attached, if you set this element to the body it should solve your problem.

  • marcio

    (jun 27)
    Reply to this comment

    hello,
    I’m from Brazil and this was very useful css.
    I had problems with height and was unable reolver with pure css, if anyone has something, please contribute.

    I took the role of our friend André Xori and made calls in the steps that I needed time for each step, looked like this:

    initialize: function (formsaveUrl{
             this
    .form form;
             
    this.saveUrl saveUrl;
             
    this.onSave this.nextStep.bindAsEventListener = (this);
             
    this.onComplete this.resetLoadWaiting.bindAsEventListener = (this);
    this.fixHeight ($ ('co-payment-form'). getHeight ());
         
    }
    fixHeight
    : function (h{
    $ ('checkoutSteps'). setStyle ({height: (h) + 'px'});

    file opcheckout.js

    thanks for CSS, it was killer. I just hope that customers enjoy the checkout, hugs Erwin Otten.

  • mfoda

    (jul 29)
    Reply to this comment

    Hey guys. Thanks for the fantastic css. Any rough estimates on when the responsive version will be available? I’m in the process of building my website at the moment and was thinking I can put off the checkout design until the responsive version is done, if that is happenning soon.

  • Vivel Pratap Singh

    (aug 30)
    Reply to this comment

    Great work !!!
    I really like this work which your team have done by only CSS.
    Grat H&O .

  • Vivel Pratap Singh

    (aug 30)
    Reply to this comment

    Can you please give a css demo for same for responsive website. I have used this checkout in many project. It working good but I need to make a project in responsive with this improved chekout. So if possible then please make reponsive css for this also.
    Thanks in advance !!!!!

  • tarsem

    (sep 24)
    Reply to this comment

    I need the css and design of checkout steps.

  • Peter

    (sep 28)
    Reply to this comment

    This not working anymore in CE 1.8-version. I’ve installed Magento 1.8 and tested the checkout-step but this nice CSS-solution doesn’t work anymore. It all seems right but in the last step (actually buy) it returns to this screen and no buy is done. Hopefully there’s a quick and nice solution

    • Henk Valk

      (mar 04)
      Reply to this comment

      After upgrading to Magento CE 1.8 I had same problem with checkout steps. After copying the folder
      /app/design/frontend/base/default/template/checkout/onepage/ to my custom theme and also the checkout.xml in layout folder the problem was solved!

  • Rudy

    (okt 25)
    Reply to this comment

    Hi Erwin Otten,

    I cannot download this file.
    Can you help me to approve my email ?

    Thanks, Rudy

  • Fabian

    (feb 25)
    Reply to this comment

    Has anyone tried this solution with CE 1.8.1 and resonsive? I dont get it with dynamic height of very step - I dont want to have fixed height.

Reageren

Contact

Bel mij terug

Vul uw telefoonnummer in en we bellen u zo spoedig mogelijk terug.

Contactgegevens

H&O
Veenderveld 20
2371 TV
Roelofarendsveen
info@h-o.nl
www.h-o.nl
071 744 0084
KvK Rijnland nr. 28119089
BTW nr. NL818554071B01

Nieuwe projecten

Wilt u weten wat H&O kan betekenen voor uw Magento project? Stuur ons een mailtje:

Paul Hachmang

p.hachmang@h-o.nl

Erwin Otten

e.otten@h-o.nl

Contactformulier