Selling and checkout

A product configurator is a pricing problem, not a UI problem

Arif Özelci, developer of ConfigMatePublished 7 min read

The visible half of a configurator is easy: dropdowns, swatches, a live preview, a total that updates as somebody chooses. The half that decides whether you can trust it is invisible — whether the price the customer saw is the price your shop charges, or whether the browser was allowed to decide.

ConfigMate configurator with options selected and a live total
The total updates in the browser, and is recalculated on the server before checkout.

The browser is not a source of truth

A configurator that computes the total in JavaScript and posts it to the cart has handed the pricing decision to the customer’s machine. Changing a number in a form before it is submitted takes no skill and no tools beyond the ones already in the browser. Most of the time nobody bothers. The one time somebody does, you have shipped a made-to-order product at whatever they typed.

The fix is not to hide the calculation. It is to do it twice: once in the browser so the customer sees the total move as they choose, and again on the server before the order is accepted, from the options rather than from the number. If the two disagree, the server wins and the customer is told.

Store the choices, not the sentence

A common shortcut is to save the configuration as a line of text on the order — “Oak / 180cm / brushed handles”. It reads well on the invoice and it is useless six months later when somebody asks what the brushed handles cost, or when you change the price of oak and want to know which open orders are affected.

Store the option ids and the price each one contributed at the time of the order. The readable sentence can always be generated from that; the reverse is not true.

And the part everybody forgets: stock

If an option consumes a real component, the configurator has to know. Otherwise the shop happily sells ten of a finish you have two of, and the problem surfaces in production planning rather than at checkout, which is the most expensive place for it to surface.

ConfigMate validates on the server$39 once. Options and their prices live in WooCommerce, the total is recalculated before the order is accepted, and each choice is stored as a choice rather than a sentence.
Open the demo →
Arif ÖzelciBuilds the WebKoding plugins. Answers support himself.