Cart and Checkout Blocks: Becoming the Default Experience

This post was updated on November 15, 2023, to include instructions on declaring incompatibility with the new experience.

In today’s highly competitive business landscape, merchants need a streamlined and optimized out-of-the-box checkout experience. WooCommerce has been investing in a new seamless checkout flow while harnessing the power of Blocks for easy look and feel customizations without the need for coding. The Cart and Checkout blocks offer conversion-optimized features and a simplified shopper flow. With easy customization options, merchants can maintain their brand identity and provide a visually appealing and consistent checkout journey for their customers.

Over the past months, the Cart and Checkout blocks were available as optional features in WooCommerce Core. Now, the time has come to transition the Cart and Checkout blocks out of the Beta phase and make them the default experience for all new users in the upcoming November release of WooCommerce Core (8.3). This move is crucial as we’re committed to delivering a fast and performant checkout experience and maximizing the value we provide to our users.

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 are continuing to promote, encourage, and equip third-party developers to transition their code to be compatible with the new checkout experience as the future of WooCommerce.

Documentation

All the documentation is available in our GitHub repository. For integration work, the WooCommerce Blocks Handbook is the best starting point. It includes a section specifically dedicated to third-party developers and comprehensive Developer Resources. We also offer components and utilities to aid smoother integrations with the WooCommerce Mini-Cart, Cart, and Checkout Blocks. The components can also be viewed in Storybook.

Declare compatibility with the Cart and Checkout blocks

Declaring compatibility in your extension is straightforward, and helps merchants better understand the root cause if compatibility conflicts arise. Extensions will fall into 3 categories, which will determine next steps to take:

1. If an extension is incompatible with the Cart and Checkout Blocks, it should declare its incompatibility.
2. If an extension is compatible with the Cart and Checkout Blocks, it should declare its compatibility.
3. If an extension isn’t related to the Cart and Checkout flow, then no actions are required.

In order to declare compatibility, you will need to take the following steps:

Declare WC tested up to in your main plugin file(s) using the WooCommerce version support header, WC tested up to:

 /*

 * Plugin Name: WooCommerce Example Extension

 * Plugin URI: https://wordpress.org/plugins/[EXAMPLE EXTENSION]/

 * Description: Sample description

 * Author: WooCommerce

 * Author URI: https://woocommerce.com/

 * Version: 1.0.0

 * Text Domain: woocommerce-example-extension

 * Domain Path: /languages

 * WC requires at least: 6.0

 * WC tested up to: 8.0

 */

As many WordPress extensions aren’t WooCommerce related, we will only check for compatibility in extensions which use the WC tested up to header. 

Next, add the following code snippet to your main plugin file(s) for compatible extensions:

add_action( 'before_woocommerce_init', function() {

    if ( class_exists( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {

        \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'cart_checkout_blocks', __FILE__, true );

    }

} );

Add the following code snippet to your main plugin file(s) for incompatible extensions:

add_action( 'before_woocommerce_init', function() {

    if ( class_exists( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {

        \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'cart_checkout_blocks', __FILE__, false );

    }

} );

How can we help you?

If you need a new extensibility point, utility, or component, you should make a request in our GitHub repository. The WooCommerce team will thoroughly evaluate proposals for missing functionality based on key factors like feasibility, impact on the shopper experience, and priority compared to other roadmap initiatives. The clearer the use case, the better we are able to assess the priority of addressing the request.

If you have any questions during the integration process, our recommendation is to reach out on our GitHub Discussions section Q&A – Extension Integrations and Customizations or in the Community Slack #woocommerce-blocks-and-block-themes channel.

Our team usually prioritizes extensibility/integration-related questions, as they tend to be helpful for expanding the Checkout feature set and improving the shopper experience.

Frequently Asked Questions

Do you plan to add new extensibility options to the Cart and Checkout blocks?

We’re currently exploring introducing new capabilities, such as replacing the “Place order” button with a custom component, to ensure you can easily extend the Blocks experience providing merchants with valuable features to boost checkout conversions, increase shopper engagement, and maximize their lifetime value. We’ll have more news coming soon.

How can the user revert to the Cart and Checkout shortcodes?

The user can switch back to the shortcode-based cart or checkout by doing the following:

1. Click on the Pages menu item, and then locate and edit the Cart or Checkout page.
2. In the Editor, enable the List View and then locate 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 he wants to restore the shortcode-based cart or checkout.
6. Save the changes.

We’re working on a complementary flow that allows users to revert to shortcodes with fewer steps. We’ll publish a post with all the details. 

As we approach the November release of WooCommerce Core, we encourage you to embrace this new experience. Together, we can build a win-win situation for everyone involved and deliver a fast, performant, and shopper-friendly checkout flow.