WooCommerce · Elementor
WC Add To Cart Button widget for Elementor
A standalone add-to-cart button for a chosen product ID.
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
A standalone add-to-cart button for a chosen product ID.
Woo Shortcode Add To Cart widget. Renders an add-to-cart button using [add_to_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 Add To Cart Button”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Product Source”, “Product ID”, “Product SKU”, “Show Price”. Style and Content tabs are listed on this page.
When to use it
- A landing-page offer.
- A product mention in a blog post.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Product Selection — Product Source | The chosen value is read in render() and applied on the front end. Options: Current Product (Dynamic); Specific Product ID; Specific Product SKU. |
| Product Selection — Product ID | Enter the numeric ID of the product. |
| Product Selection — Product SKU | Enter the SKU of the product. |
| Display Settings — Show Price | Switcher inspector control (`show_price`). |
| Display Settings — Default Quantity | Numeric value used in this widget’s render/JS (default 1, min 1). |
| Display Settings — Additional CSS Class | Add custom CSS class to the button wrapper. |
| Container — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .product`. |
| Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| 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}} .product .price, {{WRAPPER}} .product .woocommerce-Price-amount`. |
| Price — Spacing | Writes CSS `margin-right` onto the widget’s front-end markup. |
| Add to Cart Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Add to Cart Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Add to Cart Button (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Add to Cart Button (Hover) — Background Color | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Add to Cart Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .product a.add_to_cart_button, {{WRAPPER}} .product a.button`. |
| Add to Cart Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Add to Cart Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Add to Cart Button — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .product a.add_to_cart_button, {{WRAPPER}} .product a.button`. |
| Add to Cart Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .product a.add_to_cart_button, {{WRAPPER}} .product a.button`. |
| Add to Cart Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Add to Cart Button — Full Width | Switcher inspector control (`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 Add To Cart Button 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 Add To Cart Button 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
Ajax Add to Cart
An add-to-cart control that updates without a full page reload, with a notice you can style.
WC Cart
The WooCommerce cart shortcode, styled in Elementor. Use on a cart template, not on a random marketing page.
WC Checkout
The checkout shortcode with Elementor styling. Pair it with WooCommerce Builder for a full checkout template.
WC My Account
The My Account shortcode. For per-endpoint layouts, use the WooCommerce Builder account pieces.
WC Order Tracking
The order-tracking form, styled in Elementor.
WC Product Category
Products from one WooCommerce category, with style controls.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for WC Add To Cart Button after you activate it.