Main Settings

You choose the styles that will be included in the plugin.

• «Full» is the self-sufficient style file. It applied all required styles to the plugin's elements.
• «Basic» styles are fine for you if your active theme is based on the "Bootstrap 3/4/5" framework. In this case, this calculator's style will be inherited from your active theme's. Despite this, you can also add your own CSS-styling rules.
• «None» value. doesn't include any styles at all. In this case you can create a full custom CSS-style from the plugin sources and tools or by your own approach for styling.
• «Custom styles» include the file with your custom styles such as colors, font-size, and so on. To modify it go to the «Custom styles» sub-page.

The plugin is made using the newest ES6 modules scripts, so there is a setting to select «Scripts including type» - that could be a raw JS sources or build JS bundle.

Sometimes the server's configuration might face problems with the stored sessions. For example the cart contents' disappears on a page refresh. In this case, tick the «Store session in the DB» option. This setting works only if WooCommerce plugin is active.

Custom Styles

It is possible to reconfigure the plugin's styles according to your needs. Don't forget to choose a «Custom full styles file» value of the «Styles including type» setting.

In case your styles are not shown correctly, disable the «Minify custom styles» setting. In other cases keep this setting enabled to keep the CSS-file smaller and save your customers' traffic.

There are two modes for custom styling. The «Simple mode» provides only a few main variables to change. The «Advanced mode» allows you to change a great range of variables, but it requires CSS knowledge.

All the variables of the plugin are available to be changed by using a text editor.

Sometimes the calculator's fonts look very small on specific themes. To resolve this Tune the «Font size» option. You can use any CSS units there, like "rem", "px", "pc", and so on.

In a case of a styling-command error, you will see a message while saving. The styling file will not be saved.

In case you need to reset your styles to their initial state click the «Reset to default» button once.

Export/Import

The first acquaintance with the plugin might be complicated due to the lot of settings available. To make this process easier feel free to use the demo-data generator stuff.

To get the demo-data list click the Get list near the Load demo data setting. The list of entities to create will appear the table lower. This table output all entities names, types, status, and full data dump. This is possible to select only specific entities to be created, but remember some of them depends on each other, so if disable some of the entities, other might be created particularly.

You can try the generation process using the Test mode launch. You will see each entity status individually in a special column. In case the entity isn't complete, you can find some red NULL strings in the entity data dump column. It'll help you to see what data isn't created.

With the Update existent setting on the plugin will try to update the same labeled entities first, and only then create a new one.

The number of created and incomplete entities will be shown under the Import button.

That's also possible to migrate all created plugin data from one site to another. Use the export file from the source site on the target site.

The file will be parsed and in case of success the table of parsed entities will appear lower. You can also try the generation process using the Test mode launch to be sure the data can be created fully. In case of problems you'll see the incomplete status of some entities.

All of the image attachments will be downloaded from the remote host and uploaded into your media library, so be sure the remote host is available at the moment of import.

Templates Customization

Window Calculator plugin has a folder of views that are used to be shown on the front of the site. There is a possibility to customize them as you need and keep the changes while the plugin updates.

To do this select files that require customization in the views list and apply the «Copy to the active theme» action in the form above. Selected views will be copied into your active theme in the windows-calculator folder saving the sub-folders structure. Files copied to your active theme will be marked by a tick icon.

The plugin firstly searches for a specific view in the theme's folders, and if it doesn't find the view there, it gets the view from its own directory.

You can edit the copied views using the «Appearance - Them editor» page.

If you want to delete some views from your active theme choose them in the views list, select the appropriate point in the form dropdown above and apply the changes. The view will be removed from the theme and the plugin's view will be used instead.

Keep in mind plugin might have some changes in the view files while updating. So if you have customized ones some of the new features will not work or might work wrong with them. This way just copy them from the plugin and adjust to your needs once again.

Basic Settings

The first step of work with the plugin data is the creating of a simple product with variations.

Each product have the following settings:

