Customizing the Cart and Checkout Pages

The Cart and Checkout pages are a critical part of the shopping experience. The WooCommerce Cart and Checkout blocks provide customers with a seamless process for reviewing and finalizing their purchases in a low-friction way that maximizes conversion. Here we cover the templates and blocks associated with these pages along with details around upgrading to the new experience, customization, and configuration so their appearance and functionality match your store’s design and needs.

• Customizing the Cart Page
• Customizing the Checkout Page
• Mini Cart Block

Customizing the Cart Page

↑ Back to top

The Cart template displays the items selected by the customer for purchase, including quantities, prices, and discounts. It allows customers to review their choices before proceeding to checkout. The Cart block is the main component of this template, combining multiple WooCommerce blocks to display products, order totals, shipping, and checkout options.

For detailed guidance on accessing the Cart template, configuring the Cart block, and reverting to the Classic Cart, see Customizing the Cart Page.

Customizing the Checkout Page

↑ Back to top

The Checkout template guides customers through the final steps of the purchase process. It enables customers to enter shipping and billing information, select a payment method, and review order details. The Checkout block is the main container block of this template, bringing together all the key steps of the checkout process.

For detailed guidance on accessing the Checkout template, configuring the Checkout block and its header, and reverting to the Classic Checkout, see Customizing the Checkout Page.

Using the Cart and Checkout Blocks

↑ Back to top

For WooCommerce stores started after the release of version 8.3 in November 2023, the Cart and Checkout blocks are the default experience, no setup is required to put the cart and checkout blocks in place, if your site is using a block theme you can get right to customizing the templates to fit your needs. No customization is required for the block cart and checkout to function.

Replacing the existing Cart and Checkout shortcodes

↑ Back to top

To replace a Cart or Checkout shortcode, open the corresponding page in the editor. Select the Shortcode block and delete it. Use the block inserter to add the Cart or Checkout block, then review the page and save your changes. Repeat for the other page.

Reverting to the classic Cart and Checkout

1. If using a block theme: Go to Appearance -> Editor -> Pages -> Select Cart or Checkout -> click the Edit icon
   If using a non-block theme: Go to Pages -> All Pages, and then locate and edit the Cart/Checkout page.
2. Open the List View and select the Cart or Checkout block.
3. Click the “Transform” button, which is leftmost in the block toolbar
4. Choose “Classic Shortcode”.
5. The block will be transformed into a Classic Shortcode placeholder block.
6. Save your changes by clicking the Save button in the top bar.

Note: Since the cart and checkout blocks work together, if you’re reverting to the classic version of the cart and checkout experience, you’ll want to revert both the cart and checkout to the classic shortcode version.

Reverting to the Classic Cart and Checkout

↑ Back to top

Both the cart and checkout blocks can be transformed back to the classic version using the transform button in the block toolbar. For step-by-step instructions, see:

• Reverting to the Classic Cart
• Reverting to the Classic Checkout

Store Notices Block

↑ Back to top

Both the cart and checkout page templates use the Store Notices block. The Store Notices block is where your shop displays shopper-facing notifications generated by WooCommerce or extensions. For example when an item is successfully added to the cart, the notification will show here. The store notices block can be added to any page or template of your site.

Block Styles

↑ Back to top

Since notifications of different types each have their own styling, there are no style settings for this block.

Mini Cart Block

↑ Back to top

The Mini Cart Block gives customers a quick overview of their cart contents from pages where the block is displayed. The guide below explains the functionality of the Mini Cart Block and provides instructions for customizing its appearance and behavior to ensure a smooth and convenient shopping experience.

Explore the settings and options for customizing the Mini Cart block.

Mini-Cart Drawer Template Part

↑ Back to top

The Mini-Cart block uses a template part to display the contents of the Mini-Cart. Check the Mini-Cart page for more details on accessing and editing that template part.

Checking extension compatibility

↑ Back to top

Before you install an extension, check its changelog and product description for notes on Cart and Checkout block support. If it’s still unclear, contact the extension’s developer using our support form.

After installation, WooCommerce can show a warning in the editor if an active extension has declared itself incompatible with the blocks. See Incompatible Extensions below.

Incompatible Extensions

↑ Back to top

In the editor, select the Cart or Checkout block, or one of its inner blocks. A warning can name active extensions that declare themselves incompatible and offer a button to switch to the classic experience. A warning you previously dismissed may not appear again. If more names are hidden, select the count of additional incompatibilities to show them. If you don’t see a warning, check the extension’s documentation or contact its developer to confirm compatibility.

Incompatible extensions may cause elements of the checkout to not be available as expected. For example if your payment gateway isn’t compatible with the block version of the checkout, it may not appear as a payment option on the checkout page.

If an extension doesn’t work as expected with the Cart or Checkout blocks, contact its developer to ask about compatibility. Developers can use the Cart and Checkout block integration guidance.

See our primer on using Blocks for more information about swapping back to classic templates if you encounter any incompatibility issues.

Why are my customers seeing “There are no payment methods available” at checkout?

↑ Back to top

If you’re using the checkout block, and only have incompatible payment gateways installed and active, there won’t be any payment methods available at checkout, and so a warning is displayed on the checkout page.

In the block settings sidebar of the Payment Options inner block of the Checkout Block, you’ll see an option to switch back to the classic checkout with a single click.

If the Checkout block has no supported payment methods, the editor displays a notice in the Payment Options section. Select Configure Payment Options to review your payment methods.

Extensibility – Developers

↑ Back to top

Extensibility interfaces for the Cart and Checkout Blocks are still under active development. If you are developing extensions or customizations that integrate with the WooCommerce cart and checkout, we highly encourage you to follow our progress and provide feedback on GitHub.

Extensions that use hooks to render additional markup in the cart or checkout pages – for example, custom checkout fields – usually require integration work to support the Cart and Checkout Blocks.

Found a plugin on WooCommerce.com that appears to be incompatible? Please open an issue to help us measure demand and prioritize extensibility work on our end.

Questions and support

↑ Back to top

Do you still have questions and need assistance? 

• 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.