Getting to Know Woo: Understanding the Architecture of Cart and Checkout Blocks

Co-written by @ralucastn and @nielslange

This is chapter 1 of 5 in the series Getting to Know Woo: A Series on the Cart and Checkout Blocks

As a first installment of our series on getting to know the Cart and Checkout blocks, today we will walk through the main architecture of these blocks. From managing data and order processing to store aesthetics, we’ll dissect their functions and limitations

A look at Our Main Architecture

From a merchant perspective, the Cart and Checkout blocks are parent blocks with a collection of inner blocks: core and user-defined blocks.

The parent blocks handle the framework part: initializing state, fetching data, sharing data between inner blocks, and processing orders.

The inner blocks are responsible for rendering a section of the Cart and Checkout blocks, and communicating changes that happen at their level up to the corresponding parent block.

Despite the flexibility of the blocks, the architecture of the parent blocks is not decoupled, and it won’t be possible to take a core inner block and replace it with a third-party block. Furthermore, to ensure an optimal checkout experience, we lock these core blocks. Therefore, a merchant can’t just delete or move a section because it could jeopardize the checkout experience (and the higher conversion rates we are seeing with the current structure).

When used in a store with a block theme that supports Global Styles, the Cart and Checkout blocks carry on the store branding and enable merchants to have improved control over their aesthetics.

For data, the Cart and Checkout blocks rely on the WooCommerce Store API to interact with the WooCommerce store. This data is fetched from the server and displayed in the blocks. The data is updated as a result of shopper interactions with the blocks.

Next Stop: Customizing Cart and Checkout Fields

In our next article, we’ll tackle extensibility within the Cart and Checkout blocks, showing you how to tailor these blocks to your specific needs. Our first stop will be around understanding how to customize Cart and Checkout Fields. See you there tomorrow!

In the meantime, 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.