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.