Checkout reverse columns on mobile?
-
Hello team, hope you are well. So, by default the checkout page has the billing column to the left and the order summary, to the right. This means on mobile the billing area is first and the order summary – second. How can I make it vice versa, so the order summary appears first (like “reverse row”) but for mobile only? Thank you in advance!
Hello,
Import the Checkout page via Dashboard -> Layouts and then reverse them for mobiles here – https://prnt.sc/P3ZEwxf0zL5_
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/
Kind Regards
Hey there,
Unfortunately, there’s an issue and the left column is empty. Would you mind to check this for me? Thank you in advance!
-
This reply was modified 2 months ago by
vynil.
It seems that access is wrong – https://prnt.sc/B9iPTvvzvTLF
Please update it and let me know.
Kind Regards
Sorry, below are the new credentials.
Hello,
Add the code below in Theme Settings -> Custom CSS -> Mobile CSS area:
.woocommerce-checkout .customer-details {
order: 2 !important;
}
.woocommerce-checkout .checkout-order-review {
order: 1 !important;
}
Kind Regards
Thank you, but using this code the purchase button is not the last item . The purchase button is above the first name and last name fields which is not good.
Is it possible to assist with the layouts as you suggested in the first place?
Hello,
Try to use the code below:
.woocommerce-checkout .customer-details {
order: 4 !important;
}
.woocommerce-checkout .checkout-order-review {
order: 1 !important;
}
#wc-stripe-express-checkout-button-separator {
order: 2 !important;
}
form.woocommerce-checkout>* {
order: 3 !important;
}
Kind Regards
Unfortunately, it’s still the same – the purchase button stays in the middle.
Here is purcahse button in the end:
.woocommerce-checkout .customer-details {
order: 2 !important;
}
.woocommerce-checkout .checkout-order-review {
order: 1 !important;
}
#wc-stripe-express-checkout-button-separator {
order: 3 !important;
}
form.woocommerce-checkout>* {
order: 4 !important;
}
Screenshot – https://prnt.sc/WF0mWVvxROxa
Kind Regards
I’m not talking about the Google Pay/ Apple pay button. Please check my video. The WooCommerce purchase button is in the middle.
This button https://prnt.sc/EsdDugpoyNXq is a part of the “Order review” element and it’s not possible to set that button in another place, it can be situated only on the “Order review” element – https://prnt.sc/TqCFFLBrp3XH
Kind Regards
Okay, can I still achieve what I want? Can you please try via the layouts?
Hello,
In some way, it’s possible via Layouts, but it will work globally, I mean that the button will have another place on the Desktop as well, e.g. – https://prnt.sc/qdkxLB-Vpoer -> https://prnt.sc/MJnRmXsPAMzT and also the button will come with the payment methods as it’s a part of 1 element in Layouts.
Kind Regards
Can you please apply the changes to the website I sent you credentials for? Thank you.
Hello,
1) Import the Checkout form and top content – https://prnt.sc/LwCp4M4DbV65 -> https://prnt.sc/f1gbg0IGLXyt
2) For mobile device, activate the “Reverse” – https://prnt.sc/55woSxCq6p26
3) Move the payment methods element at the bottom of the reversed container – https://prnt.sc/OCHn15miUAOm
Kind Regards
.
