1. Documentation /
  2. Using the Block-Based Checkout

Using the Block-Based Checkout

The Cart and Checkout Blocks are available for testing in WooCommerce, starting from version 6.9. These blocks are part of a ground-up rebuild of the checkout flow, based on industry best practices.

If you’d like to use or test these new blocks on your store, you can follow this guide to replace the existing shortcodes in your Cart and Checkout pages.

Replacing the existing cart shortcode

↑ Back to top
  • Check that your site is running WooCommerce version 6.9 or newer — or download and install the WooCommerce Blocks plugin.
  • Click on the the Pages menu item, and then locate and edit the Cart page.
  • Delete the [woocommerce_cart] shortcode that generates the contents of your Cart page.
  • Search for the Cart Block, or locate it by navigating to the WooCommerce Blocks section.
  • Choose the block to add it to your Cart page.

You should now see a preview of your block-based cart. You can use the settings in the sidebar to customize the Cart Block. Once you are ready, remember to click the Update button to save and publish your changes.

Replacing the existing checkout shortcode

↑ Back to top
  • Check that your site is running WooCommerce version 6.9 or newer — or download and install the WooCommerce Blocks plugin.
  • Click on the the Pages menu item, and then locate and edit the Checkout page.
  • Delete the [woocommerce_checkout] shortcode that generates the contents of your Checkout page.
  • Search for the Checkout Block, or locate it by navigating to the WooCommerce Blocks section.
  • Choose the block to add it to your Checkout page.

You should now see a preview of your block-based checkout. You can use the settings in the sidebar to customize the Checkout Block. Once you are ready, remember to click the Update button to save and publish your changes.