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.

WooCommerce

If you use special Windows Calculator Combination type for your products, but default their template will be replaced by the build-in template pf the single product page. However, that's possible to disable this behavior making off the «Replace single product template» setting.

Use special setting to output the combination calculator in a random place use of the page using an action with a specific priority. There is a list of native WooCommerce actions to be used for that.

In case of using a 3rd-party visual editor to build the single product page, you can use a special module to output the windows calculator section. Visual editors are supported: Elementor, WPBakery, Divi.

Custom Styles

It is possible to reconfigure the plugin's styles according to your needs.

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» button near the «Load demo data» setting. The list of entities to create will appear in 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, others 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 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.

All posts of the plugin support bulk actions to make export files. To do that, select a few posts you'd want to export, and run one of the available export actions.

There are two modes to export entities available: fast and deep.

While doing a post via Deep export, the final file will also have all entities related to the exported post.

While the Fast export only selected posts without related entities. If it has relations with other posts, the plugin will try to compare and connect them by these posts' name.

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.

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:

• Variations setting controls what variations will be available to select for the product. Each product must have at least one variation and can have only one active variation at once. There will be special controls available to select one of a few product variations.

  Variations indexes are incremented while adding new items. In case you need to sort the variations and re-index them, click the «Re-order variations» button once.

• 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;
• 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;
• Canvas thumbnails setting allows to add thumbnails to output at the canvas. These thumbnails will be available for all product variations.
• Options - you can select individual product options. They will be available in a special modal and will not affect other products;
• Compact cart options settings allows to not output every individual product option on a new line and make them all one-lined.
• Availability rules to control product output;
• Style setting allows to modify CSS properties and variables of the product.

Sizes Settings

• Size rounding step - affects on width/height size steps with individual pricing mode;
• Unavailable size message to output a string if the current product size from the Prices table have an empty price. Allows overriding the calculator-level message for that product individually.

View Settings

• Visually hidden makes the product invisible on the canvas, but it still will affect the price and the cart item.
• Min/Max visual height settings allow preventing making dynamic sized products too tall or low. Use a CSS value with unit, for example, 20px, 5rem, etc.;

Advanced Settings

• Spreadsheets parse interval allows selecting a period to parse product spreadsheets automatically.

• Prices spreadsheets settings allow to use a source spreadsheets file with individual variation prices. To make this setting work, that's necessary to set the «Spreadsheets target» setting for the variations.

  Get more details about the spreadsheets work.

  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;

• Formula variables to be applied at the product level;

Canvas thumbnails

Canvas thumbnails are used to represent appropriate product view on the combination canvas. This is possible to have many thumbnails as layers overlapping each other. For example, to output window frame as the bottom layer, window glass as a middle layer, and window opening direction as the upper layer. At the result user will see the combined image made of these thumbnails.

Each canvas thumbnail have the next settings:

Thumbnail setting to select an image to output. There are a few default images available with the plugin, but you also you can use own images.

Place upper layer setting is available only for product-level setting and could be helpful in case you need to have a thumbnail for all product variations, but placed upper variation-level thumbnails. By default, variation-level thumbnails have an upper layer and overlap product-level thumbnails.

Style setting allows to modify CSS properties and variables of the thumbnail.

Initially, all thumbnails covers the whole product with its 100% width and height. There are a few native CSS variables used:

• --wincalc-product-image-top: 0;
• --wincalc-product-image-right: 0;
• --wincalc-product-image-bottom: 0;
• --wincalc-product-image-left: 0;
• --wincalc-product-image-width: 100%;
• --wincalc-product-image-height: 100%;
• --wincalc-product-image-transform: none;

For example, if you need to make a thumbnail cover only top half of the product, set style settings:

Property: --wincalc-product-image-height     Value: 50%
Property: --wincalc-product-image-bottom     Value: 50%

You also can pass any CSS properties and values into this setting.

Notes of the thumbnail only for the admin part and developers.

Availability rules to control thumbnail output.

Product Variation

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

Basic settings

• Enabled setting allows to make variation on/off quickly;
• Name of the variation to output. Optional for single-variation products;
• Notes of the variation only for the admin part and developers;
• Thumbnail to output a single variation thumbnail in the product variations list.
• Canvas thumbnails setting allows to add thumbnails to output at the canvas. These thumbnails will be available while product variation is active.
• Options setting to select individual variation options. They will be available in a special modal above the product.
• Availability rules to control variation output.
• Style setting allows to modify CSS properties and variables of the product variation.

Pricing and sizes

• 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;
• 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;
• Default sizes allows defining default width and height of a variation. Alternatively, the average values from the table will be taken for this;
• Snap width/height settings allow making 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;
• Square limit settings allow making specific minimum and maximum product size square unavailable to be ordered;
• Unavailable size message to output a string if the current variation size from the Prices table have an empty price or Square limit is reached. Allows overriding the calculator and product-level messages for that variation individually.

Advanced settings

• Price spreadsheets settings allow to use a source spreadsheets file with individual variation prices. 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.

  Get more details about the spreadsheets work;

• Then the settings are handled, you can use the «Parse prices» button near the Spreadsheets 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;

• Formula variables for the variation level.

Variation Price Table

Individual pricing mode allows defining 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

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.

Mark cart products setting allows to mark products of cart item properties and thumbnail. Possible values are:

• None - not mark products;
• Letter - mark products using English alphabet: A, B, C, etc;
• Number - mark products using numbers: 1, 2, 3, etc.

