WooCommerce · Elementor
WC Checkout widget for Elementor
The checkout shortcode with Elementor styling. Pair it with WooCommerce Builder for a full checkout template.
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 checkout shortcode with Elementor styling. Pair it with WooCommerce Builder for a full checkout template.
Woo Shortcode Checkout widget. Renders the standard WooCommerce [woocommerce_checkout] 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 Checkout”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Color”, “Typography”, “Spacing”, “Color”. Style and Content tabs are listed on this page.
When to use it
- A custom checkout page.
- A checkout template in WooCommerce Builder.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Section Headings — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Section Headings — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-checkout h3, {{WRAPPER}} #order_review_heading`. |
| Section Headings — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. |
| Form Labels — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form Labels — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-checkout form label`. |
| Form Labels — Required Asterisk Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form Fields — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Form Fields — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form Fields — Placeholder Color | Writes CSS (input-text, color, textarea) onto the widget’s front-end markup. |
| Form Fields — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-checkout input.input-text, {{WRAPPER}} .woocommerce-checkout t…`. |
| Form Fields — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Form Fields — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Order Review Table — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Order Review Table — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Order Review Table — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} #order_review`. |
| Order Review Table — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Payment Methods — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Payment Methods — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Payment Methods — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} #payment .wc_payment_method label`. |
| Payment Methods — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Payment Methods — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Payment Methods — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} #payment`. |
| Order Table — Header Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Order Table — Header Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Order Table — Cell Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Order Table — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-checkout-review-order-table, {{WRAPPER}} .woocommerce-checkout…`. |
| Order Table — Cell Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Form Rows — Row Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Form Rows — Column Gap | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 50). |
| Place Order Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Place Order Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Place Order Button (Hover) — Text Color | Writes CSS (order, color) onto the widget’s front-end markup. |
| Place Order Button (Hover) — Background Color | Writes CSS (order, background-color) onto the widget’s front-end markup. |
| Place Order Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} #place_order`. |
| Place Order Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Place Order Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Place Order Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} #place_order`. |
| Place Order Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Place Order Button — Full Width | Switcher inspector control (`place_order_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 Checkout 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 Checkout 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 Order Tracking
The order-tracking form, styled in Elementor.
WC Add To Cart Button
A standalone add-to-cart button for a chosen product ID.
WC Cart
The WooCommerce cart shortcode, styled in Elementor. Use on a cart template, not on a random marketing page.
WC My Account
The My Account shortcode. For per-endpoint layouts, use the WooCommerce Builder account pieces.
WC Product Category
Products from one WooCommerce category, with style controls.
WC Product Page
Renders a WooCommerce product by ID via shortcode, with gallery and button styling.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for WC Checkout after you activate it.