• Thumbnail will be used on a combination canvas;
• Name setting allows to re-name the product for the output but have a different inner post title. That might be helpful for managing a lot of products;
• Cart name setting allows to re-name the product name in the cart. Supports dynamic variables;
• Visually hidden makes the product invisible on the canvas, but it still will affect the price and the cart item.
• Use the main post content editor to set the Description of the product;
• Description output type - changing showing type of the description, "tooltip" for a short description and "modal" for a long one;
• Formula variables for the product level;
• Options - you can select individual product options. They will be available in a special modal and will not affect other products;
• Availability rules to control product output;
• Width/Height rounding step - affects on size sliders steps with individual pricing mode;
• Min/Max visual height settings allow to prevent making dynamic sized products too tall or low. Use a CSS value with unit, for example, 20px, 5rem, etc;

• Spreadsheet source setting allows to set the URL or local path to a spreadsheet file with individual variation prices. It supports XLS or CSV file extensions. To make this setting work, that's necessary to set the Spreadsheet target setting for the variations.

  Then variation settings are handled you can use the Parse prices button near the setting to update the product prices. You also can use the Update prices from spreadsheets bulk action for the products to handle a few products at once;

• Unavailable size message to output a string if the current product size from the Prices table have an empty price. Allows to override the calculator-level message for that product individually.

Product Variation

Each product must have one or more variations with the following settings:

• Name of the variation to output. Optional for single-variation products;
• Notes of the variation only for the admin part and developers;
• Thumbnails to output stack of images while variation is active. Each thumbnail can have own availability rules;
• Simple price stores one numeric value and is used by the common pricing type combinations;
• Prices table stores the table of widths, heights, and prices, and is used by the individual pricing type combinations. To set these prices just paste an HTML table of widths, heights and their prices in the editor field. Each new variation will have a sample of the table in the editor field. See more info about the table;
• Spreadsheet source setting allows to set the URL or local path to a spreadsheet file with individual variation prices. It supports XLS or CSV file extensions. This setting works the same as for the product level and just overwrites it. That's not necessary to use this setting if you store all price-tables in a single file;

• Spreadsheet target settings group allows to define where the price table is placed in the spreadsheet file. First of all, that's necessary to define a file page to work with (for XLS files). Next, you need to define a top-left table cell coordinate in the [LETTER][NUMBER] format, for example "A1". This cell is usually empty and placed between the width and height ranges.

  After define the bottom-right cell coordinates, which indicates the biggest product size.

  Then the settings are handled, you can use the Parse prices button near the Spreadsheet source product setting to update the product prices. You also can use the Update prices from spreadsheets bulk action for the products to handle a few products at once;

• Default sizes allows to define default width and height of a variation. Alternatively, the average values from the table will be taken for this;
• Round price to sets what price will be used then product size is in between the individual prices table values. The product can have the closest upper/lower size price or change it right in the middle between the near sizes;
• Snap width/height settings allow to make selectable only sizes listed in the price table. It means that will not be possible to select a size in between of two height or width values;
• Unavailable size message to output a string if the current variation size from the Prices table have an empty price. Allows to override the calculator and product-level messages for that variation individually.
• Formula variables for the variation level;
• Options - you can select individual variation options. They will be available in a special modal above the product.
• Availability rules to control variation output.

Variation Price Table

Individual pricing mode allows to define minimum and maximum product sizes and a price for each of them. At the result this will be possible to select a required width and height for each specific product of the combination.

The price of the selected product width and height will be found in the price table and used to calculate the total of the combination.

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.

Basic Settings

The most important setting of a combination is Pricing type. It allows to use two different modes of providing products.

With the Common pricing type you can output any number of products, but without any size handlers for any of them. Product variation Simple price setting will be used to calculate the total amount of the selected product variations. However, that's possible to output common width and height handlers around all products, and then use the selected size to modify the final amount via the formula variables setting.

While the Individual pricing type outputs all products with individual size handlers. The Prices table setting is used to provide the sizes range and their prices. That way your customers can select specific size for each product individually.

Both modes allows to add additional elements, as inputs and sliders.

Also, all combination have the following settings:

• Thumbnail will be used in a combinations list;
• Name setting allows to re-name the combination for public but have a different admin post title. That might be helpful for managing a lot of combinations;
• Cart name setting allows to re-name the combination name in the cart. Supports dynamic variables;
• Use the main post content editor to set the Description of the combination;
• Description output type - select how to show the combination's description: in a tooltip, modal or inline;
• Attached WooCommerce product - 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 combination properties.
• Formula variables for the combination level;
• Availability rules to control combination availability.
• Price rounding step - allows to set the possible step of the price change.

