---
title: "How to Edit WooCommerce Cart Page in Elementor?"
url: https://theplusaddons.com/docs/edit-woocommerce-cart-page-in-elementor/
date: 2023-12-07
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "\"How do I edit the WooCommerce cart page?\" is one of the most-searched WooCommerce customization questions - and the honest answer with just a theme is: barely at all. The..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Edit-WooCommerce-Cart-Page-in-Elementor_-1024x536.jpg
word_count: 894
---

# How to Edit WooCommerce Cart Page in Elementor?

## 

- The Woo Cart widget in The Plus Addons for Elementor Pro replaces WooCommerce’s fixed cart shortcode block and lets the cart be restyled or rebuilt inside Elementor.
- Layout set to Default keeps WooCommerce’s cart logic and field order, while the Style tab changes typography, row spacing, border colors, and update/checkout button colors.
- Layout set to Custom is confirmed to crash the Elementor editor’s preview, with WordPress logging a PHP Fatal error: Uncaught Error: Call to a member function get_cart() on null in tp_woo_cart.php:3451.
- Empty Cart Icon and Quantity Indicator Style give separate controls for the empty-cart state and the quantity stepper or number field, while the Custom layout can add Cart Data, Cart Total, and Checkout Button blocks.

"How do I edit the WooCommerce cart page?" is one of the most-searched WooCommerce customization questions - and the honest answer with just a theme is: barely at all. The cart page ships as a fixed shortcode block, and most themes only let you tweak colors around its edges.

The **Woo Cart** widget in The Plus Addons for Elementor Pro replaces that block with something you can actually rebuild: keep WooCommerce's own cart logic and restyle it, or lay the cart contents out yourself from a repeater of building blocks.

