About this project
Drox Auto is a custom WordPress theme built from scratch for an automotive parts e-commerce business serving both B2B wholesale clients and B2C retail customers. The theme's core innovation is its dual architecture — B2B users see a completely different header, footer, navigation, and account experience than B2C visitors, all from the same WordPress installation.
The homepage centers on vehicle compatibility search. Customers select their car's brand, model, and engine from a cascading dropdown powered by the drox-vehicle-manager plugin, or search directly by VIN number through the Autoref API. The hero section also includes a tabbed interface switching between the vehicle finder and VIN search, with a hero slider, trust badges, partners marquee, and product selection sections below.
Live search provides instant results as customers type, matching products by title, SKU, reference, OEM numbers, and supplier brand. The search dropdown shows product thumbnails, prices, match indicators, and category suggestions — all via AJAX with no page reload.
Category archive pages feature a comprehensive filtering system: supplier brand checkboxes, price range slider, stock status toggle, product type taxonomy filter, subcategory navigation, and search within category. Filters work via AJAX, returning rendered product cards and pagination without full page reloads. When a vehicle engine is selected, the category page filters products to only those compatible with that engine.
The theme integrates category SEO management from the drox-vehicle-manager plugin, overriding the document title and meta description on category archives. Placeholders like {category}, {brand}, and {model} are replaced dynamically based on the current context — allowing unique SEO metadata for every category+brand combination.
The blog system provides a magazine-style experience with a hero image overlay, category badge, reading time calculation, and social share buttons (Facebook, Twitter, LinkedIn, WhatsApp). Single posts include an author box, related posts grid, post navigation, and comments. The blog archive uses AJAX load-more pagination.
WooCommerce pages receive extensive customization: the My Account dashboard shows order stats, total spent, active returns/claims, and recent orders with French status badges. The checkout page includes a configurable VIN field and per-field visibility controls. Both pages override AST theme container styles for full-width layouts.
The theme's 36 Customizer sections control every visual and functional aspect — from the top bar marquee messages and hero slider content to the footer layout, blog colors, checkout field visibility, and My Account dashboard toggles. Custom repeater controls manage slides, trust badges, partners, benefits, and category grids without code changes.
All 28 CSS stylesheets and 23+ JavaScript modules load conditionally based on the current page context — vehicle search JS only loads on the homepage, category archive JS only on product_cat pages, and cart JS only on the cart page. This ensures optimal performance despite the theme's extensive feature set.
