Required stack
필요 기술
PHPJavaScriptWordPressCSSHTMLWooCommerceFrontend DevelopmentWeb Design
Project brief
프로젝트 내용
I have a reference screenshot that shows exactly how I want my WooCommerce single-product page to look and behave. The default WooCommerce template won’t cut it—I need a complete visual overhaul plus several bits of added logic so the live page mirrors the mock-up pixel for pixel.
Design & layout
• Every visual element from the screenshot—gallery layout, description sections, tab styling, ratings block, and any micro-interactions—must be reproduced precisely.
• CSS has to remain maintainable; please avoid scattering overrides throughout multiple files.
Content blocks
The page needs to surface product images, full descriptions, and customer reviews in the same positions and styles as shown in the reference.
Custom functionality
Beyond the visuals, the screenshot shows:
• Advanced filtering that lets a shopper refine options right on the product page.
• Personalized recommendations drawn from related products or user behavior.
• Custom pricing options (tiered or dynamic) that show instantly when a shopper changes a selection.
These interactions should feel native, load quickly, and stay compatible with WooCommerce updates.
Scope of work
1. Build a child theme or custom template so core updates never overwrite the work.
2. Code the page layout with clean PHP, HTML5, CSS3, and any lightweight JavaScript needed for interactivity.
3. Integrate the three custom features above, making sure data pulls correctly from WooCommerce hooks.
4. Test responsiveness across modern browsers and mobile sizes.
5. Transfer or document any settings so I can replicate the setup on other products.
Acceptance criteria
• Visual match to the provided screenshot on desktop, tablet, and mobile.
• Filtering, recommendations, and pricing logic operate without errors and pass a final walkthrough on a staging site.
• No console errors; Core Web Vitals remain green.
If you’ve built bespoke WooCommerce templates before and are confident with hooks, actions, and enqueueing assets the right way, let’s get started—I’m ready to share the screenshot and staging credentials.
Design & layout
• Every visual element from the screenshot—gallery layout, description sections, tab styling, ratings block, and any micro-interactions—must be reproduced precisely.
• CSS has to remain maintainable; please avoid scattering overrides throughout multiple files.
Content blocks
The page needs to surface product images, full descriptions, and customer reviews in the same positions and styles as shown in the reference.
Custom functionality
Beyond the visuals, the screenshot shows:
• Advanced filtering that lets a shopper refine options right on the product page.
• Personalized recommendations drawn from related products or user behavior.
• Custom pricing options (tiered or dynamic) that show instantly when a shopper changes a selection.
These interactions should feel native, load quickly, and stay compatible with WooCommerce updates.
Scope of work
1. Build a child theme or custom template so core updates never overwrite the work.
2. Code the page layout with clean PHP, HTML5, CSS3, and any lightweight JavaScript needed for interactivity.
3. Integrate the three custom features above, making sure data pulls correctly from WooCommerce hooks.
4. Test responsiveness across modern browsers and mobile sizes.
5. Transfer or document any settings so I can replicate the setup on other products.
Acceptance criteria
• Visual match to the provided screenshot on desktop, tablet, and mobile.
• Filtering, recommendations, and pricing logic operate without errors and pass a final walkthrough on a staging site.
• No console errors; Core Web Vitals remain green.
If you’ve built bespoke WooCommerce templates before and are confident with hooks, actions, and enqueueing assets the right way, let’s get started—I’m ready to share the screenshot and staging credentials.