How to create a product with measurement pricing in WooCommerce

If your products are priced based on user-input measurements like “width” and “height,” you’ll discover that WooCommerce alone isn’t quite up to the task. You’ll require an extra plugin capable of integrating input fields into your products, enabling pricing calculation through formulas or lookup tables.

This guide will walk you through the process!

What we’re going to build

We’ll develop a carpet configurator within WooCommerce, allowing users to customize the size of the product according to their needs. It will be possible to order a carpet of a preferred size by entering “width” and “height” values. Yet it will possible to choose among predefined sizes of the product for faster checkout.

Additionally, we’ll incorporate a custom pricing system based on measurements (utilizing the mentioned above “width” and “height” values) on top of the product’s base price. Flexible pricing based on maths formulas is one of the features of Uni CPO plugin!

Here’s what you’ll require

  1. A functioning store with WooCommerce (version 6.0.0 or newer) already installed and set up. This tutorial doesn’t cover the basics of WooCommerce setup, so ensure your store is operational.
  2. Our Uni CPO – Product Options and Price Calculation Formulas for WooCommerce plugin. While there’s a free version available, you’ll need the premium version to complete this tutorial. This plugin facilitates the addition of input fields on your product pages, enabling adjustments to the final product price through a range of options.

Product pricing

Before delving into the process, it’s crucial to grasp how your pricing will be structured. WooCommerce mandates setting a base price for products; otherwise, it may interpret the product as free. Thus, when setting up your carpet configurator, establish a base price representing the minimum cost of your window. On the products archive page the price label for this product will be shown as “from XX”. For this example I have set the product price equal to €60. Important: product type must be set to “simple”! After setting the price and the correct type of the product we must save it as draft or publish.

Customers will be using “width” and “height” options and these values will take part in the final price calculation. Alternatively, customer will be using “dimension” option to choose among predefined sizes and the price will be set based on the chosen option.

Step 1: Product form configuration

Adding product custom options

While a window configurator typically offers various options, this tutorial primarily focuses on measurement-based pricing. Therefore, we’ll demonstrate how to incorporate “width” and “height” fields. These fields enable users to input custom sizes, consequently adjusting the total product price accordingly. It’s worth noting that this is merely an illustrative example, because your product may utilize different/additional options and/or pricing strategy. Yet it is a solid example of a product configuration that will inspire you to create a new one and best suitable for your type of product.

Uni CPO uses visual form builder. It can be accessed from product edit screen by clicking the button “Go to the builder”.

We should drag and drop modules and options into the builder content area. This the UI of the pro version of the plugin and it shows more icons compared to the free version, which means we can use more features.

Using the visual builder is quite easy and straightforward. First thing we add a Row. It already contains one Column. Modules can be added into the Column then. First option we add is Select and we will offer the customers a choice to choose either among the pre defined sizes or define custom “width” and “height”.

Now we open module settings by clicking on “cogs” icon shown in the blue module overlay UI. We open then “Main” tab of the module settings modal window:

There are three important settings: field slug (1), required? (2) and label (3). Field slug value is a unique option name used across the site. For this example we write down word “type” and the whole field slug becomes “{uni_cpo_type}”. This name is also a variable that can and should be used in the price calculation formula. Next we set option’s label – the description name of the option visible on the page.

Next, we open “Suboptions” tab in order to add two choices: “predefined size” and “custom size”:

This is what we did here:

  1. Click “Add” button
  2. Write down the title
  3. Click “Add” button again
  4. Write down the title
  5. Click “Save” to save option’s settings

Then, we add a new Column below the first one into the same Row. We set styling settings – display: flex and gap: 20 px. We want to add two input fields next to each other with a space of 20px between them. Now click “Save”.

Next, we add an option Text Input

These are the settings for “width” option: min value, max value, step and lable. Also, the option slug name: “width”. Now we have a new variable “{uni_cpo_width}” and we will use it later in our price formula. Next step – we are going to setup fields conditional logic for this field. So, click on tab “Validation” and proceed with these settings:

Here we have:

  1. Enable the conditional displaying logic
  2. Choose {uni_cpo_type} option – we are going to display “width” based on the value of “type” option.
  3. Choose “equal”
  4. Choose “Custom size” – we are going to display “width” if “custom size” is chosen
  5. Click “Fetch the rule”
  6. Click “Save”

Next, let’s add “height” option. We are going to duplicate “width” to make things faster:

After the option is duplicated open its settings, change the slug to “height”, change the label to “Height (cm)” and setup the fields conditional logic. Click “Save” then.

