Window Configurator
WooCommerce plugin for interactive window configuration with live price calculation
A WordPress plugin built for a joinery company that allows customers to configure a custom window directly on the WooCommerce product page. The client sets the number of panes, opening type, dimensions, glass, color, and hardware, sees a live SVG preview and the price updating in real time, then adds the configured window directly to cart. The project has two components: a PHP WordPress plugin and a Next.js calculator rendered as a static export inside an iframe.
What you can do
Visual Window Configuration
The client configures the window step by step: number of panes, opening type (fixed, openable, tilt-and-turn), custom width and height, glass, color, and hardware.
Live SVG Preview
The window is rendered as an SVG that updates in real time based on the chosen dimensions and options, giving the client an accurate visual representation before purchasing.
Real-Time Price Calculation
Price is calculated automatically: area × (price/m² + glass and color modifiers) × opening multiplier (fixed ×1.0, openable ×1.5, tilt-and-turn ×1.6) + hardware.
Glass, Color & Hardware Options
All options are configurable per product from the WooCommerce admin: glass types with price modifiers, colors with hex values, and hardware with per-unit pricing.
WooCommerce Integration
A "Configure window" 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 "Window Configurator" tab where the administrator sets the price/m², glass options, colors, and hardware with individual price modifiers.
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 (price, glass, colors, hardware) are serialized to JSON, encoded in base64, and passed to the calculator via the ?product= URL parameter. No backend API needed.
Opening Type Multipliers — The price formula applies a multiplier based on the opening mechanism: fixed ×1.0, side-opening ×1.5, tilt-and-turn ×1.6 — reflecting the actual manufacturing cost difference.