Door Configurator
WooCommerce plugin for interactive door configuration with live price calculation
A WordPress plugin built for a joinery company that allows customers to configure a custom wooden door directly on the WooCommerce product page. The client chooses the door type, wood species (interior/exterior), color, dimensions, and hardware, sees a live preview and the price updating in real time, then adds the configured door directly to cart. Built with the same hybrid architecture as the window configurator: PHP WordPress plugin + Next.js calculator as static export in an iframe.
What you can do
Custom Door Configuration
The client configures the door step by step: door type, wood species (soft/hard, interior/exterior), finish color, custom width and height, and hardware type.
Live Preview
The door is rendered live based on the chosen wood, color, and dimensions, giving the client an accurate visual representation of the final product before adding to cart.
Real-Time Price Calculation
Price is calculated based on the wood species (price/m² × area + price/ml × perimeter), color modifier, and hardware price per unit — all updating instantly as options change.
Wood, Color & Hardware Options
All options are configurable per product from WooCommerce admin: wood species with door type (interior/exterior), price/m² and price/ml; colors with hex values; hardware with per-unit pricing.
WooCommerce Integration
A "Configure door" button appears on the product page. After configuration, the product is added to cart via AJAX with the complete specification and calculated price, visible in cart, checkout, admin, and order emails.
iframe + postMessage Architecture
The Next.js calculator runs as a static export inside an iframe. Product data is sent to it via a base64-encoded URL parameter; the final configuration and price return via postMessage to the WordPress plugin.
WordPress Admin Panel
Each WooCommerce product has a dedicated "Door Configurator" tab where the administrator sets wood options with type, pricing, and color; general color options; and hardware with per-unit pricing.
Fullscreen Configurator Page
Clicking the button on the product page opens a dedicated fullscreen WordPress page that renders the iframe configurator, providing a focused, distraction-free configuration experience.
More features
Hybrid Stack: Next.js + PHP — The calculator is a Next.js 16 app (App Router, static export) with React 19, Tailwind CSS v4, and Framer Motion. The WordPress plugin is pure PHP with no external dependencies.
Product Data via Base64 URL — Product options (wood types, colors, hardware) are serialized to JSON, encoded in base64, and passed to the calculator via the ?product= URL parameter. No backend API needed.
Pricing by Door Type — Each wood species can be independently configured for interior or exterior doors with separate price/m² and price/ml values, reflecting the actual cost difference between door types.