Next step – let’s add “size” option type Select to offer pre defined sizes of the product. First we add Column between already existing two. Add Select option in the newly added column, set option’s slug to be “size” (now we have “{uni_cpo_size}” variable!) and label to be “Size”. Add these suboptions:

This time we are using “price/rate” settings for each suboption. This way we define prices for each choice. Practically, it means that when one of these suboptions is selected – variable “{uni_cpo_size}” will have value equal to the defines “price/rate”. It is important step since a bit later we will use this variable in our price calculation formula! That’s not all. For sure we want to add fields conditional logic. It can be done in the similar way like we did for “width” and “height”, but we want to Click “Save” now.

Finally, we are going to add Radio option to offer customers different colors of the product. This option will also have its own variable (all options do have its own connected to them variables! 🙂 ). But this option will not modify the price, so will not be setting “price/rate” values for each suboption.

Let’s review what we have got so far:

Custom product form

If you are feeling like difficulties managing custom options – feel free to check our tutorials and resources about Uni CPO.

At the end of STEP 1 we have all custom product options added and ready to be used in product price calculation. We also display product options “Size” and “Width”/”Height” conditionally.

Step 2: General settings

Open General settings by clicking on the “cog” icon on the panel. We have to enable displaying of the custom options and enable custom pricing:

General settings modal window

This is an important step! Custom options can be turned on and off any time without deleting actual options and their values. Quite often users forgot to enable displaying of custom options and price calculation though.

Extra step: we go to “Price Settings” tab and set “Starting price” setting. This way we will achieve displaying “from XX” in place of the product price on product archive pages.

Step 3: Change the product price

Product price for predefined sizes

When customer choose type “Predefined size” it must be possible to choose one of such sizes. Do you remember we have set prices for each size? Now we are going to use them as a product price. This is what we have to do:

WooCommerce product price based on chosen custom option
  1. Click on “Fx” icon on the panel to open “Main formula” modal window.
  2. Write “{uni_cpo_size}” variable inside the textarea OR click inside the textarea to start editing and then click on “{uni_cpo_size}” button just below the field.
  3. Click “Submit” to save the formula.

We have just set up our first pricing formula. It was fast and easy. The formula itself is just a variable that will be equal to the price set for the chosen suboption/choice. Done!

Product price for custom dimension

The idea behind pricing for custom dimensions is to charge customers per 1 sq. m. Let’s say, the base price for 1 sq. m. is 60€. Example: if customer chooses 130cm width and 200cm height, the price must be (130*200)/10000*60 = 156€. In this formula “(130*200)/10000” is the area in sq m.

We are going to add a non option variable (NOV) that will be calculating the area in sq m. It is easier to split the final formula into chunks or pieces so then it is easier to understand how it works.

Non option variable (NOV) in Uni CPO
  1. Click on “NOV” icon to open the modal window.
  2. Enable “non option variables” functionality
  3. Add new NOV
  4. Define its name. It works similar to options’ names – at the end we will get a variable that can be used in price calculation formula as well as other NOVs which are created below the current one.
  5. Write our maths formula for area calculation by using options’ variables
  6. Click “Submit” to save the data

Non option variables are unique feature of Uni CPO and it is even more powerful tool! In this tutorial I am just tipping the iceberg of this functionality. You certainly should read more about it in our documentation.

Now we have a new variable that is equal to the area of the product based on customer defined “width” and “height”. We open main price calculation formula modal window again and adjust it:

Price formula conditional logic in Uni CPO
  1. Enable formulas conditional logic
  2. Add new rule
  3. Choose option “Type” that must be equal to “Custom size”. This is a condition and when it is met, then the formula defined in the rule will be used instead of the main formula.
  4. We wrote this formula inside the rule as: “{uni_nov_cpo_area}*{uni_cpo_price}” where “{uni_cpo_price}” is a special variable that is equal to the product price set in WooCommerce settings. I use it when I want to control my base price value from WC edit product screen!
  5. Click “Submit” to save the data.

And we are done! The product we have at the end:

Creating a product with measurement pricing recap

Building a product with measurement-based pricing in WooCommerce is certainly achievable with Uni CPO. We have learned to add custom options and configure pricing for our product. There are many more types of products – like windows, doors, shutters, printing cards and banners etc – which are using similar configuration. You could easily apply this tutorial even if you sell a different type of product. Should you have any questions, don’t hesitate to get in touch with us. We’re here to offer our assistance!