As discussed, This is summary of requirements:
- It will display the customizer on a page where our shortcode will be placed(Design of custom design page will be exact same as reference site)
- Will add a Thumbnail to Categories (so it can be displayed on top of customizer page)
For customizer page:
- On top it wil list all categories(max 5) with its thumbnail
- When user will select on category, it will load products of that category on left side(where caps are on reference site)
- When user will select a product(cap) form left side list, it will be dispalyed as main image of customizer
- Then user can enter custom text on right side text box
- When user will enter text, it will be dispalyed on below list of font styles(with custom text)
- When user will select font style, it will be dispalyed over the main product image
- There will be list of colors, when selected will change the font color over the main product image
- Availalbe list of font styles and colors will be static(user will be able to select from predefined font styles and colors)
- WHen user will be done, and press ADD TO CART, selected product will be added to cart with custom meta of order where we will store the custom text, font style and font color which is selected by user
Once added to cart, all further process is supposed to be managed by woocommerce's default feature.