Building a Real-Time JS Pricing Engine for a Custom Neon Sign Configurator
When standard WooCommerce variations couldn’t handle complex, multi-variable pricing math, we engineered a custom JavaScript calculator and database architecture for instant, frictionless checkouts.
Real-Time Price Updates
AJAX Lag on Input
Manufacturing Data Accuracy
E-commerce platforms are built for static SKUs, not dynamic manufacturing.
Our client, Love Neon, allows customers to design their own neon signs. The price depends on a complex matrix: number of letters, physical dimensions (width/height), font style, and LED color. Standard WooCommerce plugins simply couldn’t handle this level of mathematical complexity without crashing or causing massive lag.
The Variation Limit
WooCommerce limits product variations. Trying to create a variation for every possible combination of letters, fonts, and sizes would require millions of database rows, breaking the site.
AJAX Performance Lag
Standard custom product plugins rely on server-side AJAX calls to calculate price. This meant a 1-2 second delay every time a user typed a letter or changed a color—killing the UX.
Complex Pricing Logic
The math wasn’t linear. Pricing required specific formulas: multiplying character counts against font-specific size multipliers and base acrylic costs.
A Custom JavaScript Engine & Isolated DB Tables.
We bypassed the bloated plugins and built a lightweight, dedicated pricing application that runs entirely in the user’s browser, passing only the final validated data to WordPress.
Client-Side JS Calculator
We engineered a vanilla JavaScript engine that listens to keystrokes and dropdown selections. It calculates the complex pricing matrix locally in the browser, updating the cost instantly with zero server lag.
Custom Database Architecture
Instead of bloating `wp_postmeta`, we created isolated custom database tables to store the pricing rules, font multipliers, and dimension limits. The JS engine fetches these rules once on page load.
Seamless Cart Integration
We used custom PHP hooks (`woocommerce_add_cart_item_data` and `woocommerce_before_calculate_totals`) to dynamically inject the JS-calculated price and the user’s design specs directly into the WooCommerce cart session securely.
Live Visual Feedback
As the JS engine calculates the price, it simultaneously updates the visual preview. The user sees their exact text, in their chosen font and color, glowing against a background—building instant buying confidence.
Frictionless UX & Clean Order Data
By moving the heavy lifting to a custom JS engine, the sign builder became incredibly fast and responsive. Users enjoy a premium, interactive design experience, while the backend receives precise, clean manufacturing data attached directly to the WooCommerce order.
Let's explore
Let's explore your
solution together
We are ready to design new concepts, shape your message and build a stronger digital presence.