Custom One Page Checkout

[nickon]

Hi all, 

One thing I always hated about ps/tb is the opc page. I am currently using transformer theme but to change to look like the attached image this took about an hour or so, two classes and some css.  I think it's more functional like this. So if I can do it why didn't @lesley and co apply something similar on tb. Is this by choise?

One thing I would like to make it complete is to have a cart summary before the opc page but I don't know if this can be done. I am going to do some testing on my local machine and upload it to the live site. 

Any comments are welcome 🙂

 

[nickon]

@wakabayashi For the checkout I don't think there is much to be done. Just cosmetic things otherwise I thnk it will be a mess

[DRMasterChief]

Yes, as written before -  it's the most crucial part.  And maybe yes... maybe it can be changed very easily to a smooth modern checkout.

Merchants understand this point and it will become much more important in the next months.  Merchants will search for such big points and choose their onlineshop system also with such things, as this is the point we earn money or not...

I think it has also the same priority as the bug fixes and tb team should have this on the roadmap definitely ! 

 

[Mike1]

Hi guys,

I own and operate an established online store in Australia. I stumbled on TB by accident and one of the things that really attracted me to this platform was its stability, however, the checkout is a bit of a letdown. And considering it's where business gets done, I'm of the opinion that a one-page checkout must have, as a minimum, three important features:

1) Ease of use

2) Stability

3) Speed

But a checkout that looks great too is probably the 4th feature that is usually lacking in most shopping carts and TB is no exception.

