WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options

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.