Skip to content
All projects

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
Green Lion Distro homepage
3-level

Catalogue: brand → product → flavour

Each flavour is its own card

8

Product categories

Pods, kits, nic salts, pouches…

£30k

Trade credit at checkout

via iwocaPay

1,300+

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

  1. 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.

  2. 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.

  3. 03

    Hid prices from guests (“Login to see £”) and pending accounts, with role-based pricing tiers for approved buyers.

  4. 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.

  5. 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.

  6. 06

    Worked staging-first with byte-for-byte checks against production, and fixed cross-browser issues specific to Safari.

The work

Redesigned brand page with filter bar and variation cards
Redesigned brand page with filter bar and variation cards
Shop page brand grid
Shop page brand grid
Mobile brand page with filters open
Mobile brand page with filters open
Green Lion homepage on mobile
Green Lion homepage on mobile

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

Next project

A2Z Bridging

Building a lead-generation engine for a specialist finance broker

Read the case study
A2Z Bridging homepage

Want results like these?

Start a project