If you sell products that are priced based on measurements input by your user (“width” & “height” for example) then you’ll find that WooCommerce alone doesn’t fit the bill. You need an additional plugin that can add input boxes to your products and allows to calculate pricing based on a formula or a lookup table.
This tutorial will show you how it’s done!
What we’ll build
We’ll create a wooden window configurator in WooCommerce, where the user can freely choose the size of the window they need. See step 2 in the example below.
We’ll add a custom measurement price (depending on values in “width” and “height”) on top of the product base price.
What we’ll need
To complete this tutorial, you’ll need the following:
- A store with WooCommerce (3.4.0 or higher) installed and configured. Learning WooCommerce is not the goal of this tutorial so we assume you have it up & running.
- Our Advanced Product Fields for WooCommerce plugin. The plugin has a free version, but to finish this tutorial, you’ll need the premium version. This plugin allows you to add input fields on your product pages that can alter the final product price through various options.
Understanding how the product pricing will work
Before we dive in, it’s important to know how your pricing structure will work. WooCommerce requires a base product price to be set (otherwise it will think your product is free). So when creating your window configurator, you should set a base price which is the minimum pricing your window will cost.
The “width” and “height” option will add an additional calculated cost onto that base price.
1. Configure your product
A window configurator needs a lot options but this tutorial focuses on measurement pricing, so we’ll only show you how to add a “width” and “height” field. This allows your users to enter a custom size and the total product price will change accordingly. Keep in mind this is just an example. Your product can of course have different measurement units.
Adding the “width” field
If you have our plugin up & running, there are two ways to attach extra fields to your product:
- Via the menu
WooCommerce > Product Fields. Use this option if your fields should be displayed on multiple products as it allows you to create the fields once and attach them to several products in one go.
- Via the
Edit Productscreen. Use this if the fields are only needed on this specific product.
Pick the option that suits your situation best and click on
Add Field to create the first field “width”. Below are the settings for this field. Click on the image to enlarge:
Pay attention to these settings:
- Set the type to Number.
- If you don’t want users to enter decimal numbers, set number type to Integer.
- For better UX, set a default value, a minimum and a maximum.
- In the last setting, wrapper attributes, you can set the width of this field on the frontend. This gives you a few options to alter your form’s layout. Set it to 50% so we can layout the “height field” next to it.
Adding the “height” field
Next up, the “height” field. You’ll notice the settings are very similar to our first field:
The settings are the same as the “width” field, but also enable the Adjust Pricing option and set the pricing type to Formula.
2. Change the product price
Now that your fields are setup, we’ll configure how the additional cost should be calculated. Generally, there are two options to calculate measurement based pricing:
- Via a formula where you multiply a unit price with the input from the user. For example, if a square centimetres costs 20 cents, your formula will be
- If your pricing can’t be distilled into a formula, you can use a lookup table.
Both methods will be explained below.
The most frequently used formula to calculate measurements is to multiply a unit price with the measurement inputs given by the user. We’ve got a complete guide on how formulas work, but we’ll quickly run through it here as well:
- Find the
widthfield ID. All fields have an ID and it is displayed in the backend. More specifically, you can see the ID here:
- Now, in the
heightfield settings, scroll to
Adjust Pricingand enter the formula
(([field.5e8ecdf46ea7d]*[x])*0.20)*[qty]. Here’s what each part does:
[field.5e8ecdf46ea7d]points to the
widthfield. Make sure to replace 5e8ecdf46ea7d by the actual ID of your field.
[x]points to the value entered in the height field.
0.20is the unit price in our example. Change it to your unit price.
[qty]points to the selected quantity
If you need some more help, please read our guide on how formulas work.
Lookup table pricing
If your pricing structure can’t be written as a fixed formula like above, then you probably want to use a lookup table.
How does it work?
A lookup table is an Excel-like table holding the measurement ranges and their price. Here’s an example table for our “width” and “height” example to make it more clear:
Across the horizontal x-axis on the top row you can see values in centimetres, i.e. 200, 220, etc. These are our values for the width of the window.
Across the vertical y-axis, you’ll see the values for the height of our window (100 cm, 120 cm, etc.).
The other values are the prices that belong to each width/height pair.
If a user enter 240cm as their width and 140cm as their height, you can use the table to see the addon price will be $76:
What if a user enters a width and height that is not seen in the table? Then the system will round up to the nearest pair, effectively allowing you to create pricing between ranges. Here’s an example:
If your user enters 210cm width by 150cm height, our plugin will find the nearest fitting pair from the table by rounding up (which is 220 by 160). The price will be set to $78.
Implementing a lookup table
Defining the lookup table needs a little bit of coding ability. We don’t have a user interface for you to create the table, so instead you can define the table with a code snippet. If you’re unsure on how to add code snippets to your site, read this article first.
Let’s distill our example table above into a code snippet:
Here’s what you should know:
- Each of your lookup tables should have a unique name. Notice
$tables['yourtablename']where yourtablename should be replaced with the name of your table. It should only contain letters and underscores.
- The table is build by a 2 dimensional array. The first level contains the numbers of the x-axis of our table, which contains the “width” numbers (200, 220, 240, etc..).
- The second level is a key value pair written as
key => value. The key contains the numbers of the y-axis (the “height” values in our example). The value contains the price.
Now that our code snippet is implemented into our theme, we can use a formula to call upon the lookup table. Go back to your “height” field’s Adjust Pricing setting and enter the formula:
- lookuptable() is the function we’re using
- lookuptablename is the name of your table as defined in the code snippet above.
- 5e8ecdf46ea7d is the ID of your field for the x-axis. In our example, it’s the Width field’s ID.
- 1d3exl146en4w is the ID of your field for the y-axis. In our example, it’s the Height fields’s ID.
Creating a product with measurement pricing recap
Creating a product with measurement pricing in WooCommerce is definitely possible even if it requires a code snippet.If you have any questions, please contact us. We’re here to help!