WooCommerce · Elementor
Ajax Add to Cart widget for Elementor
An add-to-cart control that updates without a full page reload, with a notice you can style.
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
An add-to-cart control that updates without a full page reload, with a notice you can style.
Ajax Add to Cart Widget (Free).
render() writes HTML data attributes: data-product-id, data-quantity, data-success-text.
Output depends on WooCommerce objects (products, cart, or account). Empty without WooCommerce data.
The script talks to WooCommerce front-end events or add-to-cart URLs.
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 “Ajax Add to Cart”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Use Current Product (Single)”, “Product ID (fallback)”, “Quantity”, “Button Text”. Style and Content tabs are listed on this page.
- Preview the published page. Ajax Add to Cart Widget (Free).
When to use it
- A custom product card.
- A landing-page product offer.
- A loop item that should stay on the page.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Settings — Use Current Product (Single) | On product pages, automatically use the current product. |
| Settings — Product ID (fallback) | Used when not on a single product or when current product is unavailable. |
| Settings — Quantity | Numeric value used in this widget’s render/JS (default 1, min 1, max 20). |
| Settings — Button Text | Printed in the widget HTML from render(). |
| Settings — Success Message | Printed in the widget HTML from render(). |
| Button — Alignment | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-ajax-atc__button`. |
| Button — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button — Hover Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Button — Hover Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-ajax-atc__button`. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Notice — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-ajax-atc__notice`. |
| Notice — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
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
Why doesn’t Ajax Add to Cart work in the Elementor preview?
AJAX handlers run on the published page. Preview the front end (or a Theme Builder preview of a real post) to test submit/filter requests.
Does Ajax Add to 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 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.
Compare Products Table
A side-by-side comparison table of WooCommerce products the shopper selected.
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 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 Ajax Add to Cart after you activate it.