INTL
Freelancer
어려움
외주
원격 가능
Custom WooCommerce Product Page
예산
$600~$1,500 INR
예상 기간
1~2개월
난이도
어려움
기술 스택
PHP
JavaScript
WordPress
CSS
HTML
WooCommerce
Frontend Development
Web Design
AI 분석 요약
WooCommerce 단일 제품 페이지를 스크린샷에 따라 시각적으로 완벽하게 재구축하고, 고급 필터링, 개인화된 추천, 동적 가격 책정 등의 맞춤 기능을 구현하는 프로젝트입니다. WooCommerce 훅 및 액션에 대한 깊은 이해와 반응형 웹 개발 역량이 요구됩니다.
프로젝트 원문 설명
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.
Freelancer에서 원본 확인
원본 보기