Cart and Checkout Blocks: Status

Starting with WooCommerce version 8.3, the Cart and Checkout Blocks are the default for new installations. These blocks are part of a ground-up rebuild of the checkout flow, based on industry best practices which offer conversion-optimized features and a simplified shopper flow. With easy customization options, you can maintain your brand identity and provide a visually appealing and consistent checkout journey for your customers.

These new blocks are fully functional and most extensions developed by WooCommerce fully support the block-based cart/checkout at this time. However, a plugin/extension running on your store may not work as expected. The cart and checkout shortcodes will continue to be available in WooCommerce Core for existing stores that have customized checkout flows requiring them, and for any new stores that have specific needs not yet possible with the Cart and Checkout blocks.

We have created this document to:

• Help you understand how to add the new blocks to your Cart and Checkout pages if your store was created before WooCommerce version 8.3.
• How to use the new Order Confirmation template with a Block theme if your store was created before WooCommerce version 8.3.
• Provide instructions on how to revert to the classic shortcodes should you need to.
• Share the latest information we have on extensions that have been integrated and tested to work with the Cart and Checkout Blocks, as well as extensions that are known to be incompatible.

Requirements

↑ Back to top

To use the Cart and Checkout Blocks, your site must:

• Have WooCommerce version 6.9 or newer installed.
• Use a supported payment gateway.

Using the Cart and Checkout Blocks

↑ Back to top

With WooCommerce version 8.3+, the Cart and Checkout blocks are the default for new installations and when creating default pages with the tool under WooCommerce > Status > Tools > Create default WooCommerce pages. For Block themes, starting with WooCommerce 8.3, the “blockified” Order Confirmation template is also the default for new installations.

For versions before 8.3, or if you removed the blocks and would like to switch back, you can follow the steps below.

Replacing the existing cart shortcode

↑ Back to top

To replace the existing cart shortcode with the Cart Block:

1. Check that your site is running WooCommerce version 6.9 or newer.
2. Click on the Pages menu item, and then locate and edit the Cart page.
3. Delete the [woocommerce_cart] Shortcode block that generates the contents of your Cart page.
4. Search for the Cart Block, or locate it by navigating to the WooCommerce Blocks section.
5. 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

To replace the existing checkout shortcode to use the Checkout Block:

1. Check that your site is running WooCommerce version 6.9 or newer.
2. Click on the Pages menu item, and then locate and edit the Checkout page.
3. Delete the [woocommerce_checkout] Shortcode block that generates the contents of your Checkout page.
4. Search for the Checkout Block, or locate it by navigating to the WooCommerce Blocks section.
5. 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.

Replacing the order confirmation page

↑ Back to top

After placing an order via the Checkout Block, the customer will be redirected to the order confirmation page. If you’re using a block-based theme, you’ll have access to a dedicated Order Confirmation Template, as well as order confirmation blocks. This allows for customisation of your confirmation page.

With a block theme (such as Twenty Twenty-Three) navigate to Appearance > Editor > Templates > Order Confirmation. You’ll see a representation of the existing Order Confirmation page in the editor. If you select the preview you can then use the “Transform into blocks” button:

You should now see a preview of your block-based order confirmation page. You can move the blocks around, or select them individually to adjust styling. Once you are ready, remember to click the Update button to save and publish your changes.

Reverting to the Cart and Checkout shortcodes

↑ Back to top

If you experience any issues while using the Cart/Checkout Blocks due to plugin incompatibilities, you may want to switch back to the Cart/Checkout shortcodes. If you experience different types of issues, please report them by opening a new issue.  

Reverting to shortcodes with WooCommerce 8.3+

↑ Back to top

1. Using a block theme: Go to Appearance -> Editor -> Pages -> Select Cart or Checkout -> click the Edit icon
   Using a non-block theme: Go to Pages -> All Pages, and then locate and edit the Cart/Checkout page.
2. Open the List View and select the Cart or Checkout block.
   If you have an incompatible extension installed, a notice will be displayed and you can revert in 1 click.
3. Open the Block Transform menu as seen above.
4. Choose “Classic Shortcode”.
5. The block will be transformed into a Classic Shortcode placeholder block.
6. Save your changes by clicking the Update button in the top bar.

Reverting to shortcodes with WooCommerce <8.3

↑ Back to top

1. Using a block theme: Go to Appearance -> Editor -> Pages -> Select Cart or Checkout -> click the Edit icon
   Using a non-block theme: Go to Pages -> All Pages, and then locate and edit the Cart/Checkout page.
