In this tutorial, I am going to show you how to re-create a product like on blinds4udirect.co.uk in your WooCommerce store by using Uni CPO plugin. I have picked a random product – this one ‘Splash Scarlett Roller Blind‘. The scope of this tutorial is to teach you how to:
Are you excited to read it? Let’s begin! 🙂
These are the original options used by ‘Splash Scarlett Roller Blind’ product:
Let’s recap:
There are a few options, so it will be easy to add them.
I have created a video that shows the process of adding options as well as other parts of the process of configuration of this product.
The critical part of this product is a possibility to set a measure in the measurement unit of your choice. It could be ‘mm’ or ‘inches’.
First, let’s set up a proper validation logic. The following is a compiled data of what I am going to add:
Width
Height
Digits validation pattern (general)
data-parsley-pattern="/^\d+$/"Per width per cm:
data-parsley-pattern="/^(-?\d+(?:[\.]\d{0,1})?)$/"data-parsley-min="60"data-parsley-max="110"step="0.1"Per width per inches:
data-parsley-pattern="/^(-?\d+(?:[\.]\d{0,2})?)$/"data-parsley-min="23.6"data-parsley-max="43.3"step="0.01"Per height per cm:
data-parsley-pattern="/^(-?\d+(?:[\.]\d{0,1})?)$/"data-parsley-min="90"data-parsley-max="150"step="0.1"Per height per inches:
data-parsley-pattern="/^(-?\d+(?:[\.]\d{0,2})?)$/"data-parsley-min="35.4"data-parsley-max="59"step="0.01"With the help of Google, I have calculated the minimum and maximum dimensions per each unit. The general digits validation pattern should be added as a fallback when a customer switches back to ‘mm’. It validates only integers because mm based values cannot be decimals. Please, check the video mentioned before to understand how I did configure the validation logic. I have also styled the form a bit, just to make it look fancier. Nothing special, just some margins are set and new columns/rows where added.
Second, setting up auto conversion. For this purpose, I have added dynamic text to the form by using Dynamic Notice option. Then I have created two non-option variables (NOV) and outputted them in that Dynamic Notice.
They always have values in mm because my price table is based on mm. I output them like that just to testify that auto conversion actually works. It does not matter in which units I enter width and height – those two NOVs always have values in mm. I am going to use these values later.
It seems to me that in the original product from blinds4udirect site, the price is set depending on width and height. Also, I have noticed that extra 3£ are being added when chain type is chosen to ‘metal’. So, I am going to use a table of prices too. The small one, just as an example. The base unit is ‘mm’; it means that the prices in the table are set based on measures in ‘mm’. Based on this fact, I am going to create measurements auto conversion from the chosen unit type to ‘mm’. Whatever measurements unit is selected by a customer, first what I do is converting to ‘mm’ (cm -> mm or inches -> mm), then pick the price from the table according to width and height in ‘mm’.
I have exported my spreadsheet as CSV, so now it is ready to be imported to Uni CPO and used in NOV matrix. Here is a download link to this CSV.
Also, I have adjusted ‘Chain Type’ option and added ‘0’ as rate value for its first suboption and ‘3’ as rate value for the second suboption.
Finally, my main formula looks like:
{uni_nov_cpo_area_price}+{uni_cpo_chain}
And that’s it. I change the width, and the height of the product and the product’s price is getting adjusted according to the data from the table of rates. Download exported config file. Please, check the video tutorial (link to the video at the beginning of the page) to see how it works.
Cheers!