Challenge

Our client wanted a product customizer for his Jewellery website. He wanted a Ring Builder to work with 22,000+ WooCommerce products and make it so that every ring is reachable through this interface. The sheer collection of products and how it was laid was phenomenal. We liked the challenge so much that we took the job.

Our task mainly was to:

• Client had products for each of his possible rings (22k+ rings)
• The products had appropriate attributes
• Client wanted it to start from a default ring
• Client wanted it to be able to change various aspects of that ring step by step
• We would need to show the choice immediately (live preview)
• We would also have to take care of future product additions
• We would also have to prepare it so that no empty rings are shown under any option throughout the builder
• Client also wanted sharing options and email options for the product chosen

Our Solution

This is a complex project. But we have prepared this to be as easy as possible. Plus, we have in-depth articles and documentation to help anyone who wants to set up a microlearning platform.

Here’s how we solved the problem:

Customizable Default Product

We have prepared this to behave in Semi Automatic nature. There is a default product that can be set, which is at the heart of the plugin. The builder initially shows the default product, and as the user goes through the steps, it lets them change various attributes of it.

Live Preview

The builder shows a preview of the Product being created step by step. It shows the price, sku etc. of the product right from the WooCommerce product. Additionally, it also lets the user share the product or email it to a friend.

Product Attributes

Product Attributes are a part of the nuts and bolts of the plugin. It works depending on these attributes. The attributes are shown as steps, and the user can change them to get the product they want. Another thing is that we had to cancel any options that result in an empty list. So we had to design it in such a way that no option shows an empty list. Every choice leads ato t least one other option to choose from. It gets very intuitive and engaging once someone uses it.

TM-EPO Implementation

Our client wanted some custom fields to be added, such as Ring size and sample ordering. We have added support for them as well. Now it works with TM Extra Product Options as they wanted.

Responsiveness

The builder has many elements. So it was a challenge to fit all this functionality into a small screen. It had different arrangements of elements for different screens. It was a good challenge for us, and we have succeeded in it.