Checkout block

The Checkout block lets customers complete a purchase by entering their contact, delivery, and payment information.

This reference explains the Checkout block’s structure, settings, and customization options. Open your designated Checkout page in the block editor to inspect these controls.

Note: You can add the Checkout block to any page, but, for everything to function properly, you’ll need to first designate your chosen checkout page in your store’s advanced settings via WooCommerce > Settings > Advanced.

Checkout block structure

↑ Back to top

The Checkout block contains two main inner blocks, Checkout Fields and Checkout Totals — two key components of the checkout experience. Use the List View to see how these blocks fit together.

Payment methods available during checkout depend on your active gateways and whether they support the Checkout block. In the editor, Payment Options lists active payment integrations and marks integrations identified as incompatible. See Checkout-compatible extensions and manage your payment gateway settings.

Some inner blocks have no settings to configure in the block editor. Select them using the List View to see a description of each inner block in the settings sidebar.

Where possible, in the Settings sidebar, these blocks will point you to the relevant settings in WooCommerce so you can configure them.

Payment Options block settings listing active methods and the Manage payment methods link.
Use the Payment Options sidebar to open payment method settings.

Checkout block settings

↑ Back to top

The Checkout block has two settings in its sidebar: Show form step numbers adds numbers to checkout section headings, and Dark mode inputs styles form controls for dark backgrounds.

Checkout Fields block

↑ Back to top

The Checkout Fields block contains the fields where a customer enters their information to complete their purchase. It contains inner blocks for each field; most of these inner blocks are dynamic. Their behavior is based on:

The Checkout Fields block is one of the two main blocks nested inside Checkout. Its Address Fields settings are also available in the Shipping and Billing Address blocks; changing a shared setting in one block updates the others.

  • Address Fields: Use this setting to toggle the visibility of the Company, Address Line 2, and Phone fields. You can also set whether Address and Phone fields are required to complete checkout.

Additional blocks are nested inside the Checkout Fields block, all of which can be repositioned or renamed via the List View. Some contain additional settings, which are outlined below.

Express Checkout

↑ Back to top

The Express Checkout block displays content only if a payment gateway that supports express checkouts (WooPay, ApplePay, Google Pay, etc.) is active. This block has no additional settings. To enable express checkout methods, we recommend using WooPayments (if it’s available in your area).

Delivery block

↑ Back to top

The Delivery block is where customers can choose between shipping their order or picking it up locally. It includes options in the Settings sidebar for customizing its appearance.

For the local-pickup option in the Delivery block and the Pickup Method block to appear:

  • Enable the block version of Local Pickup in WooCommerce > Settings > Shipping > Local Pickup, and configure a pickup location or method. The Delivery block also requires a shippable cart and calculated shipping options.
  • Designate the page being edited as the Checkout page in WooCommerce > Settings > Advanced.
Checkout Delivery block in the editor with Ship and Pickup choices and their icons.
The Delivery block offers shipping and local pickup when pickup is enabled and available.

Appearance

  • Show Icon: Displays an icon next to the delivery options to visually differentiate them.
  • Show Costs: Includes delivery costs alongside each option to provide customers with transparent pricing information.

Shipping Address

↑ Back to top

The settings in this block are the same as those found in the Checkout Fields block. These settings are linked, meaning a change in one location changes it in the other.

Terms and Conditions

↑ Back to top

The Terms and Conditions block facilitates customer acknowledgment of your store policies before a purchase can be completed.

  • Require Checkbox: Toggle this setting to make it mandatory for customers to check a box confirming their agreement to the terms and conditions before they can proceed with their order.

Automatically link to your store’s policies in the block’s content by specifying your Terms and Conditions and Privacy Policy pages.

Learn more about page setup and privacy policy options. 

Actions

↑ Back to top

The Actions block provides additional navigation options for customers during checkout.

  • Navigation Options: Toggles the Show a Return to Cart link setting to show or hide a link that takes customers back to their cart to make changes.
  • Return to Cart Button: When the return to cart link is enabled, a drop-down menu displays where you can select which page the link should return shoppers to.

Checkout Totals block

↑ Back to top

The Checkout Totals block contains inner blocks displaying an order summary, a coupon entry form, and a list of the costs that make up the order total. All but one of these inner blocks are locked. These inner blocks can be moved up or down from their default location, but not removed.

The Coupon Form is the only block in the checkout totals section that is unlocked and can be removed.

At a Checkout block container width of 920 pixels or more, the layout uses two columns with a 360-pixel order-summary sidebar. At 919 pixels or less, the layout stacks into one column. These breakpoints use the Checkout block container width, not the browser viewport width.

Local Pickup delivery option

↑ Back to top

To show local pickup options at checkout, add the Checkout block to your designated checkout page, then enable and configure the block version of Local Pickup.

Local Pickup in WooCommerce blocks allows you to offer one or more pickup locations to your customers. Enabling this option (and configuring a pickup location via WooCommerce > Settings > Shipping > Local Pickup) displays the Delivery and Pickup Method blocks in your site’s Checkout block — a more streamlined way for shoppers to select a pickup location for their order.

This is different from the legacy local pickup options that were previously configurable when setting up shipping zones.

Review options for Local Pickup in WooCommerce blocks.

Questions and support

↑ Back to top

Do you still have questions and need assistance? 

This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.

If you haven’t created a WordPress.org account to use the forums, here’s how.

  • If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
  • Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
  • 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.

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.