Checkout Changes in WooCommerce 9.0

We’ve updated the Order Summary block with a new design that features a border for better visibility, an improved hierarchy of summary items, and an updated coupon component with an accordion interaction for a more streamlined experience.

The Pickup Locations section has been enhanced to display all pickup addresses by default. The pickup details are now elegantly truncated to two lines with a convenient Read more link for additional information.

The secondary Address line field is now more flexible. It can be set as either optional or required. When optional, it remains hidden behind an + Add apartment, suite, etc. link. When required, it is displayed by default for ease of use.

In the Cart and Checkout block Order Summaries, the shipping total now displays as “FREE” instead of 0.00 when the shipping price is zero, providing a clearer and more positive message to your customers.

The Order Summary block in the checkout sidebar is now sticky on desktop, ensuring it remains visible when the checkout view becomes longer than the viewport.

To maximize valuable space and enhance the user experience, we’ve removed the page title from the checkout template. This update only affects new stores; existing stores will retain their page titles. The Title block can be added or removed in the template via Appearance > Editor > Templates > Page: Checkout.

This change impacts both checkout by blocks and shortcode.

Previously, form step numbers could be toggled individually for each inner block. With WooCommerce 9.0, you can now enable or disable form step numbers for all inner blocks with a single toggle.

By default, form step numbers are now disabled, creating a cleaner and less cluttered checkout experience. To re-enable them, simply select the Checkout Fields block in the page editor and toggle the Show form step numbers option.

To better reflect the available options, we’ve renamed the Shipping Method section title to Delivery when Local Pickup is active. You can easily rename the section title directly in the page editor to suit your store’s needs.

Section titles remain editable directly from the page editor.

Option titles have been simplified from Shipping to Ship and Local Pickup to Pickup with their corresponding icons now positioned to the left of the titles for a cleaner look. Shipping method titles are editable directly in the edito.

This section will display only if the “Blocks Local Pickup” feature is enabled.

To display the SVG icon above the text, you can add the following custom CSS code:

.edit-post-visual-editor .wc-block-components-button.wc-block-checkout__shipping-method-option,
.wc-block-components-button.wc-block-checkout__shipping-method-option {
  flex-direction: column;
}

Shipping and pickup costs are now hidden by default to accommodate scenarios where shipping options depend on the shopper’s chosen delivery address.

To adjust this setting, go to the block settings for the “Delivery” inner-block in the right sidebar of checkout, and enable Show costs.

The country input field has been repositioned to the top of the shipping and billing address forms for all countries. This adjustment ensures that all relevant address fields are accurately displayed from the beginning, providing a seamless and uninterrupted form-filling experience.

You can adjust the ordering of the country input field by adding the following code snippet, e.g. using the Code Snippets plugin:

/**
 * Adjust the order of the country input field in the checkout form.
 *
 * @param array $locales
 * @return array
 *
 * Priority values:
 * 11: After the first name field.
 * 21: After the last name field.
 * 31: After the company name field.
 * 41: After the address line 1 field.
 * 51: After the address line 2 field.
 * 71: After the city field.
 * 81: After the state field.
 * 91: After the postcode field.
 * 101: After the phone field.
 */
add_filter( 'woocommerce_get_country_locale', function ( $locales ) {
	foreach ( $locales as $country_code => &$locale ) {
		$locale['country'] = array( 'priority' => 21 );
	}
	return $locales;
} );