WooCommerce · Elementor
WC Shop Messages widget for Elementor
WooCommerce notices (added to cart, errors) so they still show on a custom Elementor shop layout.
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
WooCommerce notices (added to cart, errors) so they still show on a custom Elementor shop layout.
Woo Shortcode Shop Messages widget. Renders shop messages/notices using [shop_messages] 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 Shop Messages”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Show Preview Message”, “Background Color”, “Text Color”, “Border Color”. Style and Content tabs are listed on this page.
When to use it
- A custom cart template.
- A custom checkout.
- A shop page that replaced the theme loop.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Info — Show Preview Message | Show a sample message in editor preview. |
| Success Message — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Success Message — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Success Message — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Success Message — Link Color | Writes CSS `color` onto the widget’s front-end markup. |
| Success Message — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-message`. |
| Success Message — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Success Message — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Success Message — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Success Message — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-message`. |
| Error Message — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Error Message — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Error Message — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Error Message — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-error`. |
| Error Message — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Error Message — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Error Message — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Error Message — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-error`. |
| Info Notice — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Info Notice — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Info Notice — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Info Notice — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-info`. |
| Info Notice — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Info Notice — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Info Notice — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Info Notice — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-info`. |
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 Shop Messages 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 Shop Messages 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.
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 Shop Messages after you activate it.