Getting to Know Woo: Customizing Cart and Checkout Fields

Co-written by @ralucastn and @nielslange


In our previous post in this series, we learned about the architecture of the Cart and Checkout blocks. Now, we’re ready for our first stop on covering extensibility in this series: the customization of content in the Cart and Checkout blocks.

In this post, we’ll delve into the intricacies of adding custom inner blocks, Slot and Fill (a tool that gives you the possibility to render your own HTML in pre-defined places in the Cart and Checkout blocks), as well as how to expose your data through the Store API, enabling you to wield greater control over a store’s checkout experience.

Adding Custom Content to the Cart and Checkout Blocks

Inner Blocks

When it comes to customizing the content of the Cart and Checkout blocks, adding custom inner blocks is the main and recommended way. You can create custom blocks that can be inserted automatically or optionally, moved or locked to a place, can be edited, and have attributes and settings, just as the core inner blocks.

Image of the Checkout Block
The Checkout block has several areas in which inner blocks can be registered and added. Once registered, blocks can be inserted by merchants.

For information about creating and configuring an inner block see our documentation on GitHub about Inner Blocks or check out our Extending the WooCommerce Checkout Block tutorial:


Slot and Fill

Another tool for adding your custom content in specific places in the Cart and Checkout blocks is Slot and Fill. It gives you the possibility to render your own HTML in pre-defined places in the Cart and Checkout blocks. Your component will get access to contextual data and will get re-rendered when needed.

Available Slots

Please note that the list might change as we are continuously working on graduating or removing experimental features.

Read more about Slot and Fill on our GitHub documentation files:


ExperimentalDiscountsMeta

This slot renders above the Shipping section on the Cart block.

Example of a Fill using the ExperimentalDiscountsMeta Slot in the Cart block

The following code snippet is for demonstration purposes only and does not reflect the previous screenshot:

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';

const render = () => {
  return (
    <ExperimentalDiscountsMeta>
      <div class="wc-block-components-totals-wrapper">
        {
          __( 'You have 98683 coins to spend ...', 'YOUR-TEXTDOMAIN' )
        }
      </div>
    </ExperimentalDiscountsMeta>
  );
};

registerPlugin( 'slot-and-fill-examples', {
  render,
  scope: 'woocommerce-checkout',
} );

ExperimentalOrderLocalPickupPackages

This slot renders inside the Pickup Method section on the Checkout block.

The following code snippet is for demonstration purposes only and does not reflect the previous screenshot:

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { ExperimentalOrderLocalPickupPackages } from '@woocommerce/blocks-checkout';

const render = () => {
  return (
    <ExperimentalOrderLocalPickupPackages>
      <div>
        {
          __( 'By using our convenient local pickup option, you can come to our store and pick up your order. We will send you and email when your order is ready for pickup.', 'YOUR-TEXTDOMAIN' )
        }
      </div>
    </ExperimentalOrderLocalPickupPackages>
  );
};

registerPlugin( 'slot-and-fill-examples', {
  render,
  scope: 'woocommerce-checkout',
} );

ExperimentalOrderMeta

This slot renders below the Order Summary section and above the Proceed to Checkout button on the Cart block.

Example of a Fill using the ExperimentalOrderMeta Slot in the Cart block

The following code snippet is for demonstration purposes only and does not reflect the previous screenshot:

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';

const render = () => {
  return (
    <ExperimentalOrderMeta>
      <div class="wc-block-components-totals-wrapper">
        {
          __( 'Yearly recurring total ...', 'YOUR-TEXTDOMAIN' )
        }
      </div>
    </ExperimentalOrderMeta>
  );
};

registerPlugin( 'slot-and-fill-examples', {
  render,
  scope: 'woocommerce-checkout',
} );

ExperimentalOrderShippingPackages

This slot renders inside the shipping step of Checkout and inside the shipping options in Cart.

Example of a Fill using the ExperimentalOrderShippingPackages Slot in the Cart block

The following code snippet is for demonstration purposes only and does not reflect the previous screenshot:

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { ExperimentalOrderShippingPackages } from '@woocommerce/blocks-checkout';

const render = () => {
  return (
    <ExperimentalOrderShippingPackages>
      <div>
        {
          __( 'Express Shipping', 'YOUR-TEXTDOMAIN' )
        }  
      </div>
    </ExperimentalOrderShippingPackages>
  );
};

registerPlugin( 'slot-and-fill-examples', {
  render,
  scope: 'woocommerce-checkout',
} );

Exposing Your Data in the Store API

ExtendRestApi

When you are extending the Cart and Checkout blocks, you might need to access some custom, business-related logic. If you would rather not create your own endpoints, you can append your data to the WooCommerce Store API using ExtendRestApi.

ExtendRestApi offers the possibility to add contextual custom data to the wc/store/cart and wc/store/cart/items endpoints. The data, which will live under the extensions key, is namespaced to your plugin and protected from other plugins causing it to malfunction. The data is available on all Frontend filters and Slot and Fill for you to consume.

For information about handling GET and POST requests, see our GitHub documentation:

Next Stop: Modifying existing Cart and Checkout Block Fields

In our next article, we’ll tackle the modification of existing Cart and Checkout block fields, allowing you to manipulate certain values through the use of a Filter registry, similar to the traditional filter system in WordPress. 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.

4 responses to “Getting to Know Woo: Customizing Cart and Checkout Fields”

  1. As far as I understand the inner blocks, as presented in chapter 2 of the tutorial series, need to be run through the Node.js environment, while the JS filter snippets from this chapter can be simply output in the page’s HTML without running them through the Node.js environment. Is that correct?

    And note, the first screenshot (where on the page should the code snippet load) is from the “Simple Custom CSS and JS” plugin, while you’ve referenced another plugin in a previous sentence.

    1. Thanks for reaching out, Diana.

      As far as I understand the inner blocks, as presented in chapter 2 of the tutorial series, need to be run through the Node.js environment, while the JS filter snippets from this chapter can be simply output in the page’s HTML without running them through the Node.js environment. Is that correct?

      I see that Thomas already mentioned this question in https://developer.woo.com/2023/09/20/getting-to-know-woo-modifying-existing-cart-and-checkout-block-fields/#comment-12088.

      And note, the first screenshot (where on the page should the code snippet load) is from the “Simple Custom CSS and JS” plugin, while you’ve referenced another plugin in a previous sentence.

      It appears that you are referring to the first screenshot in https://developer.woo.com/2023/09/20/getting-to-know-woo-modifying-existing-cart-and-checkout-block-fields/, instead of in this post here, correct? The screenshot indeed shows the Simple Custom CSS and JS plugin, while the post mentioned the Code Snippets plugin. I’ll correct this accordingly.

  2. helphighaddons Avatar
    helphighaddons

    Hi,

    How we can reposition the new block inside Billing or Shipping fields. At the moment the new block is placed below the Billing, Shipping fields, I want to add thew new block suppose after country field.

    Thank you.

    1. Hi there, currently it’s not possible to choose where the block is rendered with that level of granularity due to the way the billing and shipping address blocks are built (they are not made up of inner blocks), however on our Roadmap we have Custom Checkout Fields listed as something we’ll be working on.

Leave a Reply

Your email address will not be published. Required fields are marked *