Availability rules to control combination availability.

Pricing and Sizes Settings

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

With the Common (or Shared) 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 a specific size for each product individually.

Both modes allows adding additional elements, as inputs and sliders.

Price rounding step setting allows setting the possible step of the price change.

Load products price via AJAX reduce size of HTML output and requires products prices at bit later. When loaded it recalculates all variables.

Scopes shared max values setting allows to define the list of scopes and max values they can achieve.

For example, if scope 1 indicates total combination width and scope 2 indicates total combination height, and you need to make them to not be larger than 2000 and 3000. To make it: scope 1 <= 2000 while scope 2 <= 3000, or scope 1 <= 3000 while scope 2 <= 2000.

For that case, set scopes IDs setting to "1,2" and max values setting to "2000,3000".

Unavailable size message setting is used in case the combination have an unavailable size, such as scope shared max value.

Individual Pricing Type

Individual pricing type have the following settings:

• Scopes max values - allows limiting 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 limiting 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 setting the possible step of the size change;
• Width + Height limit - these settings allow limiting the minimum and maximum combination sizes. This setting doesn't allow to set a larger/smaller sum of width and height. Define the sum of width and height;
• Square limit - allows limiting the minimum and maximum combination square. Define the multiplication of width and height. This setting outputs the "Unavailable size message" setting value in case of error.

Layout Settings

There are two main types of canvas: Static and Dynamic. The static type isn't changed visually while product's 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.

Both modes have Generate thumbnail control to generate an image from the canvas and use it as a combination thumbnail. You also can delete currently used thumbnail attachment during generation.

Static canvas type

Select a product or utility 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 these 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 utility 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;
• Show 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 setting makes the element not draggable in the admin part to avoid miss moves;
• Availability rules to control item availability. If item is a product its rules will be overwritten;
• Style setting allows to modify CSS properties and variables of the item;
• Enabled variations setting is available for products and allows to define what variations are available for that specific product. It's needed to define enabled variation IDs separated by a comma.

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:

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

• ---

  Product default size setting allows overriding default product size if necessary;
• Enable input/slider - this is possible to on/off each specific sizing element for the product;
• Read only - make input possible to read value only and not to enter;
• Show in cart - settings allow to show/hide product size in the cart;

• ---

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

• ---

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

• ---

  Scope - these settings allow creating a scope of sizes to be connected with elements having the same Calculate from a scope ID;
• Calculate from a scope - set scope ID to calculate the element size as a sum of the scoped elements size;
• Limit scope parents min/max size - allows limiting 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 min/max by scope parents total value - allows limiting child (this element) value by the sum of min/max values of its scope parents;

• ---

  Reflect formula variable setting allows bind a size input with a formula variable. That means changing the input value will change formula variable value. The same time changing formula variable will change input value.
• Show on thumbnail allows to output input value at the cart item thumbnail.

Canvas Utilities

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 using the same groups/scopes settings as for products.
• 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 or set slider direction;
• Read only setting will make the input to output the value only, but not enter.

All other settings work 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.

Canvas Item Presets

This is possible to save canvas product or utility as a ready to use preset with all pre-defined settings.

To create such open an item settings modal and fine "Save as preset" button at the bottom.

All presets will be available in the dropdown list of items, such as products and utilities. This is possible to remove preset using the "Remove preset button nearby.

Integration Settings

• Attached WooCommerce product - if you want to make the possibility to order the combination using WooCommerce, you need to create a sibling WooCommerce product to be used as combination data container, to be added in the WooCommerce cart and have all combination properties.

Advanced Settings

• Formula variables settings to be applied at the combination level.

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;
• Availability rules to control option availability;
• Is expanded by default setting is to output the option expanded if the option can be toggled.
• Formula variables for the option level;

There are also settings available for specific option types only:

• Values setting controls what values will be available to select for the option. Values indexes are incremented while adding new items. In case you need to sort the values and re-index them, click the «Re-order values» button once;
• 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 value 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 value image output in pixels;
• Enable image link setting to output a lightbox link to the large image.
• 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;
• Availability rules to control value output;
• Show in cart - controls value presence in the cart item properties.
• Formula variables for the value level;

There are also settings available for specific option types only:

• Count input/unit/min/max are available for the checkbox and radio option types 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 adding 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.

  There is a special :wincalc-product-hash pseudo-selector supported to select only current product while applying CSS by an individual product option. It will be automatically replaced by :is([data-hash="..."], [data-product="..."]) to determine only specific product by its unique hash string.

Basic Settings

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 preview, 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.

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.

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.

Visual editors supported: Elementor, WPBakery, Divi Builder.

All calculator modules are available for these editors.

Behavior Settings

Loading type setting controls the method of calculator loading process. It helps to boost page performance if necessary. Available modes are:

• Default - the entire calculator section will be available when you open the page;
• Lazy initialization - calculator section will be empty when you open the page and will be loaded asynchronously;
• Lazy canvas - calculator section will have all elements except of the active combination canvas;
• Lazy initialization and canvas - calculator section will be empty when you open the page and will be loaded asynchronously. After active combination canvas will be loaded.

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

Scrolling top gap option allows to change the top space left after scrolling the screen up on different workflow actions.

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-start - define on which side of the button the icon should appear;
• icon-end - define on which side of the button the icon should appear;
• show-icon - always shows a pr