Individual Pricing Type

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.
• Scopes min values - allows to limit the min sum of the scope's products. Define a scope ID in the left field and min value in the right one, then the sum of these products will not be less than this value.

Common Pricing Type

Common pricing type have the following settings:

• Enable width/height input/slider - this is possible to on/off each specific sizing element for the combination;
• Display width/height in cart - settings allow to show/hide combination size in the cart;
• Min Width/Height - set minimum combination size to order;
• Max Width/Height - set maximum combination size to order;
• Default width/height - set default combination size values;
• Width/Height rounding step - allows to set the possible step of the size change;
• Width + Height min value - allows to limit the minimum combination square. Set the sum of width and height;
• Width + Height max value - allows to limit the maximum combination square. Set the sum of width and height.

Canvas Settings

There are two main types of canvas: Static and Dynamic. The static type isn't changed visually while products size adjustment. Meanwhile, the dynamic type makes products have and change their visual sizes accordingly to their current size.

Decide which type you want to use before the adding of items on it.

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 section. Also, there is a list of helper elements to use on the canvas, such are sliders, inputs and size rulers.

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 a table layout. Each cell of it might have nothing or 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 section. Also, there is a list of helper elements to use on the canvas, such are sliders, inputs and size rulers.

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 for the combination output.

Canvas Item Settings

• Order setting of any element on the canvas affects on the items overlapping and cart item data order.
• Name/Cart name - control element name or name in cart. Supports dynamic variables;
• Display in cart - controls item presence in the cart item properties;
• Visually hidden makes the product invisible on the canvas, but it still will affect the price and the cart item;
• Locked settings makes element not draggable in the admin part to avoid miss moves.

Dynamic canvas

Dynamic canvas products and elements have these additional settings:

• Default width - indicates the default width the cell will have initially (only number);
• Horizontal align - how to align cell content by the X axis;
• Vertical align - how to align cell content by the Y axis.

Static canvas

Static canvas products and elements have these additional settings:

• X/Y placement - where on the canvas the product is placed;
• Width/Height - what's the product static size on the canvas.

Individual pricing

Individual pricing type canvas product have a settings modal with the following:

• ---

  Bind group for width/height - these settings allow to define an ID of group of item values which will be bonded to each other to synchronously;
• Reflect group for width/height - these settings allow to define an ID of group of item values which will be equal to each other while the changing;
• Limit width/height min/max by reflected siblings settings are to not let the element value go out its reflected siblings;

• ---

  Inversely group for width/height - these settings allow to define an ID of group of item values which will be reduced/increased while changing the value of one of them;

• ---

  Scope for width/height - these settings allow to create a scope of sizes to be connected with elements having the same Calculate width/height from a scope ID;
• Calculate width/height from a scope - set scope ID to calculate the element size as a sum of the scoped elements size;
• Limit scoped min/max size by width/height - allows to limit parent scope elements total value by their child (this element) min/max value. Inversely group settings can help to reduce one scope parent size while another is increased;
• Limit width/height min/max by scope parents - allows to limit child (this element) value by the sum of min/max values of its scope parents;

• ---

  Enable width/height input/slider - this is possible to on/off each specific sizing element for the product;
• Display width/height in cart - settings allow to show/hide product size in the cart;
• Use combination controls - product will not use its own size inputs, but the inputs/sliders of the whole combination, namely placed around the items on the canvas. Keep in mind only one item per combination can have this option enabled.

Canvas Elements

There are a couple of util items available for use on the combination canvas:

• Input element allows to output an input field with a defined range and value. Also, it allows to use the same groups/scopes settings as for products.
• Vertical/Horizontal slider element allows to output a size slider with a defined range and value;

Input element have a few specific settings to set:

• Show name outputs element name above the input. You can set it using the Name setting;
• Decoration allows to output vertical or horizontal ruler lines around the input;
• Read only setting will make the input to output the value only, but not enter.

All other settings works similarly to products, but have only one dimension, instead of width/height.

Also that's possible to not define min and max values if element uses Calculate value from a scope setting. For that case min and max values will be filled automatically.