2. Open the List View and select the Cart or Checkout block.
3. Select and delete the Cart or Checkout block.
4. Add a new Shortcode block in its place.
5. Type [woocommerce_cart] or [woocommerce_checkout] in the Shortcode block, depending on whether you want to restore the shortcode-based cart or checkout.
6. Save your changes.

Reverting to the legacy order confirmation page

↑ Back to top

These steps only apply to Block themes.

1. Open the Order Confirmation template in the Site Editor by navigating to Appearance -> Editor -> Templates > Order Confirmation.
2. Open the List View and delete all the special Order Confirmation blocks (hold Shift to select multiple blocks between the current selection and the block you click).
3. Open the Block Inserter, search for and add the Order Confirmation Block as shown above.
4. Save your changes.

Compatible Extensions

↑ Back to top

Compatibility for extensions on WooCommerce.com is marked on the product page. You can expand the Details and compatibility tab on any product to see if it’s compatible with the Cart and Checkout blocks:

Incompatible Extensions

↑ Back to top

If you use an incompatible extension which has declared its incompatibility, a warning and a button to switch to the Classic Checkout with 1-click will appear in the settings sidebar when the Checkout Block or any of its inner blocks are selected:

If you have incompatible payment gateways installed, a warning is also displayed on the Payment Options inner block of the Checkout Block:

Known Incompatibilities

↑ Back to top

The following extensions are known to be incompatible with the Cart and Checkout Blocks. If you are using any of these extensions, we advise you keep using the shortcode-based checkout for now. We’ll be updating this list as more extensions are integrated with the new blocks.

• Afterpay
• AMP (When AMP is enabled and in Standard mode, the Cart and Checkout block pages won’t load)
• CC Avenue Payment Gateway
• Checkout Addons
• Checkout Field Editor
• Donations For WooCommerce
• Dynamic Pricing
• Envia Shipping and Fulfillment
• Google Analytics Pro
• Local Pickup Plus
• Mollie Payments for WooCommerce
• Order Delivery for WooCommerce
• Packlink PRO
• PayU India
• PostFinance Checkout
• Razorpay Payment Gateway
• PDF Product Vouchers
• RedSys Gateway | Pasarela Redsys para WooCommerce
• Sage Pay
• Shipping Multiple Addresses
• Smart Coupons
• Wallee integration for WooCommerce

Extensibility

↑ Back to top

Extensions that use hooks to render additional markup in the cart or checkout pages – for example, custom checkout fields – usually require integration work to support the Cart and Checkout Blocks.

If you are using a plugin that does not work as expected with the Cart and Checkout Blocks, please get in touch with its developers and let them know that you would like to use the new, block-based checkout. To assist developers in this effort, we have published documentation and resources on integrating existing plugins with the Cart/Checkout Blocks and Store API.

Found a plugin on WooCommerce.com that appears to be incompatible? Please open an issue to help us measure demand and prioritize extensibility work on our end.

If you have a third-party plugin that you believe is incompatible, you can contact the plugin developer and refer them to our guidance on declaring compatibility with this new default. Plugin developers should mark their plugins as (in)compatible so users aren’t left to troubleshoot and figure that out themselves.

Frequently Asked Questions

↑ Back to top

Will a page containing a Cart and Checkout block be automatically set as a Cart page and Checkout page?

↑ Back to top

No, you’ll need to change the pages used for the cart and checkout under WooCommerce > Settings > Advanced.

Which shipping methods, payment gateways, and other extensions are supported?

↑ Back to top

Cart and Checkout blocks are compatible with a variety of shipping, payment, and other extensions. For further information, check out our Compatible Extensions section for how to find if an extension from WooCommerce.com is compatible.

Where is the “Allow shoppers to sign up for a user account during checkout” option?

↑ Back to top

If you add the Checkout Block and choose the “Contact Information” inner block, you will see the option  Allow shoppers to sign up for a user account during checkout under “Account options” in the sidebar.

This option will add a checkbox for the user to create an account. However, this won’t be shown until the Allow customers to place orders without an account option in WooCommerce > Settings > Accounts & Privacy is turned on.

Is it possible to go back to the old cart or checkout?

↑ Back to top

Yes, you can remove the Cart or Checkout block from a page and add back the shortcode. Please remember to double-check your page settings in WooCommerce > Settings > Advanced.

Questions and Support

↑ Back to top

Do you still have questions and need assistance? 

• If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the Woo Marketplace.
• Need ongoing advanced support, or a customization built for WooCommerce? Hire a WooExpert agency.
• Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.

If you weren’t able to find the information you need, please use the feedback thumbs below to let us know! 🙏