Cart block

The Cart block in WooCommerce allows customers to review and manage the items they intend to purchase. It offers options for updating quantities and removing products, as well as reviewing shipping options and adding coupons to the order.

This page explains the components of the Cart block and how to customize both its filled and empty states.

Before you start, make sure the page uses the Cart block and that you have permission to edit it. Editing a cart template in the Site Editor requires a block theme and template-editing permission.

Cart states

↑ Back to top

The Cart block has two customizable states:

• Filled Cart 
• Empty Cart 

If you open the List View, you’ll see that the cart template contains a block named Cart. This Cart block has these two states nested inside of it. Each state contains distinct elements and customization options. 

Open the page or template that contains the Cart block. In List View, select the parent Cart block, then choose Switch view in its toolbar and select Filled Cart or Empty Cart. The editor displays the state you selected so you can edit its blocks. If Switch view is not available, select the parent Cart block in List View rather than one of its child blocks.

Filled Cart

↑ Back to top

Most blocks in the filled cart state contain dynamic content, depending on what your customers have in their cart. As such, most are locked; they cannot be removed or rearranged. 

Cart Items

The Cart Items section includes a block displaying the line items in the cart, as well as a subsection displaying cross-sells.

The Product Quantity block supports color, border, radius, and shadow settings. Site-wide styles for that block also apply to the quantity selectors in Cart Items. A style applied to one Product Quantity block changes that block instance; use site-wide styles when you want the shared Cart quantity selectors to use the same appearance.

Save for Later in Cart

The experimental Save for Later in Cart feature lets logged-in shoppers move published products from their cart to a saved-for-later list. When enabled, WooCommerce adds the Saved for Later list after a block-based Cart on pages that contain one. The page does not need to be assigned as the store’s Cart page. The editor allows one Saved for Later block per page.

Requirements

• Feature enabled: Turn on Save for Later in Cart under WooCommerce > Settings > Advanced > Features.
• Logged-in shoppers: Shoppers must be logged in. The save-for-later controls are hidden for guests.
• Block-based Cart: The page needs a Cart block. A classic cart shortcode does not provide a location for the Saved for Later list.
• Published products: Only published products can be saved for later.

When the feature is enabled, signed-in shoppers see a Save for later link beside eligible items in the block-based Cart. The link is hidden in the mini-cart. To check the flow, select Save for later beside an eligible published product. Confirm it appears in the Saved for Later list below the Cart, then select Move to cart to return it.

If the Save for later link is missing, check that the feature is enabled, you are signed in, the item is a published product, and the page uses the Cart block rather than the classic cart shortcode. If you turn the feature off, the editor shows a notice that the block will not appear on your store and links to the feature setting. The saved block renders no content on the storefront while the feature is disabled.

Saved items appear automatically in the Saved for Later list after the Cart block. Products in that list include a Move to cart action when they can be added back to the cart.

For product-page saving, see the Wishlists section in the Add to Cart + Options Block documentation.

Cross-Sells

Cross-sells are product recommendations displayed in the Cart before checkout.

To change the recommendations, expand Cart, Filled Cart, and Cart Items in List View, then select the Product Collection used for Cross-Sells. In the block settings, choose whether to show cross-sells linked to items in the cart or products linked to one specific product. You can also change the layout and which products appear. For details, see the Product Collection block guide.

The Product Collection block powering Cross-Sells includes several block settings to control how products are displayed:

• Linked Product: Show products based on items in the Cart or select a specific product.
  • From products in the cart: Displays cross-sells linked to the items currently in the customer’s cart.
  • From a specific product: Allows you to select a single product, and its linked cross-sells will be shown regardless of what is in the cart.
• Order By: Define the order of products (e.g., alphabetically).
• Layout Style: Display products in a Stack, Grid, or Carousel.
• Width: Set the block to either stretch and fill available space (Fill) or remain at a fixed width.
• Products per Page: Adjust how many products appear on each page.
• Columns: Control the number of columns in the layout, with a responsive option to adapt for smaller screens.
• Max Pages to Show: Limit the number of cross-sell product pages (set 0 to show all).
• Filters: Refine results by showing only products on sale or by stock status (In stock, Out of stock, On backorder).

The Cross-Sells section is unlocked and can be removed or rearranged if desired. If no recommendations appear, check that the cart contains products with linked cross-sells and that the Product Collection uses products linked to items in the cart.

Cart Totals

In the Cart Totals section, both the Order Summary heading and coupon form are unlocked and can be removed. The Proceed to Checkout block contains a setting to change the destination link for the Proceed to Checkout button, allowing you to direct customers to a specific checkout page.

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

Empty Cart

↑ Back to top

By default, the Empty Cart state displays a Your cart is currently empty! message, with a Newest Products block that recommends your shop’s newest products below it. Each of these elements can be removed or rearranged to suit your needs. Select the message in the editor to change its text.

The Newest Products block allows you to control the number of products displayed, and choose whether or not to show additional details (such as product image, title, price, rating, and Add to cart button). Preview the Empty Cart state to check that the message and product recommendations fit your store. Switch back to Filled Cart in the parent Cart block’s toolbar when you finish.

Save the page or template when you finish. On your storefront, check the Filled Cart with a product in your cart, then remove the product to check the Empty Cart. Confirm the quantity controls, cross-sells, totals, and checkout link behave as intended.

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.