How add page in Woo, with form between cart and checkout?

What are you looking to do exactly? You can add more form fields to the checkout page if you’d like too, or extra form fields on the product pages.

I know. But what Im trying achieve is more intuitive checkout process.
Woo is superb, but checkout is so easy, that is confusing!

I have 3 problems:

1) Order notes:
It should be full width (full page width) column separated from Billing and Shipping (it is not possible if you want Billing and Shipping columns width 50% 50%).
It should be separated because it is standard and I think it is good idea dont confuse customers on checkout. Order notes doesnt have direct connection to Billing or Shipping fields, so I dont understand why it should be there.

2) Shipping:
Thats OK, but possibility disable “choose delivery” on checkout page (if delivery was already chosen on cart page) could be more clear.

3) And finally main problem, delivery date and hour:

Where put it?

a) Product page. I have Products addons, so my first idea was put it there. But than I thought why? If customer would buy more products should He / She to be forced to fill delivery again and again? No, if customer will need different delivery it is much clear to do new order.

b) Checkout page: It is OK, but there is the same problem as with Order notes… it could be separated from Billing and Shipping columns.
Next very important thing is, that checkout page is now already too long enough to scare customer enough that they to leave checkout process, so should I put there more and more things?

c) Multi step checkout plugins: They include too much steps and I dont want third party plugins. It is very curious that Woo still doesnt have own plugin for such important thing.

So I thought about it and found out two solution:

– To add one page between Cart and Checkout page, where should be Date and Time picker with Order notes.

…or maybe easier solution:

– To add Date picker on Cart page, under shipping, where Date picker could make sense.

But I dont know how… can anybody help?
Thanks you

Would be better to just add those sections underneath their own header. So it goes Billing > Shipping > Additional Information. This is actually how it works by default by the way: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-shipping.php#L54

You just need to do some template/styling changes to it is full width underneath billing and shipping info (since you have the page at 50/50).

To be honest though, how does it not make sense to have order notes and delivery times underneath shipping information? Those are both relevant to shipping. I think you’re over thinking this.

You are right, but not at all.

If you have page width for example 1024px… so input fields should be 1024px wide? It doesnt look good. I saw Woo checkout that has Order details and payment on the right, but it doesnt make big sense to me, because it is shorter than billing and shipping.

To have delivery date/time by shipping info makes a sense. But imagine situation, when delivery date and time is the most important thing, for example if you are buing flower bouquets, would you expected delivery date and time as last item? I think not, it would be first question, you would ask and you would looking for, not last one.

One more think that doesnt make sense is if you have “shipping to different address” colapsed, so than under title “ship to different address?” is order notes field or my delivery date and time, does it make a sense? :-)))

You don’t have to have it at 100% width exactly, you can add margin to both sides so it is centered.

I see what you mean about flower delivery. In that case, it almost makes sense to have the option on the product page.

Up to you on how you want to do this. Add a new form between the cart and checkout page will be a lot of work though, compared to using the already existing checkout form and customizing things there.

HM, seems that this is the weakest part of Woo, with no ideal solution.

What about to add date picker on cart page to woocommerce_cart_totals_after_shipping? Ive tried manipulate cart template, but form is not included on checkout or in order details.

or what about manipulate “calculate shipping” template (I dont need it)?

The tricky part is saving data from the cart page. The checkout form submission is where the order object is saved from – not the cart form.

You could perhaps collect the data in the calculate shipping area and pass it onto the checkout form with some hidden fields.

I do believe you are over complicating a rather easy thing though.

Ok, I give it up.

I found out an accetable solution. I keept Billing and Shipping 50% / 50% and I manipulated Shipping template… now I have “additional fields” above “Shipp to different address?”, so it is visible on first look and I made whole Shipping part looks like “time line” by css. It made it looks like whole part of shipping, that makes a better sense to me.

I have only two small problems:
1) Everything is working, but I have to move big part of shipping template, so Im not sure if I did it right. Can you try it by yourself and tell me what exactly should be moved?

2) Im using Checkout field manager now, but Im using Bootstrap. I have tutorials how manipulate checkout fields so I would like to done it without plugin, but I dont know how how implement Bootstrap datepicker, because, I didnt find tutorial for this. Do you know, how to done it?

Thanks you

1) You can move the whole shipping form by moving this hook in the template: https://github.com/woothemes/woocommerce/blob/14eeee15ee40ae58afbc617a001323cc9ac16636/templates/checkout/form-checkout.php#L47

2) No, I don’t know how that would be done. You should just use the checkout field editor date picker if you aren’t sure how to do this with custom code.