WooCommerce Checkout block

Last modified:

Before you start

Make sure your store meets these requirements:

  • Kustom Checkout for WooCommerce version 2.16.0 or later (Checkout block support was added in this release).
  • WooCommerce version 9.7.0 or later.
  • Your Checkout page should currently use either a Shortcode block containing [woocommerce_checkout], or the Classic Shortcode block (WooCommerce’s own checkout block, if previously converted from the Checkout block).

What stays the same

Kustom Checkout is an embedded checkout — your customers see the same Kustom experience regardless of whether the page is built with the shortcode or the Checkout block.

Switching to the Checkout block does not change what your customers see or how they pay.

What’s different

The block checkout has a more locked structure, meaning some layout settings in Kustom Checkout no longer take effect, because the layout is controlled more by WooCommerce Blocks.

How to switch to the Checkout block

Depending on how your Checkout page was originally set up, follow one of the two paths below.

If your Checkout page currently uses the generic Shortcode block (containing the [woocommerce_checkout] shortcode):

  1. Go to Pages and open your store’s Checkout page.
  2. Remove the Shortcode block.
  3. Add the Checkout block in its place.
  4. Update/publish the page.

If your Checkout page currently uses the Classic Shortcode block (because it was previously converted from the Checkout block):

  1. Go to Pages and open your store’s Checkout page.
  2. Select the Classic Checkout block and click the Transform into blocks button.
  3. Update/publish the page.

The block editor preview does not reflect the live checkout

When editing the Checkout page in the block editor, you may see WooCommerce’s native shipping method radio buttons in the preview. This is expected, and not what your customers will see.

If you have Shipping methods in iframe enabled in your Kustom Checkout settings, shipping selection happens inside the Kustom iframe on the live checkout — the native WooCommerce radio buttons are hidden from the customer. The block editor cannot render the iframe, so it falls back to showing the native shipping selector instead.

In short: always verify shipping behavior on the actual live checkout page, not in the block editor preview.

Related documentation: Troubleshooting → Shipping Methods in iframe