Custom apparel website case study. Problem: CustomHue, a US custom apparel and printing business, sells by quote, with 364 products and about 6,248 variations, and needed its approved mockups built exactly. What we did: built every page from the mockups on WordPress and WooCommerce, with a product page that passes the shopper's chosen colour and options into the quote form, custom colour swatches, custom product cards, a brand logo filter and a multi-step quote wizard. Result: complete quote requests with the product link attached, and a build that now carries 2,149 products. Stack: WordPress, WooCommerce, WoodMart, Elementor, Contact Form 7, custom PHP, JavaScript and CSS.
- Client
- CustomHue (customhue.com)
- Industry
- Custom apparel and printing
- Location
- United States
- Stack
- WordPress, WooCommerce, WoodMart, Elementor, Contact Form 7, custom PHP, JavaScript and CSS
- Timeline
- November 2025 to January 2026
- Delivered by
- PlusTechnology
The challenge
CustomHue prints t-shirts, hoodies, jackets, polos and other apparel for businesses, teams and organisations. Customers don't buy with one click: they choose a garment, a colour and options, then ask for a quote. The new custom apparel website had to support that way of selling, and look exactly like the designs the client had already approved.
- A catalogue with thousands of variations. 364 products with an estimated 6,248 colour and size variations at launch. Standard WooCommerce dropdowns become unusable at that scale.
- A quote, not a cart. The quote request had to arrive with the exact product, colour and options the customer picked, so the team could price it without a back-and-forth.
- Pixel-perfect mockups. Custom layouts, an inverted-corner design, animated headings and custom product cards that no theme provides out of the box.
- An existing stack. The site had to stay on the client's WoodMart theme and Elementor, so the team could keep editing content themselves.
What we built: a custom apparel website from mockups
Every page was rebuilt to match the client's mockups: home, shop, product archive, product pages, about, contact and the quote pages. The features below are custom code written for this project, not plugins.
1. A product page that fills the quote form for you
This was the hardest part of the project. The product page was built from scratch to the mockup, with a quotation form inside it. When a shopper picks a colour (say, blue) and other options, those choices fill the quote form automatically. The request is sent together with the WooCommerce product data and a link to the exact product, so the CustomHue team sees what was chosen without asking.
2. Colour swatches for thousands of variations
We replaced WooCommerce's variation dropdowns with custom colour swatches, styled to the brand, and made the product gallery switch to the right image for each colour. Shoppers see every available colour at a glance instead of scrolling through long lists.
3. Custom product cards and a brand logo filter
- A fully custom product card for the shop and archive pages, matching the mockups on desktop and mobile.
- A brand filter shown as logos, so customers who know the garment brand they want can narrow the catalogue in one click, alongside the product filters.
4. A multi-step "Get a quote" wizard
For customers who start without a specific product, we built a multi-step quote form on Contact Form 7 with custom JavaScript and CSS: 15 product types shown as icons (t-shirts, hoodies, jackets, pants and more), an artwork upload step, Next and Back navigation, validation and reCAPTCHA. It works the same on phones and desktops. A separate single-page contact form uses the same design.
5. Design details from the mockups
- Liquid, bubbling headline animation on the home page.
- Inverted-corner layout: an SVG mask cuts an inverted rounded corner into images and the slider, with a button locked into that corner at every screen size and zoom level.
- Custom testimonials with quotation-mark icons, a customised header and menu, and a branded preloader with the CustomHue logo and animated rings.
- A restyled booking calendar embed and live chat opened from custom icons.
Technical decisions
- Custom code on top of the client's theme. We kept WoodMart and Elementor so the team can edit pages themselves, and added the custom features with PHP hooks, JavaScript and CSS instead of stacking plugins.
- Product data travels with the quote. The selected variation is read on the product page and passed into the form with the product name and link, so every request is complete when it arrives.
- Built for a large catalogue. Swatches, cards and filters work from WooCommerce's own product and variation data, so new products appear correctly without extra setup.
- Staging first. Everything was built and tested on a staging site before launch.
Results
- A custom apparel website that matches the approved mockups on every page.
- Quote requests that arrive complete, with the product, colour and a product link attached.
- 364 products and about 6,248 variations at launch, browsable with swatches and a brand filter.
- Room to grow: the store now lists 2,149 products on the same build.
Working on a WooCommerce store with lots of variations? See how we handled a similar catalogue in the Discogs WooCommerce sync case study, or read our WooCommerce vs Shopify guide. WooCommerce's own documentation explains how variable products work.
Tech stack
| Area | Technology |
|---|---|
| Platform | WordPress and WooCommerce |
| Theme and builder | WoodMart theme, Elementor |
| Forms | Contact Form 7 with custom JavaScript, CSS and reCAPTCHA |
| Custom code | PHP hooks and shortcodes, JavaScript, CSS, SVG masks |
| Catalogue | 364 products, ~6,248 variations at launch; 2,149 products today |
"The hard part was the product page: turning the mockup into a real page and sending the shopper's exact choices, like the colour, to the quote form along with the product link."
— Rehan Ullah, founder of PlusTechnology
Custom apparel website FAQ
What does a custom apparel website need?
Usually a quote flow rather than a plain checkout: customers choose a garment, colour, sizes and print, and the business prices the order. The site needs clear colour swatches, good filtering for a large catalogue and a quote form that captures exactly what was chosen.
Can WooCommerce handle thousands of product variations?
Yes. This store launched with 364 products and about 6,248 variations and now lists 2,149 products. The key is replacing long variation dropdowns with swatches and building filters and product cards on WooCommerce's own data.
How do you send the selected product options with a quote request?
On CustomHue's product page, custom JavaScript reads the selected variation, such as the colour, and fills it into the quotation form together with the product name and a link to the product, so the request arrives complete.
Do you have to replace the theme to build custom features?
No. We kept the client's WoodMart theme and Elementor, so the team can still edit pages, and added the custom features with PHP hooks, JavaScript and CSS.
Related reading
Want something similar for your business? Hire PlusTechnology on Upwork or get in touch.