Project Context
We operate a WordPress/WooCommerce e-commerce website specializing in decorative tiles and ceramics. Currently, our product customization configurator relies on pre-generated images (192 color variants per pattern), which creates:
An explosion in the number of assets to store and maintain
High loading times
Rigidity in catalog evolution
Significant administrative complexity
We want to replace this system with a dynamic configurator based on HTML5 Canvas, enabling real-time color customization of each sub-pattern composing a tile, without image multiplication.
Mission Objective
Develop and integrate a WooCommerce product configurator that enables:
Real-time color customization of each tile sub-pattern
A realistic visual rendering as a tiled wall (repeated mosaic)
A responsive interface (desktop, tablet, mobile)
Simplified admin management of products and their configurations
Technical Specifications
Product Data Model
Each product (tile) consists of multiple layered graphic sub-patterns:
Tile background
Decorative elements (squares, circles, triangles, petals, etc.)
Variable number depending on the product
Each sub-pattern:
Is represented by 1 single transparent PNG image (512x512px)
Has its own customizable color palette
Expected Visual Rendering
The configurator must display:
A mosaic preview simulating a tiled wall
Each tile measures 20x20cm in reality, but display size is adaptive (e.g., 60px desktop, 45px tablet, 30px mobile)
Sub-patterns (motifs) are repeated as patterns via HTML5 Canvas
Each sub-pattern can be independently colorized in real-time
Rendering must remain smooth and performant
Required Features
User side (front-end):
Color selection interface per sub-pattern (clickable color swatches)
Real-time preview of final rendering
Full responsive design
Add to cart with saved chosen configuration
Administration side (back-end):
Interface to easily create/edit configurable products
Sub-pattern management: image upload, stacking order, names
Color palette management per sub-pattern
Rendering parameter configuration (tile sizes by screen)
Ideally via Custom Fields (ACF) or native WooCommerce interface
WooCommerce Integration:
Storage of customized configuration in cart
Display of configuration in order and invoice
Expected Deliverables
Custom WordPress plugin or child theme with:
Reusable configurator module
Admin interface for managing configurable products
Modular JavaScript code:
Generic Canvas rendering engine
Responsive management
User interaction handling
Performance optimizations (lazy loading, cache, debouncing)
Documentation:
Admin user guide
Technical code documentation
Deployment guide
Training on configurator management (1-2h video call)
Technical Constraints
Existing WordPress website
Active WooCommerce
Standard shared hosting (limited performance)
Modern browser compatibility (Chrome, Firefox, Safari, Edge)
No dependency on heavy JS frameworks (preference for native JavaScript or lightweight libraries)
WordPress standards compliance (security, hooks, filters)
Criteria and Desired Profile
Essential Technical Skills
WordPress/WooCommerce expertise: plugin development, hooks, advanced customization
HTML5 Canvas mastery and image manipulation in JavaScript
Object-oriented PHP and WordPress best practices
Modern JavaScript (ES6+), event handling, performance optimization
Responsive design and advanced CSS
Experience with Advanced Custom Fields (ACF) or equivalent
Appreciated Skills
Experience developing product configurators
Knowledge of e-commerce issues (cart, variations, checkout)
UX/UI sensitivity
Management of visual projects requiring real-time rendering
Desired Qualities
Autonomy: ability to propose solutions and take initiative
Rigor: clean, documented, maintainable code
Communication: ability to explain technical choices
Pedagogical skills: for final tool training
Responsiveness: availability for regular exchanges
Elements to Provide in Your Application
Examples of similar achievements (configurators, Canvas, custom WooCommerce)
Detailed duration and budget estimate
Any questions about the project