1. Documentation /
  2. Cart and Checkout Blocks: Status /
  3. Checkout Changes in WooCommerce 9.0

Checkout Changes in WooCommerce 9.0

In WooCommerce 9.0, we’re excited to introduce several shopper-facing improvements to the Checkout block designed to streamline the checkout process and drive higher conversions. Here are the key enhancements you can look forward to!

We’ve broken the changes down to the following categories:

In the sections below, click to expand each change for detailed information on how these updates will benefit your store.

New when Upgrading to 9.0

↑ Back to top
Enhanced Order summary design

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.

Improved “Pickup Locations”

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.

Optimized address fields

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.

Enhance value display when shipping is free

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.

Order Summary is sticky on desktop

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.

Enabled only for newly created stores

↑ Back to top
Page Title Removed from Checkout Page

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.

Optimized Defaults: New settings for customization

↑ Back to top
Checkout form steps number hidden by default

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.

Rename “Shipping Method” Section Title to “Delivery”

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.

Optimized Delivery options design

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 now hidden by default

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.

Moved the “Country” field to the top of the address form

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;
} );

These changes ship with WooCommerce 9.0, and we’ll release more shopper-facing improvements soon! If you have any feedback or if you receive feedback from your customers, feel free to share it with us by using the voting thumbs below. Thanks! 💜