WooCommerce Measurement Price Calculator for a Tiles Manufacturer

We customized WooCommerce plugin, theme and developed a custom WooCommerce Extension to allow our client to sell tiles online in a way that allows them to sell tiles based on different decimal calculations (area & length) with a variation-level minimum, maximum and step quantity configuration for all the different types of products.

WooCommerce Measurement Price Calculator for a Tiles Manufacturer

Project Highlights

Plugin Development

Theme Customization

Woo Customization

UI / UX Development

Responsive Design

Client Background & Requirements

  • Our client is a leading tiles manufacturer based in Europe.
  • The client wanted us to develop a customized WooCommerce website that allows them to sell tiles online by modifying parts of WooCommerce in a way that allows them to sell them based on decimal quantities which result from different calculations (area, length) and unit types like  (m2, m and pcs.)

How did we provide solution?

We decided to approach the problem by customizing WooCommerce and developing a custom WooCommerce Extension on top of it to fulfill client’s needs. We worked on the project as follows:

1. Tiles Calculator Plugin & Product Page Customization

  •  Our client had 4 major requests with regards to the product page –
  1. Tiles are to be sold by calculating the area in m² for most products and pcs for a few products (like Stair blocks).
  2. A customer can buy tiles only in the range of specified minimum quantity to the specified maximum quantity due to logistics costs.
  3. Tiles come in different sizes (formats), so price and min-max quantity should change based on the selection made by the user.
  4. Every tile (product), format/ size (product attribute), and variation (a product & size combination) had a lot of specific information that needed to be available in the dashboard for admin once the customer placed an order.
Product Page of Product Variation

 Screenshot : Variation Product Page

  • To fulfill these requests, we first created custom fields using the ACF plugin on Product Level (Tiles) and with some workaround on Product Attributes (Format). Product level fields were Product Group, Surface, Delivery Time, etc. i.e. anything that will remain the same regardless of the variation. Product Attribute Level will have fields like Length, Breadth of the format.
  • To implement min-max quantity for each product, we created custom fields using WooCommerce hook and created four fields on variation level – Min, Max, Step, Unit (m2 and pcs.)
Tile Area Calculation

 Screenshot : Tile Area Calculation Popup Interface

  • Using WooCommerce hooks and jQuery, we were able to set min, max, and step dynamically on the quantity field of WooCommerce when a user selects a format on a product page and as a result, the price would change. Also, when a user inputs the quantity, they are automatically rounded off to a new value based on the step value specified for that variation.
  • If a user would try to add quantity outside the specified range they would be automatically rounded off to min or max quantity on the product page and cart page.
  • Next, we completely customized the product page template to accommodate new sections that would change on AJAX based on the variation choice made by the user.

2. Orders CSV Export Functionality

  • When the user added a product to the cart, all of the custom fields of the product, product attribute, and variation were added to WooCommerce Cart Object and later to the Order dashboard, so that admin can get all technical details related to the order in a single section.
  • Now, the client wanted to get all of these details exported in a single CSV file which they can later import into their ERP system.
  • So we developed a CSV Export functionality that would export all details related to a particular order with all the required custom field values in a CSV file.
  • Admin could generate this file for a particular order through the Order Actions button on the Orders page or inside the individual order page.

3. Theme Customization

  • We customized a lot of theme templates to suit client’s needs and taste.
  • We customized the home page, cart page, wishlist page, category page, and checkout page as per the client’s requirements.
Cart Page Customization with Cart Totals

 Screenshot : Customized Cart Page with Product Details and Totals

Filtering Products on Category Page

 Screenshot : Product Filtering on Category Page

4. Roomvo API Integration

  • Since it is difficult for customers to visualize how tiles will look on their homes, we found an API provider called ‘Roomvo’ which allows a user to upload their home image and recreate the image using the tiles of their choice.
  • We integrated Roomvo API on the product page level by adding a “Visualizer” button on each product page which when clicked will allow the customer to upload a photo and get a visualization of their room with the tile they have chosen.
Visualizer to Select Tiles

 Screenshot : Tile Selection Visualizer

Need WooCommerce Development for Your Business?

Tell us your requirements