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.
To integrate the plugin with WooCommerce plugin tick the "WooCommerce integration" setting. It will disable the order modal and send products into WooCommerce cart.
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.
Save settings before the run
If you need WooCommerce integration and need generate those products too tick the WooCommerce integration setting and save the settings before the demo-data generation.
Combination Settings
Each combination have the following settings:
-
Thumbnail will be used in a combinations list;
-
Pricing type is the most important setting.
It allows to enable/disable common size controllers or individual products size controllers;
-
Description output type - select how to show the combination's description: in a tooltip, modal or inline;
-
Attached woocommerce product - woocommerce product reflection for the shop;
- Canvas width/height - effects on the visual part of the combination;
- Items - products and visual elements of the canvas.
Common pricing type have the following settings:
- Min/max width - set minimum/maximum combination width to order (affects on size slider);
- Mix/max height - set minimum/maximum combination height to order (affects on size slider);
-
Default width/height - set default combination width to order
(affects on size slider and price calculation);
-
Width/height price multiplier - effects on price after size changing.
Value of 100% has equaled direct dependency of the product price to width/height selected by the user.
Increase/decrease this value is affected price multiplying between default and selected width or height.
Individual pricing type have the following settings:
-
Scopes max values - allows to limit the max sum of the scope's products.
Define a scope ID in the left field and max value in the right one, then the sum of these products
will not be more than this value.
Work with the canvas and items
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.
Types support
Common pricing type supports only static canvas size while individual pricing type supports both types.
Static canvas type
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 type
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.

Item settings
Each individual type canvas product have a settings modal with the following:
-
Group for width/height - these settings allows to define an ID of group of item sizes
which will be bonded to each other and change synchronously;
-
Scope for width/height - these settings allows to mark item sizes by an ID. The sum of
the same scope values will be used for slave elements with the same
"Calculate width/height from a scope" setting value;
-
Calculate width/height from a scope - an ID of a scope to calculate the sum of values
from this scope products;
-
Hide width/height controls - if you have a product with the only row/column of prices;
-
Use combination controls - moves the control of the not only product in the
"Individual pricing" mode to the canvas sliders and inputs.
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.
Canvas elements
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:
-
Vertical size element allows to calculate the sum of the products by a scope ID and
have a vertical view;
-
Horizontal size element allows to calculate the sum of the products by a scope ID and
have a horizontal view.
WooCommerce integration
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.
Be sure the "WooCommerce integration" global setting is enabled.
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.
Option settings
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:
- Name - it will be taken from the special setting or from the post title;
- Type - important setting to define the option behavior;
- Values - possible values of the option.
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.
Important notes
-
Options influence at the price is calculated sequenced according to their order;
-
Size based types calculated with a common product size for a common pricing type or with each product for an individual pricing type. Individual product option calculates only for this product.

Types of pricing
Addition
Simple adds the price value to the combination price.
Example: value 15 + combination price 100$ = 115$.
Area size based addition
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$.
Perimeter size based addition
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$.
Width based addition
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$.
Height based addition
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$.
Multiplication
Gets combination price and multiply it with price value.
Example: value 1.2 * combination price 100$ = 120$.
Area size based multiplication
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$.
Perimeter size based multiplication
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$.
Width based multiplication
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$.
Height based multiplication
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$.
Calculator settings
After all previous steps done, you can create a calculator post.
Basic
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.

Behavior
Calculate online option enables/disables any amount values on a calculator's page.
Generate cart item thumbnails setting replacing the cart item's thumbnails with the active
canvas image.
- To be sure the generation will work fine clean the SVG files before using with any cleaning tool, like
SVGOMG
- Don't forget to define SVG width and height attributes for correct image generation
- Add preserveAspectRatio="none" attribute to SVG image to make it rubber scaling
If you have really many of different combinations and it slowdown the performance then check the
Load combinations via AJAX option.
There is also a possibility to add preset controls to the calculator.

Order
Enable order option enable/disable "order" and "add-to-cart" buttons on calculator page.
This is possible to disable the cart 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.
To get the order info correct do not forget to add the [wincalc-order]
shortcode
in the Message body field.
If you need to attach the cart print PDF file to the email add [wincalc-cart-pdf]
shortcode in the File attachments field.
The redirect after the WooCommerce order can be changed.

View
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.

Pricing
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.

Print
The Enable cart print settings allows to add the button to print the current cart items or current selection in case the cart is disabled.
Lower you can find the most page parts settings to adjust.
If that's not enough then try to customize the view of the print page.

Strings and labels
This is possible to change all static text parts of the calculator output.

Steps view
There are a few options only for the steps layout.
