Online product configuration is an innovative tool for e-commerce brands in a variety of industries. The idea of letting users customize their purchase on-the-spot is a fun, engaging way to offer stand-out brand value. This is what MASH, the parent company of Readymade, believes concerning its line of customizable office furniture.
Alongside the common e-commerce website elements and pages, Readymade needed a custom-coded configurator integrated into WooCommerce. This would allow its users to create furniture that fit office needs to the Later. The company hired a California-based digital agency that provided design and subcontracted the engineering to us. By working alongside an agency, we were able to rapidly build and deploy the technology solutions that Readymade asked for.
In this case, our task was to create a website that fit the agency’s design as discussed with its client, Readymade. This greatly improved the speed and precision of our project discovery phase, since our agency partner gave us clearly defined requirements and documentation concerning the project from the outset.
Specifically, we were given a Wireframe file of the desired design layout. Initially, our plan was to use a third-party service to build the 3-D product configurator—the most important element of the site. However, after reaching out directly to Readymade, it was decided that integrating a custom-coded configurator into WordPress was a better plan of action.
With the clear roadmap, we set to work on coding the HTML elements of the site. These pages underwent a few revisions as we added responsive behavior, hover state effects and sliders to modernize the site’s functionality. Once this step was approved, we began WordPress integration and added the custom product configurator. The last step of this project was incorporating custom checkout pages with a step-by-step process drawing information from the configurator.
The centerpiece of this website is also its most challenging element: the custom product configurator. This was complicated by the fact that the end result had to fit perfectly within the specific design produced by the agency. However, our team was able to quickly produce a reliable configuration tool that met Readymade’s expectations.
In particular, we invested a great deal of manpower into setting up the business logic that makes up the back-end of the configurator. This required individual conditions rules for each possible configuration, making full use of the WooCommerce core structure to apply those rules during checkout.
Building a custom configuration is always a learning experience—this is simply part of the customizing process. Building custom plug-ins is a passion of ours, however, and that passion translated into a clean and highly functional site with a fully configurable line of products.
We learned a great deal about the core structure of WooCommerce, as incorporating our plug-in required us to delve deeply into it. We also developed useful strategies for simplifying custom configurations for website administrators, who need to be able to change elements and add products in a user-friendly way after the site is published.