Our client is a leading tiles manufacturer and retailer based in Europe. They wanted a solution that allowed their customers to choose, configure and customize kitchen tops as per their needs and the total price is calculated based on the product and different configurable options chosen by them.
Product configurator with multiple options selection using WooCommerce
We developed a custom WooCommerce product that allowed our client, a tile manufacturer based in the EU to allow their customers to completely configure and customize every aspect of their Kitchen Tops to their liking and calculate price based on their customizations preferences.
View Project
Client Background & Requirements
For example – For a Kitchen top, a customer can choose what type of tile slab they want (tile design – Italian or Mediterranean), dimensions of tile slab ( Length, Width) Tile surface thickness (2cm, 3cm, 4cm) , type of surface finish (polished or matt), kind of customizations they want ( Sink / Stove cuts, drill holes, edges treatment) and then based on the choices made by the customer, a total price is calculated.
How did we provide solution?
We worked on the project as follows –
Setting Up Product Attributes and Variations for Tile Base, Surface and Thickness
The base price of the kitchen top is based on 3 important factors – Tile Base, Surface Type and Thickness. And therefore we created product attributes for these criteria and then variation combinations based on each of these criteria. For example – if a Tile Base is “Imperial White” and is available in 2 surface types – Polished & Matt and again each of these are available in 2 thickness sizes – 2 cm and 3cm. Now, we would set up variations combinations in the following manner – Imperial White-Polished-2cm, Imperial White -Matt- 2cm, Imperial White-Polished-3cm and Imperial White-Matt-3cm. And then prices for each of these variations will be set.
Creating a Popup to choose Tile Base with Filter Functionality
Our client had more than 100 different tile bases and so it wasn’t feasible to show them on a single page. So we created a popup where customers would be shown the Tile Bases in a grid format with details like – product image, thickness and price and also allow them to filter tile bases based on thickness and surface type.
Customizing Product Page to allow customer to place order for multiple tile slabs in a single go
Since a kitchen usually has 2 kitchen tops, it is very much possible that a customer would like to order more than one kitchen tops based on the design and layout of their kitchen. So, we decided to implement it in a way so that customers can add as many kitchen tops with different dimensions, surface type, thickness and customizations as they like in a single go. By default, a customer sees one Kitchen Top but is free to add multiple kitchen tops and each of these can have their own dimensions, tile base, surface type, surface thickness and customizations.
Setting Up Custom Fields for Tiles Customizations & Creating Popup to allow customers to choose customizations
For Kitchen tops, our client provided a lot of different types of customizations. Most of them would fall in one of these 3 categories – Cut-outs, Drill holes, Edges Treatment. So we created a repeater custom field that would take customization name, price, calculation logic (Fixed price, edge selection or side selection) and price for each customization. So we created a repeater field in the backend that will take those values and based on client selection calculate the price on the fly. Once this was setup, we developed a popup on the frontend that would show these customizations to customers on a popup and customers would select the customizations they need and accordingly the price gets calculated.
Conclusion
Since WooCommerce is highly customizable, we were able to deliver a solution that would allow customers to configure their product and customize it to their liking.