Build Your Own Pricing Table
When the ready-made Pricing Table styles don't match your design, build your own with the UiChemy Composer widget.
The Pricing Table widget comes with a few ready-made styles to choose from. When none of them fit, click the Learn More button inside the widget, then follow the steps below to build your own design with the UiChemy Composer widget.
Steps
Install the free UiChemy plugin
In your WordPress dashboard, go to Plugins → Add New Plugin, search for UiChemy, click Install Now, then Activate. See Install and Activate UiChemy.
Connect your AI tool (MCP)
Once UiChemy Pro is activated, go to UiChemy → Home and select the AI Agent (MCP) tab.
- Click Generate connection. This issues a secure Application Password so your AI tool can reach this site.
- Under Pick your AI tool, choose Claude Desktop, Cursor, Codex, Antigravity, or Other.
- Under Add the MCP server, use the Prompt or Config switch, click Copy, and add it to your AI tool.
- Restart your AI tool.
Full steps for each tool are in Set Up AI to WordPress.
Copy the prompt
Copy this prompt, paste it into your AI tool, replace the parts in square brackets with your own details, and send it.
Using UiChemy on my WordPress site, add a Composer widget to the page "[page name]".
The ready-made Pricing Table styles don't match my design, so build my own pricing table with HTML, CSS and JavaScript showing [3] plans: [Basic], [Pro], [Agency].
Each plan: name, price, a feature list with check icons, and a [Get Started] button linking to [URL].
Add a Monthly / Yearly toggle that switches the prices, and highlight the [Pro] plan with a "Most Popular" badge.
Show the plans side by side on desktop and stacked on mobile.
Match my site's colours and fonts.
Your AI tool builds a native, editable Composer on that page. Ask for changes in the same chat until it looks right.
Prefer to code it yourself? Add the Composer widget to your page and write the HTML, CSS and JavaScript in its Code tab. See Code Tab.