Documentation for v.11.0.0

Last updated: Dec 15th, 2023

About the Plugin

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.

Plugin thumbnail

Get the plugin

Installation

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.

Installation

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.

Plugin Settings

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.

If for some reason you need to disable some of the plugin's scripts, change «Scripts including type» setting to «Multiple files» and de-select them in the list lower. That's also possible to use the «Debugging multiple files» mode to require unminified source scripts of the plugin to make the debugging process easier.

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.

General settings page

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.

Custom styles settings page

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

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

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.

This section can be used the same way to export the plugin data created on your site and import it from another site. Use the Get list button near the Export plugin data setting to get the list of created entities. That's also possible to select/deselect specific entities to be exported. Click the Export button once to get a file with data to be imported.

To import the data that's necessary to select an export file on your device first. Then click the Get list button near the Import plugin data setting once. 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.

Remember the script downloads and uploads only images that are defined in the settings. Images from the content part will not be replaced. You'll need to download them manually. There is the Cope-Paste Helper plugin making this process must easier. It can download external images and replace them in the post content via one click.

Export/import data

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.

Templates customization settings page

Product Settings

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;
  • 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;
  • Thumbnail type - changing the type of the image output. In a case of using of SVG images for variation thumbnails, you can output them as an Inline SVG to have a possibility to control their CSS using a special options setting. Also, the images from the plugin demo pack depict any product size without proportion distortion.

    Alternatively, you can use a simple IMG tag, but there will be no undistorted scalability and dynamic view changes, as product color;

  • Options - you can select individual product options. They will be available in a special modal and will not affect other products;
  • Show with options setting allows to show the option only then another one or a few ones are 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 the "Condition" field to "AND";
  • 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.

Product settings

Product Variation

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

  • Thumbnail to be used to output while variation is active;
  • Title of the variation to output. Optional for single-variation products;
  • Common price is used by the common pricing type combinations;
  • Individual prices 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;
  • Options - you can select individual variation options. They will be available in a special modal and will not affect other products.
  • Show with options setting allows to show the product only when one or a few specific options are selected. 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 the "Condition" field to "AND".

Product variation settings

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.

Product variation price table

Combination Settings

Basic Settings

Each combination have the following settings:

  • Thumbnail will be used in a combinations list;
  • Name setting allows to re-name the combination for the output but have a different inner 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;
  • Pricing type is the most important setting. It allows to enable/disable common size controllers or individual products size controllers;
  • 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.

Combination settings

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.
  • Canvas type setting change the canvas layout to be static or dynamic. See more details.

Individual pricing type settings

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. This value is used as an initial value of the common price of the combination products;
  • Max Width/Height - set maximum combination size to order. The price will be increased proportionally according to the area difference between the minimum and current sizes;
  • Default width/height - set default combination size values;
  • Width/Height rounding step - allows to set the possible step of the size change;
  • 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 the default and current width or height.

  • Price rounding step - allows to set the possible step of the price 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.

Common pricing type settings

Canvas Settings

There are two main types of canvas: static and dynamic. The static type isn't changed visually while products size adjustment, while 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.

Types support

Common pricing type supports only static canvas type 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 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.

Combination static canvas

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.

Combination dynamic canvas

Canvas Item Settings

Order setting of any element on the canvas affects on the items overlapping and cart item data order.

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

  • Name - control element name in the cart item properties. 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.

  • 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;
  • 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 - these settings allow to limit scoped items size by the element current size. That could be helpful if you want to have a common combination size inputs, but smaller scoped products should be fit into the allocated space. Inversely group settings can help to reduce one scoped product size while another is increased;

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

Scopes and groups IDs

Scope and group settings will influence each other in case they have the same ID. That's an advantage but might be a reason of configuration mistakes. Don't forget to use different IDs for settings you don't want to be intersected.

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 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.
Canvas dynamic product settings

Canvas Elements

There are a few util-items available for use on the combination canvas. All of them can have a name and be displayed in the cart.

  • Vertical/Horizontal size element allows to calculate and output the sum of sizes of products by a scope ID;
  • Vertical/Horizontal slider element allows to output a size slider with a defined range and value;
  • Vertical/Horizontal 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.
Canvas dynamic input element settings

Option Settings

Basic Settings

Each option have the following settings:

  • Type is an important setting to define the option controls;
  • 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;
  • Show with options setting allows to show the option only then another one or a few options are selected. 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 the "Condition" field to "AND";
  • Show with product variations setting allows to define with which product variations the option will be shown. Select a product from the dropdown menu and define its variation index from zero. Add more rule lines if you need;
  • Show with combinations setting allows to define with which combinations the option will be shown;
  • Availability rules setting controls the option availability by custom rules, such as current product size, product price, or cart content to enable/disable this option accordingly.

There are also settings available for specific option types only:

  • Values setting controls what values will be available to select for the option;
  • 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;
  • Min/Max/Default value settings are used to output the number type option.

