Improved Magento one page checkout design (CSS only!)

Very nice! thank you very much…great!

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…

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

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?

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!

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

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

@ 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…

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.

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

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

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>

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

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

Cool.

Thanks guys, awesome comments!

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..

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

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

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

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..

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

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.

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

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

Thank you it saved my day.

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.

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?

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.?

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

Great work….cheers

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….

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.

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…...

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?

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…

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’});
   
    }
  });
  }
  }
});
});

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?

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, add it within the script tag in onepage.phtml

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

Academic future is not possible without good College Essay writing abilities. We must improve our skills within the our life. Then, we will be able to see final results of our work.