Basic Settings

Each option have the following settings:

• Type is an important setting to define the option controls view;
• Name setting allows to re-name the option for the output but have a different inner post title. That might be helpful for managing a lot of options;
• Use the main post content editor to set the Description of the option;
• Description output type - select how to output the option's description: in a tooltip, modal or inline;
• Formula variables for the option level;
• Availability rules to control option availability;
• Is expanded by default setting is to output the option expanded if option can be toggled.

There are also settings available for specific option types only:

• Values setting controls what values will be available to select for the option;
• Value description type - select how to output a value description: in a tooltip, modal or inline;
• Image size setting controls the size of the option values image output. It could be a numeric value of width and height separated by a comma, or string value of a registered image size;
• Image max width setting limits the option values image output in pixels;
• Coupon submit/success/error text settings are used to control texts of a coupon setting;
• Default value setting to output a default value for text types;
• Min/Max settings are used to output the number type option.

Option Value Settings

Each option value have the following settings:

• Name - option value label;
• Cart name - allows to re-name the option value name in the cart. Supports dynamic variables;
• Short info - option to output small additional info near the value;
• Notes - option description only for admin part and developers;
• Formula variables for the value level;
• Availability rules to control value output;
• Display in cart - controls value presence in the cart item properties.

There are also settings available for specific option types only:

• Count input/unit/min/max are available for the checkbox option type to output the quantity input field near the value;
• Checked setting allows to pre-select specific option value;
• Thumbnail setting is available for the image-based option types to output an appropriate image for the option value;
• Textures settings allow to add textures above the combination or products while the option value is selected;
• Apply CSS setting adds defined CSS rules to the page with the calculator while the option value is selected.

Basic Settings

First of all, select the combination categories for use in this calculator and set their order. That's necessary to have at least one category to be selected to output combinations. That's always possible to hide the selector for the only combination using the Combination categories view setting.

There are two ways to create a calculator layout. First one is using the native layout and setting called Default with a Sidebar and Layout template settings. There are a few built-in layout parts available, such as combination categories section, combinations section, canvas, current user selection block, main controls bar, cart section, and steps section. Keep in mind, it's assumed there is only one cart element available for the calculator.

You can fill the Steps setting to define which sections will be available as steps.

Also, all added options and their categories are available for output as layout elements. So you can combine the desired combination view and workflow.

Another way is to build a calculator using a 3rd-party visual editor. The ones supported are: Elementor, WPBakery, Divi. All calculator modules are available for these editors.

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.

If you have really many of different combinations, and it slows down the performance then tick the Load combinations via AJAX option.

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 current calculator selection.

Controls settings

All calculator buttons can have different classes for their styling. As the main plugin styles are based on the Bootstrap 5 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:

• hide-text - hides text of the button but keeps it for screen readers;
• hide-text-on-mobile - hides text of the button on small screens but keeps it for screen readers;
• icon-left - define on which side of the button the icon should appear;
• icon-right - define on which side of the button the icon should appear;
• show-icon - always shows a pre-defined button icon. Requires icon-left/right class for work;
• show-icon-on-mobile - shows a pre-defined button icon on small screens. Requires icon-left/right class for work;

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.

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.

This is possible to clear cart then the contact form is sent or keep it.

WooCommerce order redirect setting leads the customer to the cart, checkout or whatever page after the WooCommerce add to cart action.

View Settings

There are a lot of view settings for the most calculator's parts. There are no limitations, so you can combine them as you want to have the appropriate view.

With the Steps navigation walt type setting you can make unavailable going further through the steps if there is an unselected radio input, or keep it free-walk.

The Sticky main content/sidebar/controls offset tune the gap between the edge of the screen and the sticky element for different screen sizes.

That's possible to select stuck controls/cart controls placement - top or bottom of the page.

Using the Sidebar position setting you can control sidebar place for different screen sizes.

With the Sidebar width setting that's possible to change the sidebar width for different screen sizes. It uses CSS variables with a unit. Without a unit the value will be converted to pixels.

Combination categories view setting allows to output category selector within or outside the combinations section, or hide it at all.

The Combinations grid item width option works grid-based templates of combinations. Define a column width in percentage or using another CSS unit for each specific screen size.

