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

Using the Block-Based Checkout

The conversion-optimized Cart and Checkout Blocks are the default for new installations starting with WooCommerce 8.3. These blocks are part of a ground-up rebuild of the checkout flow, based on industry best practices.

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


Note:
These new blocks are fully functional and most extensions developed by WooCommerce fully support the block-based cart/checkout at this time. However, it’s possible an extension running on your store may not work as expected with the block cart and checkout.

For details on compatible extensions and compatibility notices, check our Cart and Checkout Blocks Status page

Replacing the existing cart shortcode

↑ Back to top
  • Check that your site is running WooCommerce version 8.3 or newer.
  • 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 8.3 or newer.
  • 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.