WooCommerce · Elementor
WC Cart widget for Elementor
The WooCommerce cart shortcode, styled in Elementor. Use on a cart template, not on a random marketing page.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
The WooCommerce cart shortcode, styled in Elementor. Use on a cart template, not on a random marketing page.
Woo Shortcode Cart widget. Renders the standard WooCommerce [woocommerce_cart] shortcode.
Output depends on WooCommerce objects (products, cart, or account). Empty without WooCommerce data.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “WC Cart”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Background Color”, “Border”, “Border Radius”, “Background Color”. Style and Content tabs are listed on this page.
When to use it
- A custom cart page.
- WooCommerce Builder cart template.
- A cart layout that matches the rest of the site.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including WC Cart.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Cart Table — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Cart Table — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-cart-form table.shop_table`. |
| Cart Table — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Table Header — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Table Header — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Table Header — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-cart-form table.shop_table thead th`. |
| Table Header — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Table Header — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-cart-form table.shop_table thead th`. |
| Table Cells — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Table Cells — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Table Cells — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Table Cells — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-cart-form table.shop_table tbody td`. |
| Product Thumbnail — Width | Writes CSS (width, max-width) onto the widget’s front-end markup. (min 30, max 200). |
| Product Thumbnail — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Remove Button — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Remove Button — Hover Color | Writes CSS (remove, color) onto the widget’s front-end markup. |
| Remove Button — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Remove Button — Hover Background Color | Writes CSS (remove, background-color) onto the widget’s front-end markup. |
| Remove Button — Size | Writes CSS (font-size, width, height, line-height) onto the widget’s front-end markup. (min 16, max 50). |
| Product Name — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Product Name — Hover Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Product Name — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-cart-form table.shop_table td.product-name a`. |
| Price — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-cart-form table.shop_table td.product-price, {{WRAPPER}} .wooc…`. |
| Quantity Input — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Quantity Input — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Quantity Input — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-cart-form table.shop_table td.product-quantity .quantity .qty`. |
| Quantity Input — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Quantity Input — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Quantity Input — Width | Writes CSS `width` onto the widget’s front-end markup. (min 40, max 150). |
| Update Cart Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Update Cart Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Update Cart Button (Hover) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Update Cart Button (Hover) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Update Cart Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-cart-form button[name="update_cart"]`. |
| Update Cart Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Update Cart Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Update Cart Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-cart-form button[name="update_cart"]`. |
| Update Cart Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Coupon Field — Input Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Coupon Field — Input Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Coupon Field — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-cart-form .coupon input.input-text`. |
| Coupon Field — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Coupon Field — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Coupon Field — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-cart-form .coupon button[name="apply_coupon"]`. |
| Coupon Field — Button Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Coupon Field — Button Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Coupon Field — Input Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Coupon Field — Input Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Cart Totals — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Cart Totals — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Cart Totals — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .cart_totals`. |
| Cart Totals — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Cart Totals — Heading Color | Writes CSS `color` onto the widget’s front-end markup. |
| Cart Totals — Heading Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .cart_totals h2`. |
| Cart Totals — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Cart Totals — Value Color | Writes CSS `color` onto the widget’s front-end markup. |
| Proceed to Checkout Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Proceed to Checkout Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Proceed to Checkout Button (Hover) — Text Color | Writes CSS (checkout-button, color) onto the widget’s front-end markup. |
| Proceed to Checkout Button (Hover) — Background Color | Writes CSS (checkout-button, background-color) onto the widget’s front-end markup. |
| Proceed to Checkout Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .wc-proceed-to-checkout a.checkout-button`. |
| Proceed to Checkout Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Proceed to Checkout Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Proceed to Checkout Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .wc-proceed-to-checkout a.checkout-button`. |
| Proceed to Checkout Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Proceed to Checkout Button — Full Width | Switcher inspector control (`checkout_button_full_width`). |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which WC Cart options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
Does WC Cart require WooCommerce?
Yes. Install WooCommerce and add products (or complete a cart) before this widget has anything to show.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related woocommerce widgets
WC Products
The WooCommerce products shortcode, with King Addons style controls around it.
Ajax Add to Cart
An add-to-cart control that updates without a full page reload, with a notice you can style.
Quick Product Grid
A compact product grid with simple columns and spacing.
Quick Product Slider
A compact product slider with fewer controls than WooCommerce Grid — for a simple featured row.
WC Add To Cart Button
A standalone add-to-cart button for a chosen product ID.
WC Checkout
The checkout shortcode with Elementor styling. Pair it with WooCommerce Builder for a full checkout template.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for WC Cart after you activate it.