StrapMate: WooCommerce Subscription Box Store

An online store for smartwatch straps with monthly subscription plans and packing lists that show what goes into every parcel

About the project

  • Client: StrapMate, a smartwatch strap brand
  • Region: United States
  • Timeline: June–October 2020
  • Technologies: WordPress, WooCommerce, WooCommerce Subscriptions, Stripe
  • Team: a WordPress developer and a project manager

StrapMate sells straps for smartwatches, and its main idea is a monthly subscription box. A customer picks a plan, pays every month and receives a few straps by post. The client from the United States wanted a shop for this idea, and the shop had to look like the mockups that the client had prepared.

So we needed three things at once: a polished storefront, subscriptions with recurring payments, and an admin who can see what to put in every parcel.

A subscription is sold on the site, but it is a box in the post: both sides had to match.

A shop on a commercial theme

The client had bought a commercial WooCommerce theme, and the mockups were drawn for it. For this reason, we did not write the markup from scratch. We reworked the theme to match the mockups: new fonts, adjusted shades and a full-width layout instead of the 1440 px mockup.

In addition, we set up a demo domain for the client and connected an Instagram feed. Meanwhile, the theme claimed support for the latest WooCommerce, but one of its functions failed on newer versions, so we opened a ticket with the theme authors.

Three subscription plans

We built the plans with the WooCommerce Subscriptions plugin. A Beginner plan costs $20 a month and includes one strap and 10% off. An Intermediate plan costs $60 and includes two straps. A VIP plan costs $100, includes three straps and gives 20% off on premium straps. Every plan also has an annual price, and the higher plans add gifts and invitations to events.

We prepared the shop for Stripe payments.

What goes into a parcel

The main requirement came later: the admin has to see the contents of every parcel. However, the ready-made plugins printed only the name of the plan on the packing list, so the admin could not tell which straps to send.

As a result, we added a custom field "Package includes" to the product. The admin fills it in, and its value appears on the packing list. In addition, the shop creates an invoice for every order and a sticker for the post office, and we set up parcel tracking. The client reviewed the solution and accepted it.

Orders, invoices and shipping

The client planned to ship through a fulfilment service and ShipStation. For this reason, an order carries the address and the plan, and the packing list carries the parcel contents. We used two paid plugins for invoices and subscriptions, and we listed their license costs for the client.

What turned out to be hard

  • A theme that lags behind. The theme did not support the current WooCommerce in full, so we checked every function on the live version.
  • Subscriptions are not parcels. The plugin sells a plan, but a customer receives a box, so we had to describe the box separately.
  • Waiting for answers. The client needed time for decisions, so we clarified the requirements in calls.
  • Annual plans. Automatic invoices for annual subscriptions stayed outside the first scope, and we offered them as a separate extension.

Result of the project

We delivered the shop in October 2020, and the client accepted it. The shop offered three subscription plans, and the admin saw the contents of every parcel on the packing list.

Looking for a similar store? See our custom web app development or read how we built a marketplace with an interactive map. The plans rely on WooCommerce Subscriptions.

Need a shop with subscriptions? Tell us about your task.

SEE MORE OUR CASE STUDIES

Custom Development

SLINK: Survey Automation App for Windows Tablets

A field and office application for land surveyors: a drawing canvas for lots, structures and traverses, a cloud database and a Web API, built for Windows tablets and PCs.

Technologies:C#, WPFEyeshotSQL ServerAzure DevOps
Read case study
Mobile Development

BELONG: Smart Dating iOS App with an Events Admin Panel

A Xamarin iOS app and a Laravel admin panel on Firebase for an events-based dating startup: events, a calendar, Single and Not Single modes, push notifications and App Store releases.

Technologies:XamarinPHP, LaravelVue.jsFirebase, Yelp
Read case study
EdTech

ABC Stars: Online English School Platform with Live Video Lessons

A web platform for live one-to-one English lessons: a video classroom with shared books, a schedule generator, an admin panel and monthly parent reports.

Technologies:PHP, LaravelVue.jsOpenTokKami API
Read case study
Front-End Development

Timios: Website Front-End Development for a Title Company

Markup of a full website redesign for a US title and escrow company: Zeplin mockups on a Bootstrap grid, delivered into an ASP.NET WebForms site with IE11 fixes.

Technologies:HTML, CSS, JSBootstrapASP.NET WebFormsZeplin
Read case study
Mobile Development

Equipe Trading: Warehouse Pick and Pack Android App

An Android app for scanner devices that guides warehouse staff through picking and packing: order tabs, shelf locations, barcodes, cartons with printed labels and automatic statuses.

Technologies:AndroidREST APIZebra scannerFigma
Read case study
WordPress Development

Swimming Los Angeles: Swim School Website Redesign

A redesigned WordPress site for a swim school: responsive pages from our mockups, JackRabbit class tables, a Google map of four pools and an editable home page.

Technologies:WordPressCherryFrameworkJackRabbitGoogle Maps
Read case study
WordPress Development

Steerlyfe: WordPress Website for a Wellness Marketplace Startup

A WordPress website for a wellness marketplace app: pages built from our mockups, Mailchimp forms, and a shop and blog on one installation.

Technologies:WordPressThe7MailchimpInVision
Read case study
Mobile Development

Ivee: Companion Mobile App for a Smart Speaker

The interface of a companion app for the Ivee voice assistant speaker, built in Ionic: Wi-Fi connection, speakers by room and scenes with music, lights and a remote.

Technologies:IonicMobile interface
Read case study
iOS Development

