Reset shipping rate font size to match other elements (#46345)

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/render-package-rate-option.tsx

@@ -7,6 +7,7 @@ import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
 import type { PackageRateOption } from '@woocommerce/types';
 import { getSetting } from '@woocommerce/settings';
 import { CartShippingPackageShippingRate } from '@woocommerce/types';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Default render function for package rate options.
@@ -23,23 +24,33 @@ export const renderPackageRateOption = (
 		? parseInt( rate.price, 10 ) + parseInt( rate.taxes, 10 )
 		: parseInt( rate.price, 10 );
 
+	let description = (
+		<>
+			{ Number.isFinite( priceWithTaxes ) && (
+				<FormattedMonetaryAmount
+					currency={ getCurrencyFromPriceResponse( rate ) }
+					value={ priceWithTaxes }
+				/>
+			) }
+			{ Number.isFinite( priceWithTaxes ) && rate.delivery_time
+				? ' — '
+				: null }
+			{ decodeEntities( rate.delivery_time ) }
+		</>
+	);
+
+	if ( priceWithTaxes === 0 ) {
+		description = (
+			<span className="wc-block-components-shipping-rates-control__package__description--free">
+				{ __( 'Free', 'woocommerce' ) }
+			</span>
+		);
+	}
+
 	return {
 		label: decodeEntities( rate.name ),
 		value: rate.rate_id,
-		description: (
-			<>
-				{ Number.isFinite( priceWithTaxes ) && (
-					<FormattedMonetaryAmount
-						currency={ getCurrencyFromPriceResponse( rate ) }
-						value={ priceWithTaxes }
-					/>
-				) }
-				{ Number.isFinite( priceWithTaxes ) && rate.delivery_time
-					? ' — '
-					: null }
-				{ decodeEntities( rate.delivery_time ) }
-			</>
-		),
+		description,
 	};
 };
 

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss

@@ -1,6 +1,10 @@
 .wc-block-components-shipping-rates-control__package {
 	margin: 0;
 
+	.wc-block-components-shipping-rates-control__package__description--free {
+		text-transform: uppercase;
+	}
+
 	&.wc-block-components-panel {
 		margin-bottom: 0;
 	}
@@ -31,9 +35,6 @@
 		padding-bottom: 0;
 	}
 
-	.wc-block-components-radio-control__label-group {
-		@include font-size(small);
-	}
 	.wc-block-components-radio-control__description-group {
 		@include font-size(smaller);
 	}

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx

@@ -38,16 +38,24 @@ const renderShippingRatesControlOption = (
 	const priceWithTaxes = getSetting( 'displayCartPricesIncludingTax', false )
 		? parseInt( option.price, 10 ) + parseInt( option.taxes, 10 )
 		: parseInt( option.price, 10 );
-	return {
-		label: decodeEntities( option.name ),
-		value: option.rate_id,
-		description: decodeEntities( option.description ),
-		secondaryLabel: (
+
+	const secondaryLabel =
+		priceWithTaxes === 0 ? (
+			<span className="wc-block-checkout__shipping-option--free">
+				{ __( 'Free', 'woocommerce' ) }
+			</span>
+		) : (
 			<FormattedMonetaryAmount
 				currency={ getCurrencyFromPriceResponse( option ) }
 				value={ priceWithTaxes }
 			/>
-		),
+		);
+
+	return {
+		label: decodeEntities( option.name ),
+		value: option.rate_id,
+		description: decodeEntities( option.description ),
+		secondaryLabel,
 		secondaryDescription: decodeEntities( option.delivery_time ),
 	};
 };

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss

@@ -4,6 +4,10 @@
 		padding: 0.875em 0.875em 0.875em em($gap-huge);
 	}
 
+	.wc-block-checkout__shipping-option--free {
+		text-transform: uppercase;
+	}
+
 	.wc-block-components-shipping-rates-control__no-results-notice {
 		margin: em($gap-small) 0;
 	}

plugins/woocommerce/changelog/fix-free-shipping-font-size

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update the shipping selector to show FREE instead of a zero amount