For the full settings tour of every Woo Builder widget, see [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/).

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Prerequisite:** [WooCommerce](https://wordpress.org/plugins/woocommerce/) installed and active, with at least one published product.- **Edition:** all Woo Builder widgets are part of **The Plus Addons for Elementor Pro** - a Pro licence is required.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Woo Cart** and turn its toggle on.- A product already in the cart to preview against - add any of this site's published products (for example a shoe or a hoodie) to the cart before opening the page in the editor, since an empty cart shows a different state (see Empty Cart State below).

## Two Ways to Edit the Cart Page

The **Layout** control is the first decision to make, and it changes everything else available to you:

- **Default** (the widget's default value) - uses the built-in WooCart layout provided by WooCommerce itself. Best when you want to keep the original cart structure and behaviour, and only restyle it with The Plus Addons' typography, color and spacing controls.- **Custom** - lets you build the cart page yourself from a repeater of individual blocks, described below.

![Layout dropdown, Default vs Custom](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-cart-layout.webp)

### Restyling the Default Layout

With Layout set to **Default**, use the Style tab to adjust the cart table's typography, row spacing, border colors and the update/checkout buttons' colors - without changing WooCommerce's own cart calculation logic or field order.

### Building a Custom Cart Layout

**Known issue - read before using Custom layout:** switching Layout to **Custom** has been confirmed to crash the Elementor editor's preview outright (a bug in the widget itself, not a configuration mistake - see Limitations below). As designed, Custom layout should let you add repeater items and choose what each one shows from a **Select** dropdown:

| Value | What it shows |
| ----- | ------------- |
| Cart Data | The list of products added to the cart - thumbnail, name, quantity, price and a remove option per line. |
| Cart Total | The subtotal/total summary block (and shipping/tax lines, if enabled in WooCommerce). |
| Checkout Button | The button that proceeds to the Checkout page. |

Add these three repeater items in whatever order and column arrangement you intend - for example, Cart Data on the left and a sticky Cart Total + Checkout Button column on the right, a common e-commerce pattern that WooCommerce's own default layout does not offer. **Until the crash below is fixed, build this with Layout left on Default and use the Style tab instead** - the fixed layout with restyling is fully confirmed working.

## Empty Cart State

The widget has its own **Empty Cart Icon** control, letting you choose a custom icon or image to show instead of WooCommerce's plain "Your cart is currently empty" text - worth setting deliberately, since this is the state a first-time visitor often sees before adding anything.

![Empty Cart Icon control and its front-end result](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-empty-cart.webp)

## Quantity Indicator Style

A separate **Quantity Indicator Style** control (further down the Style tab) governs how the quantity stepper/number looks on each cart line item - useful to match your site's button/input styling rather than leaving WooCommerce's default number field.

![Quantity Indicator Style options](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-quantity-style.webp)

## Settings Overview

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Layout | Default (WooCommerce's own cart) or Custom (repeater-built). | Default |
| Select (repeater, Custom only) | Cart Data, Cart Total or Checkout Button block. | Cart Data |
| Empty Cart Icon | Custom icon/image for the empty-cart state. | WooCommerce's default text |
| Quantity Indicator Style | Visual style of the quantity stepper. | Default |

## Common Reasons People Search for This

- Changing the cart page's fonts/colors to match the rest of the site.- Moving the cart total/checkout button next to the product list instead of below it.- Replacing the plain "empty cart" text with something on-brand.- Making the quantity selector match the site's other form inputs.

![The Woo Cart widget (Default layout) rendering a real product added to the cart on the published front end](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-before-after.webp)

## Limitations

- **Confirmed defect:** Layout = Custom crashes the Elementor editor's preview. Reproduced twice: WordPress's own error log shows `PHP Fatal error: Uncaught Error: Call to a member function get_cart() on null in .../tp_woo_cart.php:3451` - the widget calls WooCommerce's cart object without checking it is actually available in the editor-preview request. This is a bug in the widget's own code. Reported as a product issue; Layout = Default is unaffected and fully usable.

## Not verified

So you know exactly what has and has not been checked:

- Whether the Custom layout crash also happens on the published front end (with a real customer session and populated WC()->cart) or only inside the Elementor editor's preview request - not yet tested against a live front-end page load.- Whether the Custom layout's repeater items, if the crash is fixed, can be placed in independent Elementor columns/containers versus only stacking vertically in repeater order.- Exact interaction between Quantity Indicator Style and any theme-level quantity-field CSS, in case of a specificity conflict - not yet tested live.

## Related Docs

- [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/)- [How to Edit WooCommerce Checkout Page in Elementor?](https://theplusaddons.com/docs/edit-woocommerce-checkout-page-in-elementor/)- [How to Create WooCommerce Multi Step Checkout in Elementor?](https://theplusaddons.com/docs/create-woocommerce-multi-step-checkout-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before editing the WooCommerce cart page in Elementor?**
A: Elementor free and WooCommerce both need to be installed and active, and WooCommerce should already have at least one published product. The Plus Addons for Elementor Pro is also required because the Woo Cart widget is part of the Pro Builder widgets. A practical gotcha is that you should add a product to the cart before opening the page in the editor, since an empty cart shows a different state and can hide the layout you actually want to inspect.

**Q: Should I use the default cart layout or build a custom one?**
A: Default is the safer choice when you want WooCommerce’s own cart structure and behavior, then just restyle fonts, colors, spacing, and button colors. Custom is for rebuilding the page from repeater blocks like Cart Data, Cart Total, and Checkout Button. The tradeoff matters: Default keeps WooCommerce’s calculation logic and field order intact, while Custom is meant for more control but currently has a confirmed preview crash in the editor.

**Q: Why does the Elementor preview crash when I switch the cart layout to Custom?**
A: That crash is a confirmed defect in the widget itself, not a setup mistake. The error log shows a PHP fatal error calling get_cart() on null inside tp_woo_cart.php:3451, which means the widget is trying to access WooCommerce’s cart object when it is not available in the editor-preview request. In practice, Layout = Default still works normally, so that is the reliable option until the bug is fixed.

**Q: How can I restyle the WooCommerce cart without changing its logic?**
A: Set Layout to Default and work from the Style tab. That lets you change cart table typography, row spacing, border colors, and the update or checkout button colors while keeping WooCommerce’s own cart calculation logic and field order untouched. This is the cleanest path when you only need visual consistency with the rest of the site and do not want to risk changing how totals or line items behave.

**Q: Can I move the cart total and checkout button next to the product list?**
A: That layout pattern is what Custom mode is designed for. The repeater can place Cart Data on one side and Cart Total plus Checkout Button in another column, which matches common e-commerce layouts better than WooCommerce’s default stacked structure. The catch is that this only becomes useful once the Custom preview crash is resolved, so for now that arrangement is more of a target design than a stable editing workflow.

**Q: How do I change the empty cart message and quantity selector style?**
A: The widget gives you two separate controls for those details. Empty Cart Icon lets you replace WooCommerce’s plain “Your cart is currently empty” text with a custom icon or image, which matters because first-time visitors often see that state first. Quantity Indicator Style controls how each line item’s quantity stepper or number field looks, so it can match your site’s other form inputs instead of keeping WooCommerce’s default field styling.