diff --git a/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js b/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js
index 568ba168bcd..70868e0d432 100644
--- a/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js
+++ b/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js
@@ -20,7 +20,6 @@ import ProductMetadata from '../product-metadata';
 const OrderSummaryItem = ( { cartItem } ) => {
 	const {
 		images,
-		catalog_visibility: catalogVisibility = '',
 		low_stock_remaining: lowStockRemaining = null,
 		show_backorder_badge: showBackorderBadge = false,
 		name,
@@ -34,15 +33,23 @@ const OrderSummaryItem = ( { cartItem } ) => {
 	} = cartItem;
 
 	const currency = getCurrency( prices );
-	const linePrice = Dinero( {
-		amount: parseInt( prices.raw_prices.price, 10 ),
+	const regularPriceSingle = Dinero( {
+		amount: parseInt( prices.raw_prices.regular_price, 10 ),
 		precision: parseInt( prices.raw_prices.precision, 10 ),
 	} )
+		.convertPrecision( currency.minorUnit )
+		.getAmount();
+	const unconvertedLinePrice = Dinero( {
+		amount: parseInt( prices.raw_prices.price, 10 ),
+		precision: parseInt( prices.raw_prices.precision, 10 ),
+	} );
+	const linePriceSingle = unconvertedLinePrice
+		.convertPrecision( currency.minorUnit )
+		.getAmount();
+	const linePrice = unconvertedLinePrice
 		.multiply( quantity )
 		.convertPrecision( currency.minorUnit )
 		.getAmount();
-	const isProductHiddenFromCatalog =
-		catalogVisibility === 'hidden' || catalogVisibility === 'search';
 
 	return (
 		<div className="wc-block-components-order-summary-item">
@@ -60,18 +67,19 @@ const OrderSummaryItem = ( { cartItem } ) => {
 				<ProductImage image={ images.length ? images[ 0 ] : {} } />
 			</div>
 			<div className="wc-block-components-order-summary-item__description">
-				<div className="wc-block-components-order-summary-item__header">
-					<ProductName
-						disabled={ isProductHiddenFromCatalog }
-						name={ name }
-						permalink={ permalink }
-					/>
-					<ProductPrice
-						currency={ currency }
-						price={ linePrice }
-						priceClassName="wc-block-components-order-summary-item__total-price"
-					/>
-				</div>
+				<ProductName
+					disabled={ true }
+					name={ name }
+					permalink={ permalink }
+				/>
+				<ProductPrice
+					currency={ currency }
+					price={ linePriceSingle }
+					regularPrice={ regularPriceSingle }
+					className="wc-block-components-order-summary-item__individual-prices"
+					priceClassName="wc-block-components-order-summary-item__individual-price"
+					regularPriceClassName="wc-block-components-order-summary-item__regular-individual-price"
+				/>
 				{ showBackorderBadge ? (
 					<ProductBackorderBadge />
 				) : (
@@ -88,6 +96,9 @@ const OrderSummaryItem = ( { cartItem } ) => {
 					variation={ variation }
 				/>
 			</div>
+			<div className="wc-block-components-order-summary-item__total-price">
+				<ProductPrice currency={ currency } price={ linePrice } />
+			</div>
 		</div>
 	);
 };
diff --git a/assets/js/base/components/cart-checkout/order-summary/style.scss b/assets/js/base/components/cart-checkout/order-summary/style.scss
index 9e2fbf46fad..51cc6296197 100644
--- a/assets/js/base/components/cart-checkout/order-summary/style.scss
+++ b/assets/js/base/components/cart-checkout/order-summary/style.scss
@@ -12,8 +12,10 @@
 
 .wc-block-components-order-summary-item {
 	@include with-translucent-border(0 0 1px);
-	display: table-row;
+	@include font-size(small);
+	display: flex;
 	padding-bottom: 1px;
+	padding-top: $gap;
 	width: 100%;
 
 	&:last-child {
@@ -25,6 +27,10 @@
 			display: none;
 		}
 	}
+
+	.wc-block-components-product-metadata {
+		@include font-size(regular);
+	}
 }
 
 .wc-block-components-order-summary-item__image,
@@ -35,7 +41,6 @@
 
 .wc-block-components-order-summary-item__image {
 	width: #{$gap-large * 2};
-	padding-top: $gap;
 	padding-bottom: $gap;
 	position: relative;
 
@@ -46,7 +51,6 @@
 }
 
 .wc-block-components-order-summary-item__quantity {
-	@include font-size(smaller);
 	align-items: center;
 	background: #fff;
 	border: 2px solid;
@@ -69,9 +73,7 @@
 
 .wc-block-components-order-summary-item__description {
 	padding-left: $gap-large;
-	padding-top: $gap;
 	padding-bottom: $gap;
-	line-height: 1.375;
 
 	p,
 	.wc-block-components-product-metadata {
@@ -80,8 +82,12 @@
 	}
 }
 
-.wc-block-components-order-summary-item__header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
+.wc-block-components-order-summary-item__total-price {
+	font-weight: bold;
+	margin-left: auto;
+}
+
+
+.wc-block-components-order-summary-item__individual-prices {
+	display: block;
 }
diff --git a/assets/js/base/components/cart-checkout/product-details/style.scss b/assets/js/base/components/cart-checkout/product-details/style.scss
index 6e3395c8b09..79aad8f2d5f 100644
--- a/assets/js/base/components/cart-checkout/product-details/style.scss
+++ b/assets/js/base/components/cart-checkout/product-details/style.scss
@@ -3,6 +3,10 @@
 	list-style: none;
 	margin: 0.5em 0;
 	padding: 0;
+
+	&:last-of-type {
+		margin-bottom: 0;
+	}
 }
 
 .wc-block-components-product-details__name,
diff --git a/assets/js/base/components/cart-checkout/product-metadata/style.scss b/assets/js/base/components/cart-checkout/product-metadata/style.scss
index 27676b11655..7eb90150530 100644
--- a/assets/js/base/components/cart-checkout/product-metadata/style.scss
+++ b/assets/js/base/components/cart-checkout/product-metadata/style.scss
@@ -3,6 +3,6 @@
 
 	.wc-block-components-product-metadata__description > p,
 	.wc-block-components-product-metadata__variation-data {
-		margin: 0.25em 0 0 0;
+		margin: 0.25em 0;
 	}
 }
diff --git a/assets/js/base/components/quantity-selector/style.scss b/assets/js/base/components/quantity-selector/style.scss
index 86c8f9b752a..747a9de4c84 100644
--- a/assets/js/base/components/quantity-selector/style.scss
+++ b/assets/js/base/components/quantity-selector/style.scss
@@ -12,12 +12,13 @@
 
 .wc-block-components-quantity-selector {
 	display: flex;
-	min-width: 100px;
+	width: 107px;
 	border: 1px solid $gray-300;
 	background: #fff;
 	border-radius: 4px;
 	// needed so that buttons fill the container.
 	box-sizing: content-box;
+	margin: 0 0 0.25em 0;
 
 	.has-dark-controls & {
 		background-color: transparent;
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
index 3dd5c7db3cd..b3f3764eb37 100644
--- a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
+++ b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
@@ -8,7 +8,6 @@ import QuantitySelector from '@woocommerce/base-components/quantity-selector';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import ProductName from '@woocommerce/base-components/product-name';
 import { useStoreCartItemQuantity } from '@woocommerce/base-hooks';
-import { Icon, trash } from '@woocommerce/icons';
 import {
 	ProductBackorderBadge,
 	ProductImage,
@@ -82,14 +81,19 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 	} = useStoreCartItemQuantity( lineItem );
 
 	const currency = getCurrency( prices );
-	const regularAmount = Dinero( {
+	const regularAmountSingle = Dinero( {
 		amount: parseInt( prices.raw_prices.regular_price, 10 ),
 		precision: parseInt( prices.raw_prices.precision, 10 ),
-	} ).multiply( quantity );
-	const purchaseAmount = Dinero( {
+	} );
+	const purchaseAmountSingle = Dinero( {
 		amount: parseInt( prices.raw_prices.price, 10 ),
 		precision: parseInt( prices.raw_prices.precision, 10 ),
-	} ).multiply( quantity );
+	} );
+	const regularAmount = regularAmountSingle.multiply( quantity );
+	const purchaseAmount = purchaseAmountSingle.multiply( quantity );
+	const saleAmountSingle = regularAmountSingle.subtract(
+		purchaseAmountSingle
+	);
 	const saleAmount = regularAmount.subtract( purchaseAmount );
 	const firstImage = images.length ? images[ 0 ] : {};
 	const isProductHiddenFromCatalog =
@@ -130,51 +134,68 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 						/>
 					)
 				) }
+
+				<div className="wc-block-cart-item__prices">
+					<ProductPrice
+						currency={ currency }
+						regularPrice={ getAmountFromRawPrice(
+							regularAmountSingle,
+							currency
+						) }
+						price={ getAmountFromRawPrice(
+							purchaseAmountSingle,
+							currency
+						) }
+					/>
+				</div>
+
+				<ProductSaleBadge
+					currency={ currency }
+					saleAmount={ getAmountFromRawPrice(
+						saleAmountSingle,
+						currency
+					) }
+				/>
+
 				<ProductMetadata
 					shortDescription={ shortDescription }
 					fullDescription={ fullDescription }
 					itemData={ itemData }
 					variation={ variation }
 				/>
-			</td>
-			<td className="wc-block-cart-item__quantity">
-				<QuantitySelector
-					disabled={ isPendingDelete }
-					quantity={ quantity }
-					maximum={ quantityLimit }
-					onChange={ changeQuantity }
-					itemName={ name }
-				/>
-				<button
-					className="wc-block-cart-item__remove-link"
-					onClick={ removeItem }
-					disabled={ isPendingDelete }
-				>
-					{ __( 'Remove item', 'woo-gutenberg-products-block' ) }
-				</button>
-				<button
-					className="wc-block-cart-item__remove-icon"
-					onClick={ removeItem }
-				>
-					<span className="screen-reader-text">
+
+				<div className="wc-block-cart-item__quantity">
+					<QuantitySelector
+						disabled={ isPendingDelete }
+						quantity={ quantity }
+						maximum={ quantityLimit }
+						onChange={ changeQuantity }
+						itemName={ name }
+					/>
+					<button
+						className="wc-block-cart-item__remove-link"
+						onClick={ removeItem }
+						disabled={ isPendingDelete }
+					>
 						{ __( 'Remove item', 'woo-gutenberg-products-block' ) }
-					</span>
-					<Icon srcElement={ trash } />
-				</button>
+					</button>
+				</div>
 			</td>
 			<td className="wc-block-cart-item__total">
 				<ProductPrice
 					currency={ currency }
-					regularPrice={ getAmountFromRawPrice(
-						regularAmount,
-						currency
-					) }
 					price={ getAmountFromRawPrice( purchaseAmount, currency ) }
 				/>
-				<ProductSaleBadge
-					currency={ currency }
-					saleAmount={ getAmountFromRawPrice( saleAmount, currency ) }
-				/>
+
+				{ quantity > 1 && (
+					<ProductSaleBadge
+						currency={ currency }
+						saleAmount={ getAmountFromRawPrice(
+							saleAmount,
+							currency
+						) }
+					/>
+				) }
 			</td>
 		</tr>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js
index eb02483f51a..a3f20a8feb8 100644
--- a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js
+++ b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js
@@ -39,11 +39,6 @@ const CartLineItemsTable = ( { lineItems = [], isLoading = false } ) => {
 							{ __( 'Details', 'woo-gutenberg-products-block' ) }
 						</span>
 					</th>
-					<th className="wc-block-cart-items__header-quantity">
-						<span>
-							{ __( 'Quantity', 'woo-gutenberg-products-block' ) }
-						</span>
-					</th>
 					<th className="wc-block-cart-items__header-total">
 						<span>
 							{ __( 'Total', 'woo-gutenberg-products-block' ) }
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
index 5038f996cbb..9d39a4f600c 100644
--- a/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
+++ b/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
@@ -3,9 +3,6 @@
 		white-space: nowrap;
 	}
 
-	.wc-block-components-product-name {
-		color: inherit;
-	}
 	.wc-block-components-address-form {
 		.wc-block-components-text-input,
 		.wc-block-components-country-input,
@@ -64,15 +61,6 @@ table.wc-block-cart-items {
 				text-transform: none;
 				white-space: nowrap;
 			}
-			.wc-block-cart-item__remove-icon {
-				@include link-button;
-
-				fill: currentColor;
-				position: absolute;
-				top: $gap;
-				right: 0;
-				display: none;
-			}
 		}
 		.wc-block-components-product-name {
 			display: block;
@@ -86,8 +74,12 @@ table.wc-block-cart-items {
 			.wc-block-components-product-price__regular,
 			.wc-block-components-product-price__value {
 				display: block;
+				font-weight: bold;
 			}
 		}
+		.wc-block-components-product-metadata {
+			margin-bottom: 0.75em;
+		}
 
 		&.is-disabled {
 			opacity: 0.5;
@@ -112,6 +104,7 @@ table.wc-block-cart-items {
 	.wc-block-cart-items {
 		.wc-block-cart-items__row {
 			.wc-block-cart-item__price,
+			.wc-block-cart-item__individual-price,
 			.wc-block-cart-item__product-metadata,
 			.wc-block-cart-item__image > *,
 			.wc-block-components-quantity-selector {
@@ -127,13 +120,18 @@ table.wc-block-cart-items {
 				margin-top: 0.25em;
 				min-width: 8em;
 			}
-			.wc-block-cart-item__remove-link,
-			.wc-block-cart-item__remove-icon {
+			.wc-block-cart-item__remove-link {
 				visibility: hidden;
 			}
 			.wc-block-cart-item__image a {
 				display: block;
 			}
+			.wc-block-cart-item__individual-price {
+				@include force-content();
+				max-width: 3em;
+				display: block;
+				margin-top: 0.25em;
+			}
 			.wc-block-cart-item__total {
 				> span,
 				> div {
@@ -192,10 +190,9 @@ table.wc-block-cart-items {
 			}
 			.wc-block-cart-item__product {
 				grid-column-start: 2;
-				grid-column-end: 4;
+				grid-column-end: 3;
 				grid-row-start: 1;
 				justify-self: stretch;
-				margin-right: 24px;
 				padding-bottom: $gap;
 			}
 			.wc-block-cart-item__quantity {
@@ -205,20 +202,9 @@ table.wc-block-cart-items {
 				padding-right: $gap;
 				align-self: end;
 				padding-top: $gap;
-
-				.wc-block-cart-item__remove-link {
-					display: none;
-				}
-				.wc-block-cart-item__remove-icon {
-					display: block;
-				}
 			}
 			.wc-block-cart-item__total {
-				grid-column: 2 / span 2;
-				grid-row-start: 2;
-				align-self: end;
-				justify-self: end;
-				padding-bottom: 0.375em;
+				grid-row-start: 1;
 
 				.wc-block-components-formatted-money-amount {
 					display: inline-block;
diff --git a/assets/js/icons/index.js b/assets/js/icons/index.js
index d0f76de36ef..b575c55d7b8 100644
--- a/assets/js/icons/index.js
+++ b/assets/js/icons/index.js
@@ -42,7 +42,6 @@ export { default as tag } from './library/tag';
 export { default as tags } from './library/tags';
 export { default as thumbUp } from './library/thumb-up';
 export { default as toggle } from './library/toggle';
-export { default as trash } from './library/trash';
 export { default as truck } from './library/truck';
 export { default as widgets } from './library/widgets';
 export { default as woo } from './library/woo';
diff --git a/assets/js/icons/library/trash.js b/assets/js/icons/library/trash.js
deleted file mode 100644
index 2f09534935c..00000000000
--- a/assets/js/icons/library/trash.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG } from 'wordpress-components';
-
-// This uses `delete_outline` icon from Material.
-// https://material.io/resources/icons/?icon=delete_outline&style=baseline
-// We are using it as `trash` or `trashcan` or `remove-item`.
-const trash = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z" />
-		<path fill="none" d="M0 0h24v24H0V0z" />
-	</SVG>
-);
-
-export default trash;
diff --git a/src/BlockTypes/Cart.php b/src/BlockTypes/Cart.php
index 947bdeafa91..b1a9aad8ace 100644
--- a/src/BlockTypes/Cart.php
+++ b/src/BlockTypes/Cart.php
@@ -148,7 +148,6 @@ protected function get_skeleton() {
 							<tr class="wc-block-cart-items__header">
 								<th class="wc-block-cart-items__header-image"><span /></th>
 								<th class="wc-block-cart-items__header-product"><span /></th>
-								<th class="wc-block-cart-items__header-quantity"><span /></th>
 								<th class="wc-block-cart-items__header-total"><span /></th>
 							</tr>
 						</thead>
@@ -159,14 +158,13 @@ protected function get_skeleton() {
 								</td>
 								<td class="wc-block-cart-item__product">
 									<div class="wc-block-cart-item__product-name"></div>
+									<div class="wc-block-cart-item__individual-price"></div>
 									<div class="wc-block-cart-item__product-metadata"></div>
-								</td>
-								<td class="wc-block-cart-item__quantity">
-								<div class="wc-block-components-quantity-selector">
-									<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
-									<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
-									<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
-								</div>
+									<div class="wc-block-components-quantity-selector">
+										<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
+										<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
+										<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
+									</div>
 								</td>
 								<td class="wc-block-cart-item__total">
 									<div class="wc-block-cart-item__price"></div>
@@ -177,15 +175,14 @@ protected function get_skeleton() {
 									<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" width="1" height="1" /></div>
 								</td>
 								<td class="wc-block-cart-item__product">
-									<div class="wc-block-cart-item__product-name">&nbsp;</div>
-									<div class="wc-block-cart-item__product-metadata">&nbsp;</div>
-								</td>
-								<td class="wc-block-cart-item__quantity">
-								<div class="wc-block-components-quantity-selector">
-									<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
-									<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
-									<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
-								</div>
+									<div class="wc-block-cart-item__product-name"></div>
+									<div class="wc-block-cart-item__individual-price"></div>
+									<div class="wc-block-cart-item__product-metadata"></div>
+									<div class="wc-block-components-quantity-selector">
+										<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
+										<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
+										<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
+									</div>
 								</td>
 								<td class="wc-block-cart-item__total">
 									<div class="wc-block-cart-item__price"></div>
@@ -197,14 +194,13 @@ protected function get_skeleton() {
 								</td>
 								<td class="wc-block-cart-item__product">
 									<div class="wc-block-cart-item__product-name"></div>
+									<div class="wc-block-cart-item__individual-price"></div>
 									<div class="wc-block-cart-item__product-metadata"></div>
-								</td>
-								<td class="wc-block-cart-item__quantity">
-								<div class="wc-block-components-quantity-selector">
-									<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
-									<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
-									<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
-								</div>
+									<div class="wc-block-components-quantity-selector">
+										<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
+										<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
+										<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
+									</div>
 								</td>
 								<td class="wc-block-cart-item__total">
 									<div class="wc-block-cart-item__price"></div>