Tubolito WooCommerce Plugin
A custom WordPress plugin powering product discovery, warranty claims, and X-Tubo product registration for a global bicycle tube brand.
The Brief
Tubolito is an Austrian manufacturer of ultralight thermoplastic bicycle tubes, selling direct-to-consumer across Europe and beyond via their WooCommerce store. The site needed more than an off-the-shelf theme could provide: a guided product finder to help customers choose the right tube, a post-purchase product registration system tied to customer accounts, and a full warranty claim workflow that the support team could manage from the WordPress admin. All of it had to work across multiple languages on a WPML-powered multilingual store.
My Role
I built and maintained the entire custom plugin as sole developer, working alongside Tubolito's internal team who handled content and day-to-day store operations. There was no design agency involved — I worked from brand guidelines and close collaboration with the client to arrive at the final UI. The plugin covers both the customer-facing React interfaces and the backend admin tooling the support team relies on.
Technical Approach
The plugin is structured as a PSR-4 namespaced WordPress plugin (Tubolito\) with distinct modules for each domain: ProductFinder, Registration, Warranty, Content, and Product. Each module is a singleton that registers its own CPTs, shortcodes, Elementor widgets, AJAX handlers, and scripts — keeping concerns isolated without reaching for a framework on top of WordPress.
For the JavaScript layer, all three customer-facing tools (product finder, registration, warranty) are React 17 apps bundled with Vite into a single main.js entry point. I integrated a Vite dev server into the WordPress request cycle via a TUBOLITO_DEV_MODE constant, with the plugin swapping script URLs and injecting the @vite/client module script automatically in dev. This gave full HMR while developing directly against the live WordPress environment rather than a mock.
One non-obvious decision was the warranty approval flow: rather than requiring the support team to manually generate discount codes, approving a claim automatically creates a WooCommerce 100%-off coupon scoped to the exact number of tubes in the claim, with a one-year expiry and free shipping. To prevent coupon accumulation from abandoned claims, a WP-Cron job runs every five minutes trashing expired, unused coupons — also exposed as a wp tubolito coupon-cleanup WP-CLI command for manual runs. A separate cron job deletes warranty claim image uploads older than two months to keep the filesystem clean.
WPML integration required care in several places. The warranty module switches the site language to the customer's submission language before sending approval or rejection emails, using WPML's wpml_switch_language_for_email action, then restores the previous language afterward. Product data passed to the React apps via wp_localize_script is cached with WordPress transients for one hour to avoid N+1 ACF queries on every page load.
Key Features
- Guided product finder — React app presenting a two-step decision tree (bike type → priority) backed by a custom
RecommendedProductCPT; product data batch-loaded from ACF with transient caching to eliminate N+1 queries - X-Tubo product registration — React/Formik multi-step form that creates a new WooCommerce customer account on submission, sending a password-reset link via a custom email rather than including a plain-text password
- WooCommerce My Account integration — X-Tubo registration adds a dedicated "X-Tubo Products" page to the WooCommerce account menu via endpoint and menu item filters
- Warranty claim workflow — React/Formik form with react-dropzone image uploads, persisted as a custom CPT with six custom statuses (
pending,on-hold,approved,return,good-will,rejected) managed from a custom admin UI - Automated coupon generation — Approving a warranty claim auto-creates a scoped WooCommerce coupon for the exact number of replacement tubes claimed; a scheduled cron job trashes expired unused coupons every five minutes
- 8 custom Elementor widgets — Including
ProductFinder,ProductInfoTable,TeamRider,CategoryInfo, andProductQualities, each with WPML translation support via dedicated widget subclasses - Excel export — Warranty claim data exportable to
.xlsxvia phpspreadsheet from the admin tools page
Tech Stack
WordPress · WooCommerce · PHP 8 · React 17 · Vite · Formik · Yup · Axios · react-select · react-dropzone · SCSS · Elementor · WPML · ACF · phpspreadsheet · Composer · Yarn