( WordPress development, Web shop) Online Product Configuration WooCommerce

A Racing Bike dealer wanted to create a web shop to sell his products online. He wanted to sell bike accessories and online configurable bikes.

Configurable product (racing bike here) is something which the user can configure visually by choosing different items (like frames, seat posts, handlebars), selecting a color, checking out the final price, adding it to cart and ordering it. This part is something interesting and challenging about the project. Also, it gives an extra edge to this dealer as customers can configure products online.

The Challenges:

Creating a web shop with simple products is easy, but creating an online customizable product is challenging. The challenges were more as the user can visually realize the customized product as he adds/changes the parts. The customized product needed to be visually replicated exactly as it would in real with all part in their respective positions and correct dimensions.

The Solution:

We came up with a solution which involved multiple steps from adding different bike parts, adding default configuration, selecting options for bikes, seeing/modifying the predicted configuration for this options easily.

Now when a user selects any product for configuration, he can see the default configuration, change the product parts and see it exactly the would look like. The price also gets updated on changing any items.

Finally, when the items are ordered, admin can see the list of items selected and can configure the product accordingly.

The configurator was completely responsive, that is, the configured products will appear fine in desktop, mobile, tablets and screen of all sizes.

WooCommerce products page and adding products to cart functionality was extensively modified to achieve the desired goal.

Technical Stack:

• PHP, WordPress, WooCommerce, Foundation CSS, jQuery, jQuery Plugins