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.
Note: You can add the cart block on any page you like, but for everything to function properly you’ll need to designate your chosen cart page in your shop’s advanced settings at WooCommerce > Settings > Advanced. You can only have one cart page designated at a time.
Cart States
↑ Back to topThe Cart block has two states which you can customize:
If you open the list view you’ll see that the cart template contains a block called “Cart”, which has these two states nested inside of it. Each state has distinct elements and customization options.
While you have any block inside the main Cart Block selected, in the block toolbar you’ll see the option to adjust which state you’re viewing. Or you can select a block from either the Filled or Empty Cart from the list view and the appropriate state will be displayed.
Filled Cart
↑ Back to topMost blocks in the filled cart state have dynamic content depending on what your customers have in their cart. As such, most are locked and cannot be removed or rearranged.
Cart Items
The Cart Items section includes a block that displays the line items in the cart, as well as a subsection that displays cross sells.
Cart Cross-Sells Block
From the Block settings in the sidebar, you can configure how many Cross-Sells products are visible on the Cart page by using the slider. You can choose between 1 and 6 visible products in the cross-sells area.
The Cart Cross Sells section is unlocked and can be removed entirely if desired.
Cart Totals
In the Cart Totals section, the “Order Summary” heading and the “Coupon form” are unlocked and can be removed. Additionally, the Proceed to Checkout block has a setting to change the destination link for the “Proceed to Checkout” button, allowing you to direct customers to a specific checkout page.
Empty Cart
↑ Back to topBy default the Empty Cart state has a “Your Cart is Empty” message above and a section with a “Newest Products” block that recommends your shop’s newest products below. All of these elements can be removed or rearranged to your needs. You can edit the text by clicking on it in the editor.
The “Newest Products” block has settings so you can control the number of products displayed and choose whether or not to show details like the product image, title, price, rating, and add to cart button.
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. 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.