Online Art Gallery
PRODUCT PAGE CONFIGURATOR
Challenge: Every fine-art photograph is a limited edition, available in specific formats with a restricted number of prints per format. Buyers need to pick a format, pick a finish (Dibond, US-style floating frame, classic wood frame…), and then fine-tune the details: color, moulding type from hundreds of supplier references, custom mat with personalized dimensions. All of it with a true-to-life visual preview, a price calculated in real time, and clear signaling of sold-out formats.
Solution: A custom configurator built into WooCommerce, connected to the framing supplier's API, with an in-situ preview and dynamic calculation of price, weight and shipping costs.
FORMAT
→
FINISH
→
PRICE & WEIGHT
→
VISUAL PREVIEW
1
ARTWORK SELECTION
// format and availability
- 01 Display of available formats unique to each artwork (limited edition)
- 02 Number of prints remaining, with sold-out formats highlighted
- 03 Format selection with automatic transition to the finish step
Custom configurator management
WooCommerce
PHP
2
FINISH CONFIGURATION
// framing and customization
- 04 Finish choice: Dibond mounting, US-style floating frame or classic wood frame...
- 05 Classic frame: pick from supplier references (API)
- 06 Custom mat: type, color, outer dimensions
Manual selection of the different finishes
PHP
Supplier API
JavaScript
3
DYNAMIC CALCULATIONS
// price, weight, shipping
- 07 Real-time price calculation based on finish, moulding and mat
- 08 Total weight calculation (artwork + finish) for shipping costs
- 09 Pricing adjusted to scarcity (remaining prints)
Perspective view
PHP
REST API
WooCommerce
4
PREVIEW
// in-situ rendering
- 10 Live in-situ preview: the artwork shown to scale in an interior
- 11 Perspective view with CSS depth effect to visualize the finish
In-situ view to scale
CSS
JavaScript
Claude Code