The main task of this plugin is to create a form to calculate window configuration, price and make an order of it.
You can create combinations of products, set their prices and sizes, define additional options.
It is possible to calculate total price online and make an order.
Download the zip file of the plugin from the repository. After go to the admin part of your site to the Plugins - Add New page.
To open the file uploading form click the "Upload Plugin" button on the top.
After select the downloaded zip file in the form lower, submit it and click "Activate" button.
The next you might need to check is the plugin settings.
If you active theme is based on "Bootstrap 4" framework, then the calculator will styled the same as your active theme. Otherwise, tick the "Include full styles file" option to make the calculator looks correct.
Sometimes server's configuration might have problems with storing sessions. For example, if the calculator can't loses the cart content on the page update. In this case tick "Store session in the DB" setting which works much reliable but probably a little bit slower.
If for some reasons you need to disable some of plugin's scripts, change the "Scripts including type" setting to "Multiple files" and de-select them in the list lower.
If you need to migrate all created plugin data from one site to another then use the "Export/Import feature" for this. Click the "Export" button once to get the data-file. Then choose this file in the file input on the target site and click "Run" once to run the import process. Be sure the old site is available to get the images from there.
Remember the script downloads and uploads only images that are defined in the settings. Images from the content part will not be replaced.
To create the initial plugin's data on your site click Generate demo data button once. That will give you a starter data kit to play with.
The first step of work with the plugin data is the creating of a simple product with variations.
The possible options of a product are:
Don't forget to set product's thumbnail - it will be used while creating of combinations, alternatively the first variation thumbnail will be taken for this.
Each product must have one or more variations with options:
Here is an example of individual prices HTML table. The first row means the widths range and the first column is heights. The prices are in the cross of these sizes.
Each combination have the following settings:
Common pricing type have the following settings:
Individual pricing type have the following settings:
There are two main types of canvas: static and dynamic. The static type doesn't change visually while products size adjustment then the dynamic type makes products have and change their visual sizes accordingly to the current size.
Decide which type you want to use before the adding of items on it.
Common pricing type supports only static canvas size while individual pricing type supports both types.
Select a product or element to add it on the canvas and click the "Add item" button. All of these products you see on this list are taken from the "Windows Calculator - Products" admin part. But the elements are built in the plugin's code.
Set the product position and size on the canvas by changing X/Y/Width/Height values. Also, you can use the mouse for changing this options.
Will be better to fit the canvas size for its products to shorten the white space in it.
Dynamic canvas is based on the table. Each cell of it might have nothing or only one item within.
Use rows/cols number settings to change the table cell number. Cells might be extended right or down if there is a space to do this. Use right and down cell arrows to do this. Extended cells might be reduced back using left/up arrows.
Select a product or element to add it on the canvas and click the "plus" button of a cell - the item will be added within. All of these products you see on this list are taken from the "Windows Calculator - Products" admin part. But the elements are built in the plugin's code.
This is also possible to change the horizontal/vertical alignment of each cell using the special fields.
As the canvas is dynamic its "height" setting might be ignored on the frontend.
Each individual type canvas product have a settings modal with the following:
Order setting of any element on the canvas affects on the items overflow and cart item data order.
You can hide width/height controls for specific item. The slider and the input field.
This is possible to use combination controls for an item. In this case individual priced item will not use it's own size inputs but use the inputs/sliders of the whole combination, namely placed around the all products on the canvas. But keep in mind onlt one item per combination can have this option enabled.
There are a few util-items available for use on the combination canvas. They have no power over the pricing and will not be in the cart. Here they are:
If you want to make the possibility to order the combination using WooCommerce, you need to create a sibling WooCommerce product with the "Windows Calculator Combination" special type. This product will be added in the WooCommerce cart and have all selected combination setting.
This product should have the same title and thumbnails as the combination for avoiding users confusing. Afterward, select this product on the combination admin page in the field called "Attached WooCommerce product" and save the changes.
An option can have one of allowed views. Each view has specific settings, such as image size for the imaged views.
Each option must have one or more values. Here are its main options:
All option types can have a description. The editor is used for it. It can be output as a tooltip, modal or string.
Use "Show with options" setting if you need to show the options only then another one (or few options) is checked. This is possible to combine the rules with AND/OR conditions. Select an option in the dropdown list and set the index of one of its values in the second field. If you need make this rule chained with the next, set "Condition" field to "AND".
This is possible to define with which product variations the option will be shown using the "Show with product variations" setting. Select a product from the dropdown menu and define it's variation number from zero. Add more rule lines if you need.
This is lso possible to define with which combinations the option will be shown using the "Show with combinations" setting.
You also can limit the option availability by custom rules such as current product size or price and enable/disable this setting accordingly.
Simple adds the price value to the combination price.
Example: value 15 + combination price 100$ = 115$.
Gets multiplication of the value with combination width and height and adds it to the combination price.
Example: value 0.01 * 50cm of width * 40cm of height + combination price 100$ = 120$.
Gets multiplication of the value with two combination widths plus two heights and adds it to the combination price.
Example: value 0.1 * (50cm of width + 40cm of height) * 2 + combination price 100$ = 118$.
Gets multiplication of the value with combination width and adds it to the combination price.
Example: value 0.1 * 50cm of width + combination price 100$ = 105$.
Gets multiplication of the value with combination height and adds it to the combination price.
Example: value 0.1 * 40cm of height + combination price 100$ = 104$.
Gets combination price and multiply it with price value.
Example: value 1.2 * combination price 100$ = 120$.
Gets multiplication of the value with combination width and height and multiply it to the combination price.
Example: value 0.01 * 50cm of width * 40cm of height * combination price 100$ = 2000$.
Gets multiplication of the value with two combination widths plus two heights and adds it to the combination price.
Example: value 0.1 * (50cm of width + 40cm of height) * 2 * combination price 100$ = 1800$.
Gets multiplication of the value with combination width and adds it to the combination price.
Example: value 0.1 * 50cm of width * combination price 100$ = 500$.
Gets multiplication of the value with combination height and adds it to the combination price.
Example: value 0.1 * 40cm of height * combination price 100$ = 400$.
After all previous steps done, you can create a calculator post.
First of all, select the combinations for use in this calculator and set their order. Also, you can select combination categories to show them accordingly in the calculator.
There are two ways to output the options: show them in one section or as blocks of few options. Use the options source setting to change the appropriate way. For the first way select and sort specific options, but for the second way do the same with the option categories. Use any free posts sorting plugin to change the order of the options within each category.
There are a few built-in layouts for use. The steps layout has another setting called "steps" instead of the options selector. There you can define steps and their order in the calculator. Three steps are built-in: combinations, combinations categories, and the canvas. The other steps are the options categories.
Save state to URL setting will allocate the current URL arguments according the current calculator options and values. After page refresh all settings will be applied again.
Generate cart item thumbnails setting replacing the cart item's thumbnails with the active canvas image.
preserveAspectRatio="none" attribute to SVG image to make it rubber scalingIf you have really many of different combinations and it slowdown the performance then check the Load combinations via AJAX option.
Enable order option enable/disable "order" and "add-to-cart" buttons on calculator page.
By default product cart is enabled. However, this is possible to disable it to not store the selections and complete the order immediately with the only selection.
If you are going to get the orders through email, then select one of the existing Contact Form 7 forms in the Order contact form setting and enable the Contact form order button.
Also, contact form order button have text and class settings.
This is possible to clear cart then the contact form is sent.
To get the order info as a string add the [wincalc-cart] shortcode
in the Message body field.
If there is no attached PDF file in the email then add the [wcpw-cart-pdf]
shortcode in the File attachments field.
This is possible to get the orders using WooCommerce. For this enable WooCommerce order button and change its text and class settings.
There is a setting for a WooCommerce order redirect to lead the customer to the cart, checkout or whatever page after add to cart action.
You also can change text and class of main cart action buttons.
There are a lot of view settings for the most calculator's parts. There are no limitations and you can combine them as you want to have the appropriate view.
Calculate online option enables/disables any amount values and cart on a calculator's page.
Define the required price currency and format using the special settings.
If you need to add some tax to the total sum, then set tax value size in percents.
Also, you can change some text strings and price format.
Enable cart PDF settings to have a special button in the cart section to open the PDF file in the new tab. It will show all current cart content if it's enabled or only current selection if the cart is off.
Lower you can find the most page parts settings to adjust.
Moreover, you can pass extra CSS to the pdf file using the special setting.
If that's not enough then try to customize the view of the print page.
All calculator buttons can have different classes for their styling. As the main plugin styles are based on the Bootstrap 4 framework you can use any from the available styling classes of buttons.
Also, there are a few classes to control buttons text and icons appearing:
There is also a possibility to add preset controls to the calculator. This setting will output two buttons to save the current calculator selection to a file and load it from this file.
This is possible to change all static text parts of the calculator output.
There are a few options only for the steps layout.
This is possible to create a WooCommerce product of a special type with an attached windows calculator within.
This is necessary to select a calculator and a combination which will be used for showing instead of the default WooCommerce product content. Doesn't matter which combinations/categories are selected for this calculator - there will be only the selected combination. Also, the calculator's own cart will be disabled. All other calculator settings will be used as they are.
To make this product purchasable define the regular price of the product. As windows calculator products mostly have variable amount, so the price will be output with a "From" prefix.
If you want to customize some views of the plugin and don't lose these changes while updating the plugin
create the "windows-calculator" folder in your active theme (or child theme) directory and copy into it files
from the plugin's "views" directory saving the sub-directory hierarchy.
The plugin is trying to get a view from the theme at first, and if it doesn't find this view, it gets the view from the own directory.
For example, if you want to customize the cart print view copy the
%plugin_folder%/views/cart/pdf.php to %your_active_theme%/windows-calculator/cart/pdf.php.
Now you can customize this file in your theme.
In case you need to modify the stored prices according to some situation, e.g. according to currencies exchange, you can use a couple of filters for this. This extra code changes all product prices and any additional type options.
The price has doubled in the lower example. Change the return of the getWinCalcPriceModifier function according to your needs.
<?php
function getWinCalcPriceModifier()
{
return 2;
}
add_filter('wincalc_product_variations', function ($variations, $id) {
static $cache = [];
if (isset($cache[$id])) {
return $cache[$id];
}
$modifier = getWinCalcPriceModifier();
if ($modifier == 1) {
return $variations;
}
foreach ($variations as &$variation) {
$variation['price'] = round($variation['price'] * $modifier, 2);
foreach ($variation['prices'] as &$price) {
$price['value'] = round($price['value'] * $modifier, 2);
}
unset($price);
}
unset($variation);
$cache[$id] = $variations;
return $variations;
}, 10, 2);
add_filter('wincalc_option', function ($option, $id) {
static $cache = [];
if (isset($cache[$id])) {
return $cache[$id];
}
$modifier = getWinCalcPriceModifier();
$handledTypes = [
'addition',
'area-size-based-addition',
'perimeter-based-addition',
'width-based-addition',
'height-based-addition'
];
if ($modifier == 1) {
return $option;
}
foreach ($option['values'] as &$value) {
if ($value['influence_on'] == 'combinations_price' && in_array($value['type'], $handledTypes)) {
$value['price'] = round($value['price'] * $modifier, 2);
}
unset($value);
}
$cache[$id] = $option;
return $option;
}, 10, 2);