Important notes

  • Options influence at the price is calculated sequenced according to their order;
  • Size based types are calculated using the common product size for the common pricing type, and using each product size for an individual pricing type.
    Individual product options are calculated only for their parent product;
  • Then you're using option categories for a calculator these options might be ordered not as you wanted to have them. To solve it easily use any 3rd-party plugin the posts sorting, for example, Simple Custom Post Order.

Option settings page

Option Item Settings

Each option value have the following settings:

  • Name - option item label;
  • Notes - option description only for admin part and developers;
  • Value - numeric value or formula to apply while the option item is selected;
  • Common pricing multipliers affect controls will individual product options be calculated before or after the common pricing modification.
  • Type setting allows to select the option calculation behavior. See more details about;
  • Available with options setting allows to make the item available only then another option or a few options are selected. 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 the "Condition" field to "AND";
  • Available with product variations setting allows to define with which product variations the item will be available. Select a product from the dropdown menu and define its variation number from zero. Add more rule lines if you need;
  • Available with combinations setting allows to define with which combinations the item will be available;
  • Availability rules setting controls the option availability by custom rules, such as current product size, product price, or cart content to enable/disable this option accordingly;
  • Display in cart - controls item presence in the cart item properties.

There are also settings available for specific option types only:

  • Influence on setting allows to modify combination price or other options value, except of the formula-based ones;
  • Influenced combinations - use this setting to option item influence only specific combinations. Keep empty to influence all combinations;
  • Influenced options - use this setting to option item influence only specific options. Keep empty to influence all options;
  • Multiplication behavior setting controls the approach of the multiplication option type. It can be multiplied with the value already changed by other options or the pure one;
  • Count input/unit/min/max are available for the checkbox option type to output the quantity input field near the item. Count value influence the option item price result;
  • Show price setting outputs the item value near its label;
  • Checked setting allows to pre-select specific option item;
  • Thumbnail setting is available for the image-based option types to output an appropriate image for the option item;
  • Texture settings allow to add a texture above the combination or products while the option item is selected;
  • Reduce products widths/heights settings allow to reduce maximum product sizes by a defined value while the option is selected;
  • Apply CSS setting adds defined CSS rules to the page with the calculator while the option item is selected.

Option item settings

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

Custom formula

Calculate the formula result using the current combination price, option value, its count, and other dynamic variables.

  • [price] - the most important variable indicates the current combination price. Don't forget to use it in the formula to not lost the initial price. Example: [price] + ([count] * 10);
  • [count] - variable indicates option count input value if exists;
  • [value] - literally indicates the option human-readable value of the option. That could be helpful in case you want to influence another numeric option value;
  • Also, all of the dynamic variables are available to be used by the formula.

Calculator Settings

After all previous steps done, you can create a calculator post.

Basic Settings

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.

SVG image notes

To have the best products presentation use the default SVG files from the plugin as a basement.

They are organized to be well rubber-scaled with the dynamic canvas type and to generate the cart item thumbnail correctly.

You can modify them for your needs and required style or keep as they are.

If you're going to use own SVG images then keep im mind:

  • To be sure the generation will work fine clean, the SVG files 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 slows down the performance then tick the Load combinations via AJAX option.

Calculator basic settings

Order Settings

Enable order setting allows to get orders using a Contact Form or WooCommerce plugin.

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.

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.

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 [wincalc-cart-pdf] shortcode in the File attachments field.

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

Calculator order settings

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.

Calculator view settings

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.

If you need to add some tax to the total sum, then set tax value size in percents. A bonus tip: you can set the negative tax setting value to reduce the price and represent it as a discount.

Price including tax setting allows to include/exclude the tax into attached WooCommerce product price. That could be helpful in case there is another tax calculation for WooCommerce.

Also, you can change some text strings and price format.

Calculator pricing settings

Cart PDF Settings

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. You need to find cart/pdf.php file and edit it.

Calculator print settings

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.

Controls settings

Strings and Labels Settings

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

Calculator strings settings

Steps Layout Settings

There are a few options only for the steps layout.

Calculator steps-view settings

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.

Calculator export to HTML settings

WooCommerce Product Settings

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.

WooCommerce product settings

Dynamic variables

Some of the plugin settings support dynamic variables to be used and replaced according to the current state. They can be used, for example, to modify cart item name, or formula-based options.

  • [total_width], [total_height] - these variables indicate total width/height of all products of the combination individually;
  • [products_count] - number of products available for the combination;
  • [product_ID_width], [product_ID_height] - dynamic variables to indicate specific product width and height by ID. Be sure the product is available for the combination while using it;
  • [scope_ID] - dynamic variable to indicate specific scope current value by ID; Be sure the scope is available for the combination while using it;

PHP Tricks and Utils

Modify products and options prices dynamically

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);