Pricing Settings

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.

Set the Formula variables for the calculator level. They will be applied initially.

The important setting is Total rows. It allows to store any final totals calculations, like taxes or discounts.

First of all that's necessary to define a row name ot output. Also, it's needed a formula to get the required value. That can be a single variable or some calculation. For example, that's possible to use [total_price] variable as subtotal, output [total_price] * 0.1 as 10% tax, and [total_price] * 1.1 as total + 10% tax.

There is a special Price element available for the Controls setting. You can select which rows should be visible using that element.

That's possible to define which row will be used as a final cart item price. If no rows are marked, the last one will be used.

That's also possible to define which row will be used as a final WooCommerce cart item price. That could be helpful, for example, if you want to output a tax within the calculator, but there is the same tax applied on the WooCommerce level. If no rows are marked, the last one will be used.

Each line have Availability rules setting to control its output. It's assumed at least one row is available for the calculator.

PDF Settings

Enable PDF button to have possibility to open the PDF file. 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. You need to find order/pdf.php file and edit it.

Strings and Labels Settings

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

Export to HTML

That's possible to use the calculator as a ready-to-use HTML output. That might be helpful in case you have not a WordPress site. To do that set all desired calculator settings and save them. Its static HTML will be prepared from the actual settings.

To keep the asynchronous operations, as adding product to cart or loading combinations via ajax, workable, that's necessary to keep WordPress installation in any server's directory to have a URL to connection with the plugin API. All these request will call WordPress AJAX functionality.

There is the AJAX URL setting to define the exact URL to the admin-ajax.php file, which handles AJAX-requests. Its value is pre-set by default and should indicate the correct URL to the file, however, you can change it if necessary. But keep this setting as is in case you're using the calculator via WordPress site, cause it influence this work also.

Availability rules is a complex setting to control conditional logic for any calculator entity appearance depending on the current state.

The number of rule rows is unlimited.

To define a rule, click the relevant button. In the modal window that appears select the Source to apply the rule. That could be: active option values, active product variations, active combination, or equation to compare two formula variables.

If rules allows to select a few values, with the Relation within the items option if you select AND value then the entity will be visible only if the items you defined in this rule are all met.

If you select OR option, then the entity will be visible if even any of the items you define here is met.

Product variation source

That's also possible to select a product and its specific variations to be active to fulfill the rule.

Combinations source

The rule can be met only if a specific combination is currently active.

Equation source

With the equation source that's possible to compare two different values. Value A and Value B support variables get calculated as formulas and can be compared as more, less, equal, or not equal.

Calculator

Older versions of the plugin had pre-defined and not-flexible templates, as Vertical and Steps. Now there is Default with a Sidebar template available, but has much more flexibility to combine a required layout and even use steps section with it. Use the Layout template setting to do this.

Also, older versions had a Tax setting to increase/decrease the final price by a specific percentage. Currently, Total rows setting can be used to provide such behavior, but much more flexible.

Options

Older plugin versions had a different approach to calculate the final price. That was possible to do only using the options with a different Type setting value. There was a list of possible operations, like Addition, Multiplication and so on. That was also possible to affect an option value by another option value using the Influence on setting. Currently, all these settings are removed.

However, the plugin can see if the removed Type setting is stored in the DB and converts it into the Formula variables setting values to have the close result. It works for options what was influence the combination price. Options what were affected other options can behave wrong!

Also, there is no Influenced combinations setting anymore, so option modifies variables whatever combination is active.

Plugin admin side is also trying to migrate the old-way data into the Formula variables setting. However, in the admin side option don't know where are they used, so if that specific option was used as an individual product option, change its formula variable [total_price] to [product_price].

Saving the entity changes in the admin part will flush old-way settings from the DB, while new Formula variables will be kept.

Combinations

Earlier combination's Common pricing type mode had a built-in linear price changing. The sum of products "common price" was used as a starting price, and then it get multiplied by the area difference between the minimal and the current combination size. Currently, it has no price modifiers by default.

To re-create the old pricing behavior add such formula variable setting for the specific combination:

combination_price = ([combination_price] * [combination_width] * [combination_height]) / ([combination_min_width] * [combination_min_height])

With the version 14+ you can define any other price modify logic.