Project: 09Live

Liliana Hi-Vis: Industrial Customization Engine

WordPressWooCommerceNginxRedisCustom PHP
View Live Site
Liliana Hi-Vis Desktop Home

// [1/3] The customized WooCommerce storefront.

Project Overview

LilianaHiVis.com is a service-integrated e-commerce platform specializing in enhanced-visibility workwear. Unlike a standard retail site, LHV functions as a "Customization Engine," where industrial garments are tailored with reflective safety tape and custom branding. The technical challenge was providing a seamless "Service-as-a-Product" experience while maintaining high performance on a minimalist 1GB Vultr HFC server.

01 // Tiered Performance Architecture

To handle the overhead of a heavy WooCommerce/Wordpress stack on a 1GB VPS, I implemented a triple-tier caching strategy:

  • Tier 1: Nginx FastCGI Caching: Implemented the LILIANAHIVIS_CACHE zone at the server level. This pre-renders public pages and serves them in < 100ms, bypassing the PHP engine entirely for guest traffic.
  • Tier 2: Redis Object Caching: Integrated a Redis-backed object cache to offload database query results to memory, drastically reducing MariaDB I/O during complex variant lookups.
  • Tier 3: Frontend Optimization: Orchestrated Autoptimize to concatenate and minify critical CSS/JS paths, combined with Nginx Gzip (Level 6) for maximum compression.

02 // Bespoke Variation Logic (The "Orange Tape" System)

A core requirement was the ability to swap product visuals dynamically based on safety tape selections.

Custom Implementations:

  • Context-Aware Image Swapping: Developed a custom PHP/JS hook system that identifies when "Orange Reflective Tape" is selected. It replaces the default product images across the entire funnel—from the Product Detail Page to the REST/Store API Cart Response and even the Order Details table.
  • Recursive Selection Threshold: Increased the AJAX variation threshold to 1,000, ensuring that even complex garments with hundreds of combinations remain responsive without slow server-side fallbacks.

03 // Custom Account Experience & AJAX Logistics

I overhauled the standard WooCommerce "My Account" area to function as a professional client portal.

  • AJAX Order Expansion: Implemented a custom JS logic (order-details.js) and localized AJAX endpoints. Users can expand order history entries to view high-res item previews and specific customization details without a single page reload.
  • Custom Dashboard UI: Replaced the legacy list-based dashboard with a modern, SVG-icon-driven panel layout, improving the "Self-Service" UX for repeat business customers.
  • Tabbed Mobile UI: Built a custom filter on the core/navigation block to inject a high-performance, tabbed mobile menu directly into the WordPress Gutenberg framework.

04 // Result: The "Hi-Vis" Competitive Edge

  • SEO Dominance: Effectively targets the "Enhanced Visibility" and "Non-ANSI" niches, capturing high-intent traffic from tow truck operators, landscapers, and delivery crews.
  • Service Scalability: The automation of customization selections (Tape Color -> Placement) allows the business to process complex custom orders with the same speed as off-the-shelf retail.
  • Server Efficiency: Maintains steady-state response times under 200ms with a peak memory footprint of only ~630Mi.

[Technical Metadata]

  • Platform: WordPress 6.x / WooCommerce 10.x
  • Infrastructure: Vultr HFC (1 vCPU / 1GB RAM)
  • Security: Fail2Ban / UFW / Cloudflare Full-Strict
  • Custom Code: ~3,000 lines of bespoke PHP/JS for the Spectra One Child Theme.