Marketing · Elementor
Price List & Menu widget for Elementor
A menu or price list: item, description, price, optional image — for restaurants and services.
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 menu or price list: item, description, price, optional image — for restaurants and services.
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 “Price List & Menu”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Disable Image”, “Image”, “Image Size”, “Title”. Style and Content tabs are listed on this page.
When to use it
- A café menu.
- A salon price sheet.
- A catering package list.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| List Settings — Disable Image | When this switch is on, render() skips the wrapped markup. |
| kng_price_list_content_items — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| kng_price_list_content_items — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| kng_price_list_content_items — Title | Text inspector control (`kng_price_list_title`). |
| kng_price_list_content_items — Description | Text inspector control (`kng_price_list_description`). |
| kng_price_list_content_items — Price | Text inspector control (`kng_price_list_price`). |
| Items — Kng Price List Content Items | Repeater rows; render() loops each item to build the list or slides. |
| Items — Title Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-price-list-item-title`. |
| Items — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Items — Description Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-price-list-item-description`. |
| Items — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Items — Price Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-price-list-item-price`. |
| Items — Price Color | Writes CSS `color` onto the widget’s front-end markup. |
| Items — Space between items (px) | Writes CSS (padding-top, padding-bottom) onto the widget’s front-end markup. (default 30, min 0). |
| Items — Vertical Align | Writes CSS `align-items` onto the widget’s front-end markup. Options: Start; Center; End. |
| Lines — Line Type | Writes CSS `border-bottom-style` onto the widget’s front-end markup. Options: None; Solid; Dotted; Dashed. |
| Lines — Line Color | Writes CSS `border-bottom-color` onto the widget’s front-end markup. |
| Lines — Line Width | Writes CSS `border-bottom-width` onto the widget’s front-end markup. (default 1, min 0). |
| Lines — Line Type (Kng Price List Line Type Under) | Writes CSS `border-bottom-style` onto the widget’s front-end markup. Options: None; Solid; Dotted; Dashed. |
| Lines — Line Color (Kng Price List Line Color Under) | Writes CSS `border-bottom-color` onto the widget’s front-end markup. |
| Lines — Line Width (Kng Price List Line Width Under) | Writes CSS `border-bottom-width` onto the widget’s front-end markup. (default 1, min 0). |
| Lines — Space (px) | Writes CSS (margin-bottom, padding-bottom) onto the widget’s front-end markup. (default 20, min 0). |
| Lines — Line Type (Kng Price List Line Type Items) | Writes CSS `border-bottom-style` onto the widget’s front-end markup. Options: None; Solid; Dotted; Dashed. |
| Lines — Line Color (Kng Price List Line Color Items) | Writes CSS `border-bottom-color` onto the widget’s front-end markup. |
| Lines — Line Width (Kng Price List Line Width Items) | Writes CSS `border-bottom-width` onto the widget’s front-end markup. (default 1, min 0). |
| Image — Width | Options: Auto; Custom (%); Custom (px). |
| Image — Height | Options: Auto; Custom (px). |
| Image — Width (px) | Writes CSS `width` onto the widget’s front-end markup. (default 60, min 0). |
| Image — Width (%) | Writes CSS `width` onto the widget’s front-end markup. (default 20, min 0, max 100). |
| Image — Height (px) | Writes CSS `height` onto the widget’s front-end markup. (default 60, min 0). |
| Image — Image Fit | Writes CSS `object-fit` onto the widget’s front-end markup. Options: Cover; Contain. |
| Image — Image Fit Position | Writes CSS `object-position` onto the widget’s front-end markup. Options: Top; Bottom; Left; Right; Center. |
| Image — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Image — Move image to the top on mobile | Switcher inspector control (`kng_price_list_image_move_to_top_on_mobile`). |
| Image — CSS Filter | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-price-list-item-image`. |
| Image — CSS Filter for image on card hover | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-price-list-item:hover .king-addons-price-list-item-image`. |
| Image — Transition duration on hover (ms) | Writes CSS `transition` onto the widget’s front-end markup. (default 300, min 0). |
| Image — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Image — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Image — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-price-list-item-image`. |
| Image — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-price-list-item-image`. |
| Image — Border Radius | Writes CSS `border-radius` 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
What does Price List & Menu actually change on the page?
A menu or price list: item, description, price, optional image — for restaurants and services. Inspector labels from this widget’s PHP include “Disable Image”, “Image”, “Image Size”, “Title”.
How do I add Price List & Menu in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Price List & Menu”, drag it onto the canvas, then set Content and Style.
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 marketing widgets
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Pricing Calculator
A quote calculator with parameters (quantity, options) that updates a total on the page.
Pricing Slider
An interactive pricing slider: visitors drag a value and see the matching price or package.
Pricing Table
Pricing columns with features, highlight plan, and a button — built for SaaS and service packages.
Testimonial & Review
A single testimonial or review block: quote, name, role, photo, optional rating.
Testimonial & Review Carousel
A carousel of testimonials so you can show many quotes without stacking the page.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Price List & Menu after you activate it.