Xtooly Solution Guide · Website Builders & Hosting
| Tool: | Elementor |
| Difficulty: | Intermediate |
| Time: | 45 Minutes |
| What you’ll learn: | How to connect external API data to Elementor pricing widgets using JavaScript and CSS selectors for automated updates. |
The Problem
For SaaS companies and service-based businesses, pricing is rarely static. Seasonal promotions, currency fluctuations, and localized pricing strategies often require frequent updates to landing pages. When pricing is hard-coded into an Elementor “Pricing Table” widget, marketing teams must manually edit every page whenever a rate changes in the core billing system or Stripe dashboard. This manual process is prone to human error, creates data silos, and results in “pricing drift” where the price shown on the landing page doesn’t match the checkout page.
The challenge lies in Elementor’s native architecture. While Elementor Pro offers “Dynamic Tags,” these are primarily designed to pull data from internal WordPress sources like Custom Fields (ACF) or Site Settings. Fetching data from an external REST API—such as a custom billing backend or a third-party financial service—requires a bridge between the external JSON response and the visual Elementor interface. Without a structured integration, developers often resort to clunky iFrames or heavy plugins that slow down page load speeds and hurt SEO.
Before You Start
- Elementor Pro (for custom CSS and advanced widget control).
- A valid API endpoint (URL) that returns pricing data in JSON format.
- Basic familiarity with JavaScript (Fetch API) and CSS Classes.
Step-by-Step Solution
Open your landing page in the Elementor Editor. Drag and drop the Pricing Table widget into your column. Style the typography, buttons, and features exactly how you want them to appear. Since we will be overriding the price text via API, enter a placeholder value (e.g., “$0.00”) in the Price field under the Content tab. This ensures the layout remains intact while the data is loading.
To tell our script where to “inject” the live price, we need unique identifiers. Select the Pricing Table widget, navigate to the Advanced tab, and locate the CSS Classes field. Assign a specific class based on the plan level, such as api-price-starter or api-price-pro. Important: Do not use IDs if you have multiple tables on one page; classes are more flexible for global targeting.
Drag an HTML Widget directly below your pricing section. This widget will house the JavaScript required to call your API. Use the fetch() method to retrieve your JSON data. Within the .then() block of your script, use document.querySelector to find your CSS class and update the innerText or innerHTML of the pricing element. For Elementor’s Pricing Table, you typically need to target the internal span: .api-price-starter .elementor-price-table__integer-part.
Raw API data often returns numbers without formatting (e.g., 2900 instead of $29.00). Use the JavaScript Intl.NumberFormat object within your HTML widget script to handle currency symbols and decimal places automatically. This ensures that as your API updates, the visual presentation remains professional and localized to the user’s requirements.
Network requests take time. To avoid a “flicker” where the price jumps from $0 to the real value, add a simple CSS opacity transition. In the Custom CSS area of your widget, set the price container to opacity: 0; transition: opacity 0.3s;. In your JavaScript, once the data is successfully fetched and applied, add a class like .is-loaded to the widget to trigger opacity: 1;. This creates a smooth, premium feel for the user.
Pro Tips
- Use Session Storage: To prevent redundant API calls every time a user refreshes the page, store the pricing JSON in
sessionStorage. Check for existing data before initiating a newfetchrequest. - Security First: Never expose private API keys in the client-side HTML widget. If your API requires authentication, use a WordPress proxy function (via
functions.php) to make the call server-side and output the data as a local JS variable usingwp_localize_script. - Verify Elementor Selectors: Elementor occasionally updates its widget HTML structure. Always right-click and “Inspect” your pricing table in a browser to confirm the exact class name for the price integer and fractional parts.
Common Issues and Fixes
Fix: Ensure your API server has the landing page domain in its “Access-Control-Allow-Origin” header. Alternatively, use a “CORS Proxy” or a WordPress-side PHP fetch.
Fix: Elementor’s Pricing Table separates the “Currency Symbol” and “Price” into different HTML spans. Make sure you are targeting only the
.elementor-price-table__integer-part and .elementor-price-table__fractional-part specifically.
Fix: Wrap your JavaScript code in a
window.addEventListener('DOMContentLoaded', ...) function to ensure the DOM is ready before targeting classes.
Alternative Tools for This Task
While using the native HTML widget and JavaScript is the most lightweight method, you can also use JetEngine by Crocoblock, which provides a dedicated “Rest API” module for Elementor that handles data mapping without code. Another professional alternative is WP Get API, a plugin that allows you to turn any API response into a WordPress shortcode, which can then be placed directly into Elementor’s text or pricing widgets.
Summary
What you accomplished: You successfully decoupled your landing page pricing from manual edits by creating a dynamic bridge between Elementor and an external API. This setup ensures your pricing is always accurate, synchronized with your backend, and formatted correctly for your customers.
Next step: Consider extending this logic to your “Buy Now” buttons by dynamically updating the checkout URL parameters based on the same API data.
Xtooly partners with selected platforms to bring exclusive advantages to its readers.