“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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Prerequisite: Elementor (free) installed and active.
- Prerequisite: 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.
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.
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.
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.
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.
