WordPress wocommerce online mobile Store project
A global brand entrusted us with a unique challenge: crafting an internal tool to share its brand story with every employee, from sales to product development. This wasn’t just about information – it was about forging a unified company culture.
Task
Building an internal tool of this scale is no small feat, but with the right approach, it can be a powerful force for uniting a company.
Project Overview
This engagement covered the technical build of a mobile-first WooCommerce store designed specifically for a mobile device retailer, where the core UX and backend workflows had to account for high-frequency stock/price changes (device pricing fluctuates daily), a large SKU catalog with configuration variants (storage, RAM, color), and trade-in/exchange logic layered on top of standard checkout.
Technical Stack
- CMS/Commerce: WordPress + WooCommerce, PHP 8.1 on an Nginx/PHP-FPM stack with OPcache and a Redis-backed object cache
- Front-end rendering: A hybrid approach — server-rendered WooCommerce templates for SEO-critical pages (category, product) with progressive enhancement via Alpine.js for interactive components (variant selectors, EMI calculators, comparison drawer), avoiding a full SPA rewrite while keeping interactivity snappy on mobile
- Inventory sync: A custom REST endpoint (
/wp-json/store/v1/inventory-sync) consuming a webhook feed from the supplier’s stock/pricing system, processed through Action Scheduler in batches of 50 to avoid timeout on large catalog updates - CDN: Cloudflare with image resizing rules serving device-appropriate resolutions based on
Client-Hintsheaders (DPR, Viewport-Width)
Mobile-First Architecture Decisions
With over 80% of traffic on mobile devices, the entire template hierarchy was built mobile-first rather than adapted from desktop. The product listing page uses a virtualized/windowed rendering approach (rendering only visible product cards plus a buffer) to keep DOM node count low on category pages with 200+ products, preventing scroll jank on lower-end Android devices.
The variant selection UI (storage/RAM/color combinations) was rebuilt from WooCommerce’s default dropdown-based variation form into a touch-optimized swatch/chip selector, backed by a pre-computed variant availability matrix loaded once per product (rather than an AJAX round-trip per selection change), cutting variant-switch latency to near-instant on the client.
Performance Engineering
- Mobile Lighthouse performance score improved from 38 to 91 through render-blocking resource elimination and critical path optimization
- Total JavaScript payload on the product page reduced from 610KB to 140KB gzipped by removing jQuery-dependent legacy WooCommerce variation scripts and replacing them with a 12KB vanilla implementation
- Largest Contentful Paint (product hero image) reduced from 3.9s to 1.4s via
fetchpriority="high", AVIF format with WebP fallback, and elimination of a layout-shifting cookie consent banner in favor of a non-blocking bottom-sheet implementation - Interaction to Next Paint (INP) kept under 120ms by debouncing the price-range filter slider and moving comparison-drawer state updates off the main thread via
requestIdleCallback
Commerce-Specific Logic
Trade-in/exchange valuation is handled through a custom pricing engine — a rules table mapping device model, condition (graded via a guided in-app assessment flow), and current market depreciation curve to a dynamic trade-in credit, applied as a WooCommerce fee/coupon hybrid at checkout via the woocommerce_cart_calculate_fees hook.
EMI (installment) eligibility and monthly payment calculation is computed client-side using a formula matching each partnering NBFC’s published interest rates, then validated server-side at checkout against the same rate table to prevent tampering with displayed EMI amounts via browser dev tools.
Stock accuracy was a critical requirement given daily price volatility: product pages display a “last synced” timestamp, and the add-to-cart action performs a real-time stock/price re-validation against the live inventory table before allowing checkout to proceed, preventing overselling of fast-moving, low-stock devices.
Results
Following launch: mobile conversion rate increased from 1.1% to 2.9%, cart abandonment on the variant-selection step dropped by 34%, and average product page load time on mid-tier Android devices (Moto G-class) improved from 5.8s to 1.9s.