QualityWorkwear
Custom WooCommerce Store + React Logo Customisation Tool
Overview
Quality Workwear required a robust e-commerce platform capable of handling both standard product sales and complex garment personalisation.
The solution needed to give the internal team full CMS control while supporting a seamless customer experience for uploading logos, selecting embroidery or print options, and configuring placement across multiple garments.
TheBrief
- Build a fully bespoke WordPress + WooCommerce store
- Provide flexible, block-based CMS editing
- Improve search and product filtering
- Enable garment customisation with logo upload
- Dynamically adjust pricing based on selected options
- Ensure admin visibility of all order-level customisation data
The platform had to balance ease of use for customers with operational clarity for staff.
TheApproach
I developed a custom WordPress theme with structured ACF blocks to allow flexible page creation while maintaining consistent brand presentation.
On the commerce side, WooCommerce was extended with custom logic to support:
- Enhanced search functionality
- Advanced product filtering
- Configurable garment options
- Dynamic pricing adjustments
The standout feature was a React-powered customisation interface embedded directly within the WooCommerce product flow.
ReactLogoCustomisationTool
The custom tool allows customers to:
-
Upload their own logo files
-
Choose embroidery or print
-
Select placement positions on garments
-
Apply customisation across multiple products
The application dynamically updates:
-
Pricing based on configuration
-
Cart display to reflect custom options
-
Order metadata for backend processing
On the admin side, staff can:
-
View all selected configuration options
-
Download uploaded logos directly from the order page
-
Access structured data without manual interpretation
This required careful integration between React state, WooCommerce hooks, and server-side PHP logic.
Search&FilteringImprovements
The default WordPress search was replaced with a more robust implementation to improve product discovery.
Combined with enhanced filtering, the result is a store where users can quickly locate specific garments, sizes, or categories without friction.
Results
- Streamlined garment personalisation workflow
- Reduced order ambiguity for staff
- Improved product discoverability
- Flexible CMS editing for marketing pages
- A cohesive system combining React application logic with WooCommerce infrastructure
The project demonstrates the ability to integrate modern frontend frameworks within legacy CMS ecosystems, without sacrificing performance or maintainability.
Role&Credits
Built while working as Lead Developer at Gold Pebble.
Design direction provided by the Gold Pebble team.
Architecture, WooCommerce customisation, and React configurator development by Taran Stafford.
