How to change the layout of checkout page and to display it in two columns?

  • How to display it in two columns? This means the form on the left side and the summary and payment options on the right side.

    Like this.

    https://ibb.co/9HqvrNB

    Please help me with CSS code.

    Thanks in advance

    • This topic was modified 4 years, 9 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Moved to Fixing WordPress, this is not an Developing with WordPress topic.

    Please ask plugin specific questions in that plugin’s dedicated sub-forum instead.

    https://www.ads-software.com/support/plugin/woocommerce/#new-post

    Hello,

    Follow this step to create two columns layout of the checkout page,
    Step-1:
    => Create a woocommerce named folder into your active theme. Open woocommerce folder and create a checkout named folder.

    Step-2:
    => Open the checkout folder and copy the form-checkout.php file from your plugins directory(/plugins/woocommerce/templates/checkout/form-checkout.php) and paste the file into your theme(/themes/yourtheme/woocommerce/checkout).

    Step-3:
    => Now, Open your form-checkout.php file which is placed into your themes folder.

    Step-4:
    => Remove this code from line no.: 52 – 62

    <?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
	
<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' ); ?>

    Step-5:
    => You can see this code into your file(line no.:38 – 46),

    <div class="col2-set" id="customer_details">
	<div class="col-1">
		<?php do_action( 'woocommerce_checkout_billing' ); ?>
	</div>

	<div class="col-2">
		<?php do_action( 'woocommerce_checkout_shipping' ); ?>
	</div>
</div>

    Step-6:
    => Replace above code with this code,

    <div class="col2-set" id="customer_details">
	<div class="col-1">
		<?php do_action( 'woocommerce_checkout_billing' ); ?>
		<?php do_action( 'woocommerce_checkout_shipping' ); ?>
	</div>

	<div class="col-2">
		<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>

		<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' ); ?>
	</div>
</div>

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change the layout of checkout page and to display it in two columns?’ is closed to new replies.

Tags