Separate ‘place order’ button from choose-payment-form

Hello @mastababa,

Ideally, I would like to split up the element #payment, where the user selects the form of payment and places the order. Between selecting the form of payment, and actually pressing the button

I understand you correctly, you’d like the checkout process to be split into 2 pages, the first one is a form where they enter their address and the last one is where the customer can choose the payment method and place the order.

You can check the following extension made by one of our partners: https://woocommerce.com/products/flux-checkout-for-woocommerce/

All extensions sold in our store have a 30-day refund policy. If the product doesn’t work the way you need it or you think another product would work better, we are more than happy to provide a full refund.

Hope this helps!

Thanks for the tip.

But, no, I don’t want to split up the process into two pages.

What I want is to insert the checkout form within the HTML element that is #pages, which contains both the selection of the payment type and the checkout button.
Specifically, I want the order of the full page to be:

1. Select payment type.
2. Insert user details.
3. Press ‘pay now’ (or, in my case ‘Support’).

Why I’m asking whether there are consequences I need to be aware of is that the checkout form triggers notifications based on user behaviour and what they enter into the form.
Similarly, the area with the payment details also responds to (invalid) user input.

I suspect that having the payment button directly following the section on the payment type was done for a reason, and that separating them, specifically inserting another complex element between them, could cause some issues.
My question is whether my suspicion on this is correct.

Hello,

One alternative solution is using a checkout editor extension, for example:

— Checkout Field Editor, https://woocommerce.com/products/woocommerce-checkout-field-editor/

You can get it to check if that fits your needs, it includes a 30-day refund policy in case it does not fit your needs. It might help you to re-arrange the fields.

Let us know if there are any questions.

Thanks. I’m aware of that plugin. But I don’t believe it allows me to split the payment form in two.

My question is really on a template level.

Hi,

I suspect that having the payment button directly following the section on the payment type was done for a reason, and that separating them, specifically inserting another complex element between them, could cause some issues.
My question is whether my suspicion on this is correct.

It is difficult to confirm that. Please note, there are many options available at the www.ads-software.com repository, that might help you out as well, one more example is this plugin below:

– Multi-Step Checkout for WooCommerce, https://www.ads-software.com/plugins/wp-multi-step-checkout/

I hope this points you in the right direction.

Thanks Igor. That looks like a nice plugin, but I don’t think it will do what I am looking to do.

Thanks for the help. I think I’ll have to try to make it work and see where/if the process breaks down.

Hi @mastababa

Firstly, I apologize for the delayed response.

These forums are meant for general support with the core functionality of WooCommerce itself. What you want to achieve is a bit complex and would require customization to do it. Since custom coding is outside our scope of support, I am leaving this thread open for a bit to see if anyone can chime in to help you out.

For questions related to development and custom coding, your best bet is to ask on any of these channels for support. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, too.

– WooCommerce Developer Resources Portal
– WooCommerce Advanced Facebook group
– WooCommerce Community Forum
– WooCommerce Developer Slack Channel.
– Hire a WooCommerce Expert

Hope this helps!

Thanks!