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.
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 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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
Strings and Labels Settings
This is possible to change all static text parts of the calculator output.
Steps Layout Settings
There are a few options only for the steps layout.
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.