Woocommerce autogenerate checkout page

Hello,

the Multi-Step Checkout plugin works only for the shortcode-based checkout. Unfortunately it cannot be adapted so it can work with the block-based checkout. This is due to a technical limitation imposed by the WooCommerce checkout block.

Since WooCommerce 8.4.0 the block-based checkout is the default version. You can still use the shortcode-based checkout by editing the checkout page, then removing the checkout block and adding a shortcode block with [woocommerce_checkout] as content.

Hi,
Thanks for fast response. Do you mean something like this:

I try to do it with Columns, but summary/overview does not occur on the right, additionaly country menu becomes very thin:

Edited code:

<!-- wp:columns -->

<div class="wp-block-columns">

<!-- wp:column -->

<div class="wp-block-column">

<!-- wp:woocommerce/checkout -->

[woocommerce_checkout]

<!-- /wp:woocommerce/checkout -->

</div>

<!-- /wp:column -->

<!-- wp:column -->

<div class="wp-block-column">

<!-- wp:paragraph -->

<!-- wp:woocommerce/checkout-totals-block -->

<div class="wp-block-woocommerce-checkout-totals-block">

<!-- wp:woocommerce/checkout-order-summary-block -->

<div class="wp-block-woocommerce-checkout-order-summary-block">

<!-- wp:woocommerce/checkout-order-summary-cart-items-block -->

<div class="wp-block-woocommerce-checkout-order-summary-cart-items-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-cart-items-block -->

<!-- wp:woocommerce/checkout-order-summary-coupon-form-block -->

<div class="wp-block-woocommerce-checkout-order-summary-coupon-form-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-coupon-form-block -->

<!-- wp:woocommerce/checkout-order-summary-subtotal-block -->

<div class="wp-block-woocommerce-checkout-order-summary-subtotal-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-subtotal-block -->

<!-- wp:woocommerce/checkout-order-summary-fee-block -->

<div class="wp-block-woocommerce-checkout-order-summary-fee-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-fee-block -->

<!-- wp:woocommerce/checkout-order-summary-discount-block -->

<div class="wp-block-woocommerce-checkout-order-summary-discount-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-discount-block -->

<!-- wp:woocommerce/checkout-order-summary-shipping-block -->

<div class="wp-block-woocommerce-checkout-order-summary-shipping-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-shipping-block -->

<!-- wp:woocommerce/checkout-order-summary-taxes-block -->

<div class="wp-block-woocommerce-checkout-order-summary-taxes-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-taxes-block -->

</div>

<!-- /wp:woocommerce/checkout-order-summary-block -->

</div>

<!-- /wp:woocommerce/checkout-totals-block -->

</div>

<!-- /wp:column -->

</div>

<!-- /wp:columns -->

Default

<!-- wp:woocommerce/checkout -->

<div class="wp-block-woocommerce-checkout alignwide wc-block-checkout is-loading"><!-- wp:woocommerce/checkout-fields-block -->

<div class="wp-block-woocommerce-checkout-fields-block"><!-- wp:woocommerce/checkout-express-payment-block -->

<div class="wp-block-woocommerce-checkout-express-payment-block"></div>

<!-- /wp:woocommerce/checkout-express-payment-block -->

<!-- wp:woocommerce/checkout-contact-information-block -->

<div class="wp-block-woocommerce-checkout-contact-information-block"></div>

<!-- /wp:woocommerce/checkout-contact-information-block -->

<!-- wp:paragraph -->

<p><p></p>[woocommerce_checkout]</p>

<!-- /wp:paragraph -->

<!-- wp:woocommerce/checkout-payment-block -->

<div class="wp-block-woocommerce-checkout-payment-block"></div>

<!-- /wp:woocommerce/checkout-payment-block -->

<!-- wp:woocommerce/checkout-shipping-address-block -->

<div class="wp-block-woocommerce-checkout-shipping-address-block"></div>

<!-- /wp:woocommerce/checkout-shipping-address-block -->

<!-- wp:woocommerce/checkout-billing-address-block -->

