WooCommerce · Elementor
WC My Account widget for Elementor
The My Account shortcode. For per-endpoint layouts, use the WooCommerce Builder account pieces.
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 My Account shortcode. For per-endpoint layouts, use the WooCommerce Builder account pieces.
Woo Shortcode My Account widget. Renders the standard WooCommerce [woocommerce_my_account] 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 My Account”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Background Color”, “Padding”, “Border”, “Border Radius”. Style and Content tabs are listed on this page.
When to use it
- A branded My Account page.
- An account template in WooCommerce Builder.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Navigation Menu — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation Menu — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Navigation Menu — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-MyAccount-navigation`. |
| Navigation Menu — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Navigation Links (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Navigation Links (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation Links (Hover) — Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Navigation Links (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Navigation Links (Active) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Navigation Links (Active) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation Links — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-MyAccount-navigation ul li a`. |
| Navigation Links — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Navigation Links — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-MyAccount-navigation ul li a`. |
| Navigation Links — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Navigation Links — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Content Area — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content Area — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content Area — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content Area — Link Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content Area — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content`. |
| Content Area — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content`. |
| Content Area — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Content Area — Headings Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content Area — Typography (Content Headings Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content h2, {{WRAPPER}} .woocommerce-MyAccount-conte…`. |
| 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 — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content input.input-text, {{WRAPPER}} .woocommerce-M…`. |
| 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. |
| Form Fields — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content input.input-text, {{WRAPPER}} .woocommerce-M…`. |
| Form Fields — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form Fields — Typography (Label Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content label`. |
| Buttons (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Buttons (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Buttons (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Buttons (Hover) — Background Color | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Buttons — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content .button`. |
| Buttons — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Buttons — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Buttons — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content .button`. |
| Buttons — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Tables — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Tables — Header Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Tables — Header Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Tables — Cell Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Tables — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-MyAccount-content table, {{WRAPPER}} .woocommerce-MyAccount-co…`. |
| Tables — Cell Padding | Writes CSS `padding` 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
Which WC My Account 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 My Account 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 Order Tracking
The order-tracking form, styled in Elementor.
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 My Account after you activate it.