Move shipping section to the right side of woocommerce checkout page [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last month.
Improve this question
I've been struggling to change the layout of my woocommerce checkout page. I'd like to move the Shipping details to the right, so it's side-by-side with the billing. I was able to move the order details section to the right side via CSS but I also want the shipping to move there, just above the order summary and I can't seem to do it in CSS.

Answer 1

You have to override the WooCommerce checkout form.
How to override:
Copy the checkout form from the path plugins/woocommerce/templates/checkout/form-checkout.php and paste in your activated theme (for e.g. here I'm pasting it inside my customized child theme of WordPress official theme twentytwenty) in the following path themes/twentytwenty-child/woocommerce/checkout/form-checkout.php
Override the content like this:
<?php
/**
* Checkout Form
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce/Templates
* #version 3.5.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
do_action( 'woocommerce_before_checkout_form', $checkout );
// If checkout registration is disabled and not logged in, the user cannot checkout.
if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
echo esc_html( apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) ) );
return;
}
?>
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<?php if ( $checkout->get_checkout_fields() ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<div class="col2-set" id="customer_details">
<div class="col-1">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
</div>
</div>
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
<div class="col2-set">
<div class="col-1">
<h3 id="cus-shipping-heading">Shipping Details</h3>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
<h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</form>
<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
Explaination of the changes:
Removed the shipping section from the div#customer_details
Add that section next to the action hook <?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
Here is the snippet of the section we added:
<div class="col2-set">
<div class="col-1">
<h3 id="cus-shipping-heading">Shipping Details</h3>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
After the change the checkout page will look like this: