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.

Client Background & Requirements

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.

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 in the following manner-

1. 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 – 2cm 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.

Screenshot : Setting Up Product Attributes for Tile Base

Screenshot : Tile Surface Selection Popup Interface

2. 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.

Screenshot : Tile Base Selection Popup Interface

3. 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.

Screenshot : Placing Orders for Multiple Tile Slabs

4. 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.

Screenshot : Tile Edge Cutting Options

Screenshot : Selecting Tile Edge for Cutting


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.

Need a Product Configurator for your WooCommerce Site?

Tell us your requirements