Hello,
the squishing of the form fields to 1/4 of the page might be coming from the theme. Normally they are stacked one on top of the other, but fill the whole width.
Could you give me a link to your website so I can have a look?
Hi Diana, I worked out the issue with the form fields, they are now filling the space. I combined the first 2 steps and the last 2 steps to only have 2 steps in total. But I am wondering if it’s possible to show the two items side by side? For example, the order details beside the payment info. Right now they are stacked one on top of the other. I saw another person asked about this (https://ww.wp.xz.cn/support/topic/order-and-payment-to-appear-as-2-columns-side-by-side/) and you mentioned you would fix it for them but that was the end of the post. If this is possible please let me know. I am familiar with adding code to functions.php and other files if that helps, I would just need to know exactly what to add/edit. Thank you.
You can try adding the following code to the child theme’s functions.php file:
function woocommerce_checkout_before_order_review_custom() {
echo '<div class="wc-order-preview" style="width: 50%; float: left; padding-right: 10px;">';
}
add_action('woocommerce_checkout_before_order_review', 'woocommerce_checkout_before_order_review_custom');
function wpmc_woocommerce_order_review_custom() {
echo '</div><div class="wc-payment" style="width: 50%; float: left; padding-left: 10px;">';
}
add_action('wpmc-woocommerce_order_review', 'wpmc_woocommerce_order_review_custom', 20);
function woocommerce_checkout_after_order_review_custom() {
echo '</div>';
}
add_action('woocommerce_checkout_after_order_review', 'woocommerce_checkout_after_order_review_custom');
The Order and the Payment will be next to each other with a gap of 20px between them. Here’s how it looks on my test website.
