# Woo Cart

Found in the Elementor panel under **Dotjuice → Woo Cart**. Requires WooCommerce (does not require Elementor Pro).

## How it works

Place this widget on your Cart page template. It renders your shopper's current cart — items, coupon box, and totals — built independently of WooCommerce's default cart template, so it's fully restyled from the ground up.

## Layout settings

| Setting | Default | What it does |
|---|---|---|
| **Desktop Layout** | 2 columns | Two columns (cart items beside the totals panel) or one column (stacked). |
| **Totals Column Width** | 340px | Two-column layout only — the width of the totals sidebar. |
| **Gap Between Columns** | 32px | Spacing between the two columns. |
| **Show Coupon Field** | On | Displays the coupon code box. Only actually appears if your store's own WooCommerce settings have coupons enabled — if you've disabled coupons store-wide, this setting has no effect. |
| **Show Update Cart Button** | On | See below — this controls how quantity changes are handled. |

## Instant AJAX updates vs. the Update Cart button

This is the most important setting on this widget, so it's worth understanding both modes:

**With "Show Update Cart Button" on (default):** shoppers change a quantity, then click a visible **Update Cart** button (which stays disabled until something has actually changed) to apply it — a standard, familiar cart flow with a normal page action.

**With "Show Update Cart Button" off:** there's no button at all. Instead, changing any quantity automatically updates that row's subtotal and the whole totals panel via AJAX, a fraction of a second after the shopper stops adjusting it — no page reload, no button click needed. This is the more modern, "instant" feeling option.

Choose whichever fits your store's style — both are fully functional, it's a matter of preferred shopping experience.

## Setting it up

1. Add the widget to your Cart page Elementor Theme Builder template.
2. Choose your column layout and decide on AJAX vs. button-based quantity updates.
3. Work through the style sections below to match your store's design.
4. Test by adding a product to your cart and viewing the page as a real shopper would.

## Styling

Extensive styling is available: **Cart Item** rows, **Thumbnail**, **Product Name** (including variation details), **Price/Quantity/Subtotal** (including the quantity stepper's plus/minus buttons), **Remove Button**, **Buttons** (a shared style applying to the coupon Apply button, the Update Cart button, and the Checkout button together), **Form Fields** (the coupon input and quantity field), **Products Box** (the card containing your item rows), **Coupon Box**, and **Totals Box**. If you use the Printful shipping plugin, an additional style section for its shipping calculator appears automatically.

## Good to know

- **The "Checkout Button Text" field only affects the editor preview** — on the live cart page with real items, the checkout button's text comes from WooCommerce's own settings rather than this field. The button's *styling* (colour, padding, etc. from the shared Buttons section) does apply live — it's specifically the text on this one field that's preview-only. If you need to change the actual live checkout button text, that's done through WooCommerce's own settings rather than this widget.
- While your own cart is empty, the Elementor editor shows a sample two-item cart purely so you have something to style against — this never appears to real shoppers, who see a genuine "Your cart is empty" message with a link back to your shop.
- Removing an item is instant (AJAX) regardless of the Update Cart Button setting.