From a3d83d4aeccfb0fd794701d8c7732d20bd4faff9 Mon Sep 17 00:00:00 2001
From: Jeff Stieler <jeff.m.stieler@gmail.com>
Date: Tue, 11 Jan 2022 18:08:06 -0700
Subject: [PATCH] Fix checkout column layout.

---
 .../class-wc-twenty-twenty-two.php              | 17 +++++++++++++++++
 .../legacy/css/twenty-twenty-two.scss           | 16 ++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/plugins/woocommerce/includes/theme-support/class-wc-twenty-twenty-two.php b/plugins/woocommerce/includes/theme-support/class-wc-twenty-twenty-two.php
index 813a9a86435..1a4b2c9824a 100644
--- a/plugins/woocommerce/includes/theme-support/class-wc-twenty-twenty-two.php
+++ b/plugins/woocommerce/includes/theme-support/class-wc-twenty-twenty-two.php
@@ -30,6 +30,10 @@ class WC_Twenty_Twenty_Two {
 		// Enqueue theme compatibility styles.
 		add_filter( 'woocommerce_enqueue_styles', array( __CLASS__, 'enqueue_styles' ) );
 
+		// Wrap checkout form elements for styling.
+		add_action( 'woocommerce_checkout_before_order_review_heading', array( __CLASS__, 'before_order_review' ) );
+		add_action( 'woocommerce_checkout_after_order_review', array( __CLASS__, 'after_order_review' ) );
+
 		// Register theme features.
 		add_theme_support( 'wc-product-gallery-zoom' );
 		add_theme_support( 'wc-product-gallery-lightbox' );
@@ -63,6 +67,19 @@ class WC_Twenty_Twenty_Two {
 		return apply_filters( 'woocommerce_twenty_twenty_two_styles', $styles );
 	}
 
+	/**
+	 * Wrap checkout order review with a `col2-set` div.
+	 */
+	public static function before_order_review() {
+		echo '<div class="col2-set">';
+	}
+
+	/**
+	 * Close the div wrapper.
+	 */
+	public static function after_order_review() {
+		echo '</div>';
+	}
 }
 
 WC_Twenty_Twenty_Two::init();
diff --git a/plugins/woocommerce/legacy/css/twenty-twenty-two.scss b/plugins/woocommerce/legacy/css/twenty-twenty-two.scss
index 25d3151541a..4290b9348b3 100644
--- a/plugins/woocommerce/legacy/css/twenty-twenty-two.scss
+++ b/plugins/woocommerce/legacy/css/twenty-twenty-two.scss
@@ -784,6 +784,22 @@ $tt2-gray: #f7f7f7;
 			font-weight: normal;
 		}
 	}
+
+	.woocommerce-checkout {
+		.col2-set {
+			width: 48%;
+			float: right;
+		}
+
+		#customer_details {
+			float: left;
+
+			.col-1, .col-2 {
+				width: 100%;
+				float: none;
+			}
+		}
+	}
 }
 
 .select2-container {