Tribz: Rebuilding and Rescuing an iOS Personality Quiz App

A native iOS personality quiz app rebuilt from a prototype in Swift, then rescued after an App Store rejection: in-app purchases, Swift 3 migration and sharing fixes.

Technologies:SwiftiOSIn-App PurchasesTestFlight
Read case study
Blockchain Development

HollywoodLand DAO: Custom Blockchain Governance Platform for Decentralized Decision-Making

Decentralized governance solution with smart contracts and Web3 integration that enables secure DAO voting, token management, and transparent project funding.

Technologies:SolidityOpenZeppelinInfuraPHP/WordPressPolygonMetaMask/Ledger
Read case study
Custom Development

Taxi Fleet SaaS Platform: Architecture and Development of a Subscription Service (NDA Covered)

Architecture and development of a multi-tenant subscription platform that runs a taxi fleet end to end: dispatching, pricing, payments and rides that work offline.

Technologies:GoFlutterReactPostgreSQLKafkaRedisClickHouse
Read case study
Mobile Development

Truck Parts Identification App: Recognizing Heavy-Truck Parts from Photos (NDA Covered)

A mobile app and backend that identify heavy-truck parts from photos. A vision model observes, fixed rules decide, and short questions replace guesses.

Technologies:FlutterFastAPILangGraphPostgreSQLMinIODockerClaude API
Read case study
Web Platform MVP

DuelDog: CS:GO Esports Platform MVP with Game-Server Matches and PayPal Payouts

An MVP of an esports platform: players pay an entry fee, play 1v1 CS:GO matches on dedicated servers, and the winner is credited and paid out, with matchmaking, map veto, a server manager and an admin dashboard.

Technologies:ASP.NET MVCC#SourceModPayPalAzure, AWS
Read case study
Mobile and Cloud MVP

IPBuilding: Notification Platform MVP with an Android App and Azure Back End

An MVP that delivers alerts from building devices to the phones of staff: an Android app with push notifications, an ASP.NET back office and an OAuth 2.0 API for the client's servers, hosted on Azure.

Technologies:AndroidASP.NETOAuth 2.0Azure
Read case study
Web Platform

Splandeed: Marketplace Platform with an Interactive Map and Admin Panel

A French marketplace for the architecture and design sector: an admin panel for storefronts, a public site with an interactive map and hosting with SSL.

Technologies:LeafletJavaScriptAdmin panelLinode
Read case study
Blockchain Data Platform

DappStats: DApp Ranking Platform with Blockchain Data Collectors

A statistics and ranking site for decentralized apps: a front end, a Laravel rewrite and collectors that read Ethereum and TRON data.

Technologies:LaravelMySQLEthereumTRON
Read case study
Mobile and Logistics

Courier Tracking App for a Print Distribution Business (NDA Covered)

An Android app and a web admin panel that show managers where couriers work: GPS tracking, sectors drawn on a map, push notifications with intercom codes and reports.

Technologies:AndroidNode.jsGPSPush
Read case study
Web Platform

Employee Reviews Directory: Completing a Platform After a CMS Migration (NDA Covered)

A public directory of companies with employee reviews: working links and redirects, reCAPTCHA on every public form, moderation tools and support from 2017 to 2024.

Technologies:PHPYii2jQueryBootstrapreCAPTCHA
Read case study
Web Platform

Art Catalogue Website: Exhibits, Museums and Authors with Social Login (NDA Covered)

A bilingual catalogue of paintings, museums and artists: search, favorites, login with social accounts, layouts for phones and tablets, and an admin panel with content import.

Technologies:PHPWordPressOneAllResponsive
Read case study
Blockchain Development

Big Picture Coin: Token, Lottery and Staking Smart Contracts on Ethereum

Smart contracts for a fixed-price token, a lottery and staking, with tests, a deployment script, audit fixes and launch instructions for the client's team.

Technologies:SolidityTruffleEthereumInfura
Read case study
Blockchain Development

Tezos Trading Bot in C++: DEX Monitoring, Strategies and Telegram Control

A C++ rewrite of a Tezos trading bot: Quipuswap pool monitoring, a market price feed, a rules and strategies framework and Telegram reports, running on the client's machine.

Technologies:C++TezosQuipuswapCoinbase APITelegram
Read case study
Blockchain Development

Waxify: Shopify App for Selling NFTs on the WAX Blockchain

A public Shopify app that sells digital collectibles together with physical goods: a merchant interface, checkout logic and asset issue on WAX, built on the Shopify Node.js template.

Technologies:Node.jsNext.jsShopify APIWAXMySQL
Read case study
E-commerce Development

Element Eight: Shopify Storefront, Subscriptions and Customer Account for a Skincare Brand

Shopify theme development from the client's Figma designs: Shop All, navigation, ingredients pages, auto-replenishment with Recharge and a custom My Account area.

Technologies:ShopifyRechargeJavaScriptCSS
Read case study
Blockchain Development

Crypto Trading Bot Platform: Web App, Risk Controls and Node Scaling (NDA Covered)

A refactor of a Node.js trading bot and a Next.js web platform around it: subscriptions, an admin panel, draw-down and trailing stop controls, a user queue and node rotation.

Technologies:Node.jsNext.jsPostgreSQLDockerEthereum
Read case study

Contact us



Please fill out the form, and we will get back to you once your request has been processed.

You can also send your request directly to our email: info@24gen.space
We will respond as soon as possible after receiving your message.
 






    PDF, DOC, DOCX, JPG, GIF, PNG — up to 20 MB