Challenge

Our client was looking for someone who could make him a custom-style WooCommerce product page for their bicycle products. He also wanted to ensure that their users could customize the product, choose different options, check the price, and place an order. There was another interesting requirement. He wanted the custom-styled product pages just for some of his new products, but not others.

Our task mainly was to:

• Create the customized product page according to the mockup
• Integrate TM Extra Product Options with our mockup design
• Keep our customizations separate from other normal products
• Make sure our customizations adapt to mobiles and tablets
• Make sure it plays well with UX Builder

Our Solution

This is a fun project, but required careful planning. We had to be careful to implement features so that the aesthetics are not ruined. And we also had to take care of any existing functionality so that they are not disturbed.

Here’s how we solved the problem:

Controls on Admin

We prepared settings in such a way that the client can easily switch between the new style and the old style. It helped keep the old product pages intact, and the new changes remain on its own separate place, as the client wanted.

TM EPO Integration

We tapped into TM EPO integration for WooCommerce to get the product customization to work on our new product pages. We had to look into how TM EPO handled custom options. We then focused on populating and debugging the interface based on the data that was available to us. It was adventurous to say the least.

Custom Templating

We had to implement a templating system for our unique requirements. We tried to keep it as separate from WC templates as much as possible. Ultimately, this has let us make our changes as freely as possible, without disturbing the existing styles and templates.

Support for Different Screens

We submitted the initial design quickly, but devices are notoriously different, and we were quickly getting feedback on different issues. For example, older iPads used to handle CSS differently, which caused many issues on those devices. We applied changes so that now it appears perfectly on all common devices, including iPads and iPhones.

Designed with UX Builder in mind

The main content was made with UX Builder. So we had to work around it to implement various features. Documentation for UX Builder was scarce. And to make it even worse, proper hooks were absent as well. We had to find other routes to make it work.

Putting it all together

It had some delightful challenges, but we pulled it off. And the result was astounding, breathtaking! Product customization feature with shiny product images got our hearts pumping. We are also happy that we got more sub-projects from the client for other modifications later on.

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.