I know this from 14 years experience as an online merchant/retailer in Australia. The cart that we currently use, which is on another platform that I won't name, has been a letdown for a number of years, and especially so in the last 18 months. It has a confusing layout, it's slow to load and use (keeps pausing/locking the page whenever there is a delay in a user's keystrokes), and it even has a few intermittent bugs that prevented some customers from submitting their order. And these are just some of the reasons that we are now migrating to TB.

Anyway, the point I'm making is this. A good looking and bug-free checkout that is quick to process payments is really all you need. And TB is already 2/3's of the way there so in my opinion the only thing left to really do is for someone to give it a facelift.

The logic looks fine. The speed of it is fine. And we all would agree that it's also fairly stable so lets see/discuss how it could be made to look better as well.

Nickon, I think you've done a fantastic job with your Transformer checkout. It's actually the sort of checkout I would love to have for my store. Correct me if I wrong, but the fact that the cart (second column) follows you down the page is in my option a very underrated feature that should be offered on every OPC.

On 1/20/2019 at 8:17 AM, nickon said:

One thing I would like to make it complete is to have a cart summary before the opc page but I don't know if this can be done

1

From what I can tell, the stepped checkout already has this so I can't see why it couldn't be adapted.

[nickon]

@Mike1 Thanks for your kind words. The cart column does not follow you down.  I personally do not like it and haven't looked into it. I suppose that could be done with a "sticky" code though. @lesley & co who are more skilled than me could maybe help. As for my layout if @lesleyt or he community likes it I could adapt it to the tb layout and share it if you want. Other that the look of it though there is not else to be done. Since any other change would mean possibly breaking compatability wih other modules.

[Smile]

I like the design! Can we get the code somewhere 😉

What I like a lot is the login/new customer buttons like here: http://transformer2.sunnytoo.com/thirteenth/module/steasycheckout/default 

Saves space and a lot more clear!

 

I hope this can be added to the core as well as your changes....

 

Edited January 30, 2019 by Smile

[danwarrior]

3 hours ago, Smile said:

I like the design! Can we get the code somewhere 😉

What I like a lot is the login/new customer buttons like here: http://transformer2.sunnytoo.com/thirteenth/module/steasycheckout/default 

Saves space and a lot more clear!

 

I hope this can be added to the core as well as your changes....

 

I am the original owner of the first Easy Checkout version (still working on Presta 1.6 and I've tried these days with sucess in a TB store). I was in fact thinking on upgrading it and improve it for TB, let me a few days and I'll get back with some news 😉

[Smile]

Will you keep it as a module or donate it to the community? I will be waiting with excitement! Keep me/us posted!

[danwarrior]

1 minute ago, Smile said:

Will you keep it as a module or donate it to the community? I will be waiting with excitement! Keep me/us posted!

I'm working to keep it as a premium module, but let me think about it. Is not easy to pay bills if I give away a big part of my work  

I though on 2 versions: one free and another premium, how do you feel with that?

I'm open to new suggestions.

[Smile]

I do totally understand! Sounds good both, I was just hoping that TB can be better out of the box. Every module is an issue/risk with upgrades ect. In my case I work with the MyParcel module where the shipping has a lot of options, where to deliver ect. So a vertical structure would be best:

1

2

3

Anyway, happy to test here!

[Smile]

Looks also nice but not sure if its finished or not 😉

[nickon]

11 hours ago, Smile said:

I like the design! Can we get the code somewhere 😉

What I like a lot is the login/new customer buttons like here: http://transformer2.sunnytoo.com/thirteenth/module/steasycheckout/default 

Saves space and a lot more clear!

 

I hope this can be added to the core as well as your changes....

  

If you give me some time I will try to modify the tb checkout page and post the modified files.

As for the login/new customer buttons I don't think it look right on the current layout. But feel free to give it a shot 🙂

[nickon]

8 hours ago, danwarrior said:

I'm working to keep it as a premium module, but let me think about it. Is not easy to pay bills if I give away a big part of my work  

I though on 2 versions: one free and another premium, how do you feel with that?

I'm open to new suggestions. 

I understand that. I personally don't agree with all beeing free. You have to make a living and pay bills. If the price is low enough I don't see why a mechant should not buy it.

[Smile]

10 minutes ago, nickon said:

As for the login/new customer buttons I don't think it look right on the current layout. But feel free to give it a shot 🙂

I like the idea of buttons that work like here: http://transformer2.sunnytoo.com/thirteenth/module/steasycheckout/default

[nickon]

1 minute ago, Smile said:

I like the idea of buttons that work like here: http://transformer2.sunnytoo.com/thirteenth/module/steasycheckout/default

I don't think it makes much diffenence. But this is just me. I also don't like the 3 column layout. Keep in mind that this is a ps 1.7 module and 1.7 has a different opc page. In tb/ps 1.6 there a few "must"

You must save userdata

You must accept terms (or you should)

You must go to a diffenent page to complete payment.

My solution is mostly comsmetic

So with that in mind maybe @danwarrior or @datakick will come up with a better solution.

 

[Smile]

8 hours ago, Smile said:

I do totally understand! Sounds good both, I was just hoping that TB can be better out of the box. Every module is an issue/risk with upgrades ect. In my case I work with the MyParcel module where the shipping has a lot of options, where to deliver ect. So a vertical structure would be best:

1

2

3

Anyway, happy to test here!

Yes so vertical is best. 

Best of the buttons is it saves text and is a clear and clean way of presenting.

[danwarrior]

1 hour ago, nickon said:

I don't think it makes much diffenence. But this is just me. I also don't like the 3 column layout. Keep in mind that this is a ps 1.7 module and 1.7 has a different opc page. In tb/ps 1.6 there a few "must"

You must save userdata

You must accept terms (or you should)

You must go to a diffenent page to complete payment.

My solution is mostly comsmetic

So with that in mind maybe @danwarrior or @datakick will come up with a better solution.

 

Just today I'm making a webinar (in spanish, and advising people to work with TB, hehe: https://escuela.elplandedan.com/atrapa-al-ladron/), so please give me some hours, I'm working so hard these days, that's why I'm not so active here xD

My partner @Rafael Calero is helping me with the Easy Checkout module, he will post here later too.

Here you are, a screenshot of Easy Checkout working on TB. This web is still under construction, so I can't show you the front). We're working on more options of configuration and a few social login buttons. 

We'll talk today, if we finally decide to donate it it will be the free version and improve another premium, but free is 100% usefull and nice 😉

I didn't told you that my specialization is just Conversion Rate Optimization 🙂

[nickon]

6 minutes ago, danwarrior said:

Just today I'm making a webinar (in spanish, and advising people to work with TB, hehe: https://escuela.elplandedan.com/atrapa-al-ladron/), so please give me some hours, I'm working so hard these days, that's why I'm not so active here xD

My partner @Rafael Calero is helping me with the Easy Checkout module, he will post here later too.

Here you are, a screenshot of Easy Checkout working on TB. This web is still under construction, so I can't show you the front). We're working on more options of configuration and a few social login buttons. 

We'll talk today, if we finally decide to donate it it will be the free version and improve another premium, but free is 100% usefull and nice 😉

I didn't told you that my specialization is just Conversion Rate Optimization 🙂

Take your time. I don't have  a need for it atm. if a free version is available and functions OK maybe I will use it too on ps 1.6 :-). But please have an option for two column

[danwarrior]

2 minutes ago, nickon said:

Take your time. I don't have  a need for it atm. if a free version is available and functions OK maybe I will use it too on ps 1.6 :-). But please have an option for two column

Yes, 2 columns is available too 🙂

[nickon]

17 minutes ago, danwarrior said:

Yes, 2 columns is available too 🙂

Nice! Since we are talking about features. It would be nice if the "save address" button could be skipped and the shipping cost calculated with ajax. Also would be nice if it was not needed to go to payment module to confirm the order..

Just my 2c

[Smile]

I agree the save button is to much!

[nickon]

Hi,

One minor issue I am facing with my tranformer theme in regards to my modifications is that when I hit the save account button and there is an error in the form, the page does not move enough up to show the error message. Can anyone help. What I basicly need to do it to if an error apears in the opc page instead of moving to the error positon I need to move to the top of the page

[DRMasterChief]

Hi,  no hurry here,  but maybe any updates from  @danwarrior about their OPC ?