Frontend Developer for WooCommerce/ACF PRO Redesign
Budget: €250 – €750 EUR
I'm Looking for a strong frontend developer who also has experience working with WordPress WooCommerce and ACF PRO plugin.
This is 90% Frontend task and 10% PHP task in WordPress.
Check it out in FIGMA
Password: agenda-scoot-float-rack
Link: https://www.figma.com/design/OGEAGSTXOJIKK79uYboNwi/Zlatana-webshop-redesign?node-id=0-1
1. Typography guidelines
Font usage
To ensure a fast-loading and visually consistent design, only two fonts are permitted throughout the website.
Required fonts:
Headlines: Use Roboto Serif (Regular)
Body text: Use Roboto (Regular)
Restrictions:
? Any additional fonts beyond these two are considered an error and must be replaced with the approved fonts.
2. Asset management
CSS & JavaScript file usage
To improve performance and reduce HTTP requests, all styles and scripts must be consolidated.
Requirements:
✅ Only one CSS file is allowed – all styles must be included in this file.
✅ Only one JavaScript file is allowed – all scripts must be included in this file.
? No full frameworks (e.g., Bootstrap, Tailwind, or similar).
✅ You may extract specific components from a framework (e.g., Bootstrap grid system), but they must be directly included in the single CSS or JavaScript file.
3. SVG & vector graphics handling
To optimize website performance and minimize external requests, all SVG assets must be embedded via JavaScript.
Requirements:
? Do not load SVGs (or icons) as files (<img src="icon.svg"> is not allowed).
✅ Embed SVGs as JavaScript variables and inject them into the DOM dynamically.
✅ SVG markup should be inserted using innerHTML.
Example implementation:
const logoSVG = `
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>`;
document.getElementById("logo-container").innerHTML = logoSVG;
4. Content types
The entire WordPress solution should be based on the Advanced Custom Fields (ACF) plugin. This content builder consists of specific content types that can be used on any page in the WordPress solution to maximize reusability and simplify future content additions. This framework is already build so it does not require you to make this in PHP.
This is 90% Frontend task and 10% PHP task in WordPress.
Check it out in FIGMA
Password: agenda-scoot-float-rack
Link: https://www.figma.com/design/OGEAGSTXOJIKK79uYboNwi/Zlatana-webshop-redesign?node-id=0-1
1. Typography guidelines
Font usage
To ensure a fast-loading and visually consistent design, only two fonts are permitted throughout the website.
Required fonts:
Headlines: Use Roboto Serif (Regular)
Body text: Use Roboto (Regular)
Restrictions:
? Any additional fonts beyond these two are considered an error and must be replaced with the approved fonts.
2. Asset management
CSS & JavaScript file usage
To improve performance and reduce HTTP requests, all styles and scripts must be consolidated.
Requirements:
✅ Only one CSS file is allowed – all styles must be included in this file.
✅ Only one JavaScript file is allowed – all scripts must be included in this file.
? No full frameworks (e.g., Bootstrap, Tailwind, or similar).
✅ You may extract specific components from a framework (e.g., Bootstrap grid system), but they must be directly included in the single CSS or JavaScript file.
3. SVG & vector graphics handling
To optimize website performance and minimize external requests, all SVG assets must be embedded via JavaScript.
Requirements:
? Do not load SVGs (or icons) as files (<img src="icon.svg"> is not allowed).
✅ Embed SVGs as JavaScript variables and inject them into the DOM dynamically.
✅ SVG markup should be inserted using innerHTML.
Example implementation:
const logoSVG = `
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>`;
document.getElementById("logo-container").innerHTML = logoSVG;
4. Content types
The entire WordPress solution should be based on the Advanced Custom Fields (ACF) plugin. This content builder consists of specific content types that can be used on any page in the WordPress solution to maximize reusability and simplify future content additions. This framework is already build so it does not require you to make this in PHP.