Green Lion Distro · B2B eCommerce · Wholesale
A B2B wholesale store built around how trade buyers order
A custom WooCommerce trade platform for a UK vape and nicotine wholesaler — approval-gated accounts, role-based pricing and a variation-first ordering UI.
- Role
- Design, build & ongoing development
- When
- Ongoing
- Services
- UX / UI design · WordPress & WooCommerce development · Performance · Analytics

Catalogue: brand → product → flavour
Each flavour is its own card
Product categories
Pods, kits, nic salts, pouches…
Trade credit at checkout
via iwocaPay
Lines of custom PHP
All in a child theme
The challenge
What needed solving
Trade buyers often order many flavours across several brands in one go. Standard WooCommerce product pages — one dropdown per product — made that slow, and prices must stay hidden from anyone who isn’t an approved business.
Everything also had to behave identically in Chrome, Safari and Firefox, on desktop and mobile.
What I did
The approach
- 01
Designed the product pages in Figma and rebuilt brand, category and shop pages so every flavour renders as its own buyable card, with a quantity stepper and add-to-cart in one tap.
- 02
Built a B2B approval flow: new registrations are held as pending, blocked from logging in with a friendly message, and unlocked (with trade pricing) when staff approve them.
- 03
Hid prices from guests (“Login to see £”) and pending accounts, with role-based pricing tiers for approved buyers.
- 04
Added iwocaPay buy-now-pay-later at checkout, automated bank-transfer reminder emails via WP-Cron, and custom CSV import/export for brand data.
- 05
Wrote a filter bar with brand, category and trend sorting plus instant search, and a “close all” toggle for scanning long ranges on mobile.
- 06
Worked staging-first with byte-for-byte checks against production, and fixed cross-browser issues specific to Safari.
The work




Highlights
Variation-first UI
Flavours and strengths are laid out as a grid of cards with nicotine-strength and HOT / NEW badges, instead of hidden in dropdowns.
September 2026 redesign
New hero row, filter bar and mobile “view more / close” states shipped from a Figma file, with every existing JS hook preserved.
Performance & insight
LiteSpeed full-page caching, Imagify WebP images and lazy loading; GA4 and Microsoft Clarity session recordings to see where buyers get stuck.
Tools & stack
- WordPress
- WooCommerce
- XStore child theme
- Elementor Pro
- PHP
- jQuery
- Figma
- GA4
- Microsoft Clarity

