Using the new block-based checkout

The new checkout is available within the WooCommerce Blocks plugin and can be tested on your store. Note, we are working to integrate the new checkout with our most popular extensions and you can stay up-to-date with which extensions are integrated via this list.

If you’d like to use or test the new checkout on your store you can follow the guide below to replacing the cart and checkout shortcodes that are used on your WooCommerce site with the new cart and checkout blocks.

Replacing the existing shortcode based cart ↑ Back to top

  • Download and install the WooCommerce Blocks extension
  • Open the Cart page that was created when you setup WooCommerce from the Pages menu in your wp-admin
  • Delete the shortcode that is used to generate the cart
  • Insert the Cart block by searching for Cart in the block inserter or navigating to the WooCommerce Blocks section and selecting it from the available blocks
  • You will then see the new block based cart and you’ll be able to use the settings in the block sidebar to make various changes as well as view the empty start of the block via the block-state switcher.
  • Once you are ready you can make the changes live by pressing the Update button to publish the changes.

Replacing the existing shortcode based checkout ↑ Back to top

  • Download and install the WooCommerce Blocks extension
  • Open the Checkout page that was created when you setup WooCommerce from the Pages menu in your wp-admin
  • Delete the shortcode that is used to generate the checkout
  • Insert the Checkout block by searching for Checkout in the block inserter or navigating to the WooCommerce Blocks section and selecting it from the available blocks
  • You will then see the new checkout and you’ll be able to use the settings in the block sidebar to make various changes
  • Once you are ready, you can make the changes live by pressing the Update button to publish the changes.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top