<div class="wp-block-woocommerce-checkout-billing-address-block"></div>

<!-- /wp:woocommerce/checkout-billing-address-block -->

<!-- wp:woocommerce/checkout-shipping-method-block -->

<div class="wp-block-woocommerce-checkout-shipping-method-block"></div>

<!-- /wp:woocommerce/checkout-shipping-method-block -->

<!-- wp:woocommerce/checkout-shipping-methods-block -->

<div class="wp-block-woocommerce-checkout-shipping-methods-block"></div>

<!-- /wp:woocommerce/checkout-shipping-methods-block -->

<!-- wp:woocommerce/checkout-pickup-options-block -->

<div class="wp-block-woocommerce-checkout-pickup-options-block"></div>

<!-- /wp:woocommerce/checkout-pickup-options-block -->

<!-- wp:woocommerce/checkout-order-note-block -->

<div class="wp-block-woocommerce-checkout-order-note-block"></div>

<!-- /wp:woocommerce/checkout-order-note-block -->

<!-- wp:woocommerce/checkout-terms-block -->

<div class="wp-block-woocommerce-checkout-terms-block"></div>

<!-- /wp:woocommerce/checkout-terms-block -->

<!-- wp:woocommerce/checkout-actions-block -->

<div class="wp-block-woocommerce-checkout-actions-block"></div>

<!-- /wp:woocommerce/checkout-actions-block --></div>

<!-- /wp:woocommerce/checkout-fields-block -->

<!-- wp:woocommerce/checkout-totals-block -->

<div class="wp-block-woocommerce-checkout-totals-block"><!-- wp:woocommerce/checkout-order-summary-block -->

<div class="wp-block-woocommerce-checkout-order-summary-block"><!-- wp:woocommerce/checkout-order-summary-cart-items-block -->

<div class="wp-block-woocommerce-checkout-order-summary-cart-items-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-cart-items-block -->

<!-- wp:woocommerce/checkout-order-summary-coupon-form-block -->

<div class="wp-block-woocommerce-checkout-order-summary-coupon-form-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-coupon-form-block -->

<!-- wp:woocommerce/checkout-order-summary-subtotal-block -->

<div class="wp-block-woocommerce-checkout-order-summary-subtotal-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-subtotal-block -->

<!-- wp:woocommerce/checkout-order-summary-fee-block -->

<div class="wp-block-woocommerce-checkout-order-summary-fee-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-fee-block -->

<!-- wp:woocommerce/checkout-order-summary-discount-block -->

<div class="wp-block-woocommerce-checkout-order-summary-discount-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-discount-block -->

<!-- wp:woocommerce/checkout-order-summary-shipping-block -->

<div class="wp-block-woocommerce-checkout-order-summary-shipping-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-shipping-block -->

<!-- wp:woocommerce/checkout-order-summary-taxes-block -->

<div class="wp-block-woocommerce-checkout-order-summary-taxes-block"></div>

<!-- /wp:woocommerce/checkout-order-summary-taxes-block --></div>

<!-- /wp:woocommerce/checkout-order-summary-block --></div>

<!-- /wp:woocommerce/checkout-totals-block --></div>

<!-- /wp:woocommerce/checkout -->

<p>[]</p>

Both versions you mentioned are block-based checkout.

If you delete everything (ALL the blocks) and add a Shortcode block with [woocommerce_checkout], then it is the shortcode-based checkout.

Ah ok, that I got. I was thinking maybe there is a way to keep the right overview part (as it looks very nice) and replace only the left part with the shortcode block.

Unfortunately that will also not work.

The entire checkout block works as one entity. That means that any of the inner blocks (for example: Shipping Address, Order Summary or Contact Information) of the checkout block cannot be used separately. The inner blocks cannot be used outside the checkout, not can they be deleted or moved around inside the checkout block.

That being said, the shortcode-based checkout cannot be mixed with inner blocks from the block-based checkout. This behavior is independent of the Multi-Step Checkout plugin.

Thanks a lot!