Move Payment Options to Top of Checkout

[smokingjacket]

Does anyone know how I can move the payment options Paypal / Stripe etc to the top of the checkout page rather than at the bottom where it sits at the moment?

Thanks!

[jade]

Hey Chiara,

An easy way to do this would be to use CSS Flex to move things around. Please add this code in X > Theme Options > CSS:

.woocommerce-checkout form.woocommerce-checkout {
    display: flex;
    flex-direction: column;
}

.woocommerce-checkout form h3 {
    order: 1;
    margin-top: 0;
}

.woocommerce-checkout #order_review {
    order: 2;
    margin-bottom: 30px;
}

.woocommerce-checkout #customer_details {
    order: 3;
}

Hope this helps.

[smokingjacket]

Dear @jade,

Thank you very much for your solution, it worked perfectly!

Do I need to be wary about browser compatibility with the order?

I am trying to achieve the same with the cart page, with limited success, I am trying to get the related products to be beneath the cart totals, here is my code - I would be grateful for your suggestions!

Thanks,

Smokingjacket

---

.woocommerce-cart form.woocommerce-cart {
display: flex;
flex-direction: column;
}

.woocommerce-cart-form form h3 {
order: 1;
margin-top: 0;
}

.woocommerce-cart .cross-sells {
order: 3;
}

.woocommerce-cart .cart_totals {
order: 2;
}

[friech]

Hi Chiara,

Sorry but that is not possible with just a CSS, the related products and form are sibling element, so you can only place the related products either above or below of the form (not inside the form).

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[smokingjacket]

Hi @friech,

Yes, exactly - I am trying to get the related products to be at the very bottom, i.e below the form as you mentioned, not inside the form. Do you know how I might be able to do this?

Thanks!

[friech]

Hi @smokingjacket,

Sorry, I was confused because the related products is already below the form.

Do you mean below the Proceed to checkout button? If so, please add this to Theme Options > CSS

.woocommerce-cart .cart-collaterals {
	 display: flex;
    flex-direction: column;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	order: -1;
}

Hope it helps,
Cheers!