fix: style billing form to be more compact (#868)

Automattic · Apr 9, 2020 · c99a3fd · c99a3fd
1 parent 6c6d9bf
commit c99a3fd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/newspack-theme/inc/woocommerce.php b/newspack-theme/inc/woocommerce.php
@@ -154,3 +154,16 @@ function newspack_woocommerce_wrapper_after() {
 	}
 }
 add_action( 'woocommerce_after_main_content', 'newspack_woocommerce_wrapper_after' );
+
+/**
+ * Replace .form-row-wide classes with classes to style fields narrower.
+ */
+function newspack_checkout_fields_styling( $fields ) {
+	$fields['billing']['billing_city']['class'][0]     = 'form-row-first';
+	$fields['billing']['billing_postcode']['class'][0] = 'form-row-first';
+	$fields['billing']['billing_state']['class'][0]    = 'form-row-last';
+	$fields['billing']['billing_phone']['class'][0]    = 'form-row-last';
+	return $fields;
+}
+add_filter( 'woocommerce_checkout_fields', 'newspack_checkout_fields_styling', 9999 );
+
diff --git a/newspack-theme/sass/plugins/woocommerce.scss b/newspack-theme/sass/plugins/woocommerce.scss
@@ -77,6 +77,10 @@ a.button {
 		.optional {
 			visibility: visible;
 		}
+
+		&.form-row-first {
+			clear: left;
+		}
 	}
 }