Cart page builder

Cart layouts replace the standard WooCommerce cart with a custom design created in Gutenberg, Elementor, or WPBakery. The regular cart and empty-cart state use separate layout types.

Create a Cart layout

1. Navigate to Dashboard -> Layouts -> Cart and click the add button.

2. Select Cart as the layout type and enter the layout name.

3. Choose a predefined design or start with a blank layout, then click Create layout.

4. Add the cart elements and supporting content, then publish the layout.

Cart elements

• Cart table — displays the products in the cart, including product images, titles, prices, quantity controls, removal actions, and the coupon form.
• Cart totals — displays the subtotal, available shipping methods, total, and the checkout action.
• Free gifts — displays eligible gifts when the Free gifts feature is configured.
• WooCommerce notices, hooks, breadcrumbs, checkout steps, and shipping progress bar — add supporting WooCommerce information where required.

Regular page-builder elements can be used for headings, trust information, banners, recommendations, and other content around the cart.

Create an Empty cart layout

The Empty cart layout is displayed when the customer’s cart contains no products.

1. Open Dashboard -> Layouts -> Cart and create another layout.

2. Select Empty cart as the layout type.

3. Choose a predefined design or create a blank layout.

Add the Empty cart element to output the empty-cart message and return-to-shop action. You can place other blocks or widgets around it.

Layout availability

Cart and Empty cart are global layout types and do not have configurable Include or Exclude conditions. Use one published layout for the regular cart and one for the empty-cart state.

Plugin compatibility

If content from a WooCommerce extension is missing from the custom cart, see WooCommerce hooks and plugin compatibility.