Skip to main content

Add a Pricing Table Section to an Elementor Page with Premium Addons and AI

Your plans side by side with features, buttons and a Most popular ribbon, stacked on phones, previewed before it goes live.

Difficulty Beginner
Time ~10 min

Prerequisites

A site connected to WPVibe running Elementor (free is enough) and Premium Addons for Elementor 4.11.111 or newer (tested on 4.11.111, the free version) on WordPress 7.0 or newer, with an administrator account and Premium Addons' AI tools on: in wp-admin, Premium Addons > MCP Config & AI Abilities, switch on Enable MCP & AI Abilities. A page built with Elementor, and your plans: name, price, period, features and a link for each.

The prompt
My WordPress site uses Elementor and the free Premium Addons for Elementor plugin. Add a pricing section to my page [page title] with these plans: [for each plan: name, price, period such as mo or yr, an optional old price to cross out, its features, button text and link]. Mark [plan name] with a ribbon that says "[Most popular]". Put it [before the section that starts with X, or at the end of the page].

1. Run get_ability_info for each Premium Addons ability this recipe uses: premium-addons/get-page-structure, premium-addons/check-elementor-element, premium-addons/get-widget-schema and premium-addons/duplicate-post. If none is found, stop and tell me to turn Premium Addons' AI tools on in wp-admin: open Premium Addons, then MCP Config & AI Abilities, and switch on Enable MCP & AI Abilities. If only some are missing, stop and tell me to switch those back on under Manage AI Abilities on the same screen. Premium Addons keeps its build tools (insert-widget, add-container and the rest of its build group) and its template library off the REST API, so WPVibe can't call them; don't look for them, and ignore its design guide where it names them. Load WPVibe's elementor skill for the element format.
2. Find the page with GET /wp/v2/pages?search=[page title]&status=publish,draft,private, then read it with rest_api GET /wp/v2/pages/PAGE_ID with query context edit and _fields id,modified,link,meta._elementor_edit_mode. PAGE_ID is its id and PAGE_URL its link; SITE_URL is my site's address. If _elementor_edit_mode is not builder, stop and tell me the page isn't built with Elementor. Read its layout with premium-addons/get-page-structure and note the ids of its top-level sections, in order.
3. Before you write any Premium Addons widget, run premium-addons/check-elementor-element with its type (if available is false, stop and tell me: it is Pro or switched off), then premium-addons/get-widget-schema with tab content, and use only the keys it lists. Any key you leave out falls back to the schema's default, and some defaults are demo text (the Pricing Table's NEW ribbon and List Item #1 to #3), so set every text you need. Give each new element a new id of 8 random lowercase hex characters, and each repeater row its own _id of 7. NEW_ID is the id of the new section's outer container. The new section is one row container (flex_direction row, flex_wrap wrap, flex_justify_content center) holding one child container per plan, each with content_width full, width in % so the plans fit side by side with room for the gap (30 for three, 45 for two, 22 for four) and width_mobile 100, so they stack on phones. In each child put one premium-addon-pricing-table with premium_pricing_table_title_text, premium_pricing_table_price_currency, premium_pricing_table_price_value, premium_pricing_table_price_duration, premium_pricing_table_slashed_price_value only if I gave an old price, premium_fancy_text_list_items as one row per feature with its own _id and premium_pricing_list_item_text, premium_pricing_table_button_text and premium_pricing_table_button_link. Set premium_pricing_table_badge_switcher to "" on every plan except the marked one: the ribbon is on by default and says NEW. On the marked plan set it to yes, ribbon_type stripe and premium_pricing_table_badge_text.
4. Never resend or retype the page's whole layout: add the section with one small edit. Write it as one compact JSON object, then call rest_api_write POST /wpvibe/v1/content/edit with target_type meta, meta_key _elementor_data and the post_id named below. Before a top-level section: old_content is {"id":"NEXT_ID" (that section's id with the brace and quotes in front), new_content is the new section, a comma, then that same old_content. At the end of the page: run POST /wpvibe/v1/content/search on the same meta with pattern set to the last top-level section's id; its match runs to the end of the value. Take its last 60 to 120 characters, ending with the final closing square bracket, as old_content, and as new_content the same text with a comma and the new section added just before that final bracket. content/edit changes text only where old_content matches exactly once, and refuses an edit that would break the JSON; if it refuses, take a longer old_content and try again. Never use replace_all. Keep the old_content and new_content you used: swapping them is the undo.
5. Copy the page with premium-addons/duplicate-post. COPY_ID is the post_id it returns; the copy is a draft. Add the section to the copy (post_id COPY_ID) as above. Give me the copy's preview link, SITE_URL/?page_id=COPY_ID&preview=true (it only opens while I'm logged in), describe the section, and wait for my yes. Nothing on my live page has changed yet. If I say no, move the copy to the trash with rest_api_write DELETE /wp/v2/pages/COPY_ID and stop.
6. On my yes, read the page's modified date again; if it changed since step 2, stop and tell me someone edited it. Otherwise make the same edit on the live page (post_id PAGE_ID). Run premium-addons/get-page-structure on it and check every top-level section id from step 2 is still there, in the same order, with NEW_ID where I wanted it. If not, undo the edit and tell me what you saw.
7. Fetch the live page with get_page_html, selector .elementor-element-NEW_ID, and check every plan name and price value is in it. That fetch skips page caches, so then run run_wp_cli cache purge --url=PAGE_URL so visitors get the new version too, and tell me what it reported; if it found no cache plugin and my host caches pages, I purge it there. In that section's HTML, also check premium-pricing-badge-container appears exactly once and there is no List Item, Pricing Table or Lorem ipsum text.
8. Move the draft copy to the trash with rest_api_write DELETE /wp/v2/pages/COPY_ID. Tell me how to undo: content/edit on the page with the old_content and new_content you used, swapped. Ask me to look at the live page on my phone. Give me the page link and its Elementor edit link.
Already connected?

Skip pasting the full prompt. Drop this into your AI on a site that already has WPVibe:

Run the “Add a Pricing Table Section to an Elementor Page with Premium Addons and AI” recipe from the WPVibe cookbook on my connected site.

Plans side by side, a crossed-out old price and a ribbon on the one most people pick: free Elementor has no pricing table, and Premium Addons’ free Pricing Table has every part, each behind its own switch, with demo text in the ones you forget.

The AI lays out one Premium Addons Pricing Table per plan in a row that stacks on phones, sets every price, feature and button itself so no demo text is left, and builds it on a draft copy of your page for you to preview. Your live page changes only on your yes, and the AI checks it afterwards.

Have your plans ready: name, price, period, features and the link for each button. Prices are text on the page, not tied to your store, so change them here when your prices change. The AI adds the section with one small edit and keeps a note of it, so taking it out again is one step.

Outcome

A row of pricing tables with your plans, features and buttons, one marked Most popular, side by side on a computer and stacked on a phone.