Moving Payment section at WooCommerce Checkout results in glitches

Hello,

I’m trying to redesign a WooCommerce checkout page like this: on the left, customer details; on the right – order review; at the bottom (full-width) – payment options.

After some searching, I’ve figured out that this can be accomplisehd with the following two lines:

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
add_action( 'woocommerce_checkout_after_customer_details', 'woocommerce_checkout_payment', 20 );

The #payment div appears where it should, but there are two glitches:

1. the whole checkout form is now with grey background (https://imgur.com/5GwqWX9)
2. opening the coupon section moves some of the payment elements up (https://imgur.com/8SplDEO)

And here is how it all looks (https://imgur.com/hWKdH1f) with the payment section attached to order review.

Could anyone please help me figure out what’s wrong?

Thank you!

• This topic was modified 7 years, 2 months ago by zkvvoob.