The Checkout block is part of a simplified, conversion-optimized checkout flow. It’s where customers complete their purchase by entering shopping and payment information.
This page provides an overview of the structure of the checkout block, its settings, and customization options you can use to control your store’s brand identity, and tailor a visually appealing checkout journey for customers.
Note: You can add the checkout block on any page you like, but for everything to function properly you’ll need to designate your chosen checkout page in your shop’s advanced settings at WooCommerce > Settings > Advanced.
Checkout Block Structure
↑ Back to topThe Checkout Block has two main inner blocks, one for Checkout Fields, another for Checkout Totals – two key components which create the checkout experience. Use List View to see how all the blocks fit together.
Many of the inner blocks that make up the checkout block are completely dynamic and behave based on how your other settings in WooCommerce are configured.
For example, the Payment Options block will display all payment methods that are available in your shop and compatible with the checkout block, according to their configuration in your payment gateway’s settings. These inner blocks which have no settings to configure in the block editor are not listed in this documentation. You can click through them in 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.
Checkout Block Settings
↑ Back to topThe checkout block itself only has one setting to configure in the block settings sidebar.
- Dark Mode Inputs – Toggle this setting on to style the checkout form fields and other inputs appropriately for use on dark backgrounds.
Checkout Fields Block
↑ Back to topThe checkout fields block contains all the fields where your customers will enter their information so they can complete their purchase. It has inner blocks for each of the different fields of the checkout form, most of these inner blocks are completely dynamic and behave based the current customer’s order, and how your settings in WooCommerce are configured.
The Checkouts Fields block is the first block nested inside the main Checkout block and contains the following settings, which are shared with the Shipping and Billing Address blocks. Changing them on one block will change them on the others.
- Form Step Options – Toggle this setting to add numbers to section headings to create a guided checkout flow.
- Address Fields – Using this setting you can toggle the visibility of the “Company” “Address Line 2” and “Phone” fields, as well as whether the 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 from the List View. Some have additional settings which are outlined below. The majority of the checkout field blocks dynamically display content based on your store’s configuration and the current customer.
Express Checkout
↑ Back to topThe Express Checkout block displays content only if a payment gateway is active that supports express checkouts like WooPay, ApplePay, GooglePay, etc. The block has no additional settings of its own. To enable express checkout methods for your shop we recommend using WooPayments if it’s available in your area.
Delivery Block
↑ Back to topThe Delivery block is where your customers will choose between having their order shipped, or picking it up locally. includes options in the settings sidebar to customize its appearance.
This block and the Pickup Method block will only display if the block version of Local Pickup has been enabled at WooCommerce > Settings > Shipping > Local Pickup and the checkout page being edited is designated as the Checkout Page (under WooCommerce > Settings > Advanced.)
Appearance
- Show Icon: Display an icon next to the delivery options to visually differentiate them.
- Show Costs: Include the delivery costs alongside each option to provide customers with transparent pricing information.
Shipping Address
↑ Back to topThe settings in this block are the same as those found in the Checkout Fields block. The settings are linked, meaning a change in one location changes it in the other.
Terms and Conditions
↑ Back to topThe Terms and Conditions block facilitates customer acknowledgement 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 that confirms 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 the Terms and Conditions and Privacy Policy pages. Learn more in the Page Setup and Privacy Policy documentation respectively.
Actions
↑ Back to topThe Actions block provides additional navigation options for customers during checkout.
- Navigation Options – Toggle the ‘Show a “Return to Cart” link’ setting to show or hide a link that will take customers back to the 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 what page the link should return shoppers to.
Checkout Totals Block
↑ Back to topThe Checkout Totals block is a column that contains inner blocks showing an order summary, a coupon entry form, as well as a listing of the different costs that make up the order total. All but one of these inner blocks are locked. The 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 which is unlocked and can be removed.
Local Pickup Delivery Option
↑ Back to topWhen you have the Checkout Block in place on your site’s designated checkout page the new local pickup settings page becomes available. WooCommerce Blocks: Local Pickup is a new enhanced delivery method that allows you to easily offer one or more pickup locations to your customers. Enabling this option and configuring a pickup location at WooCommerce > Settings > Shipping > Local Pickup causes the Delivery and Pickup Method blocks to display in your site’s checkout block, enabling a streamlined method for your shoppers to select a pickup location for their order.
Learn more about configuring the block version of Local Pickup.
Questions and Support
↑ Back to topDo 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. Searching there 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 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! 🙏