1 - Introduction

Your Multiple Steps Addon creates a calculator which fields are separated for each step. You can choose which field display in which step.

New fields are introduced with this addon: Icon Selection and Image Selection that are essentials for a step by step calculator.

You can also display custom HTML/CSS by using Custom Themes. You can create different Custom Themes for each step.

2 - Installation

  1. Download the addon following the provided url
  2. Install and Activate Your Spreadsheet Calculator by following the instructions here
  3. Go to Plugins > Add new in your WP-admin website
  4. Click on Upload Plugin then click on Browse... and select the file you've just downloaded
  5. After the plugin has been installed, click on Activate

3 - Workflow Intro

The way to access the panel page of Your Multiple Steps Addon:

  1. Go to the calculator panel of Your Spreadsheet Calculator admin section and you should se something as below:


  2. You would see here all the available calculators. On the one you want to use Your Multiple Steps Addon click the arrow near the ‘Edit’ buton. And in the drop down that will come after click on the ‘Step Calculator’ option. This way you will access the Your Multiple Steps panel. Below illustrated images:

    Multiple Steps Access

    Multiple Steps

  3. Here you can create as many steps as you want by clicking the ‘Add new step’ button and you will enter in the configuration form of the current step you are creating:

    Saving Calculator

  4. You need to fulfill some data in order to create the step:

    a) Title → it is the title of the step, this will become later the label of the step in the front end on the product page:

    Product Page

    b) Step order → must be filled with an integer number and it represent the order of this current step related to the others steps that the calculator has

    c) Input fields → You need to specify which fields of the calculator would be placed in this step.

    Edit Step

    On the left you see all the input fields available to this calculator. By clicking them and passing to the right container this way you are assigning this input to this step.

  5. Themes → here you can use a custom theme if you want that changes the way that this specific step is displayed. To do this you need to have knowledge in php and html. For more information click here

    After completing all the previous steps click ‘Save’ and you will see the new step created in the step panel:

    Step List


    Keep in mind that the multistep is a feature related to the calculator. You must set-up the completed calculator with all the needed input fields first and only after that go to set up a multistep feature.

4 - Field Types

Using this addon there are two more fields that doesn't exist in Your Spreadsheet Calculator:

  • Icon Selection: This element make easy select different options

    Icon Selection

  • Image Selection: It's a more complex element if compared to Icon Selection because it supports categories mode.

    Image Selection

To create these two kind of fields you need to create a Radio Group element in Your Spreadsheet Calculator. For more information check here

5 - Creating a Multistep Calculator

To create a Multi-Step Calculator follow these instructions:

  1. Create your Spreadsheet Calculator by following the documentation here as a normal Your Spreadsheet Calculator calculator
  2. In your calculator you need to select all the fields you would like to use in the Step Calculator. You can always add more fields to your calculator by clicking on the Edit button from the list of calculators. If you want to create Icon Selection or Image Selection elements you need to create Radio Group elements.
  3. From the list of calculators, click on the calculator dropdown and then click on Step Calculator:

    Step Calculator Dropdown

  4. Enable the Step Calculator by clicking on Enable from the list of Steps. To create a new step calculator click on Add new step. You need to type in these options:

    • Title: The title of the step, this will be displayed in the front-end
    • Step Order: The position of the step. It accepts only numbers.
    • Input fields: Select all the fields you would like to display in the current step.
    • Icon selection: If there are some fields you would like to transform in Icon Selection add them to the right.
    • Image selection: If there are some fields you would like to trasnform in Image Selection add them to the right. All the selected items make a unique Image selection element with as many categories as the items you've selected. If you have selected multiple items the first element in the Radio Group is used as the main category image.
    • Themes: You can create your custom theme for each step. For more information see “Custom Theme” chapter.

6 - Settings

To change settings follow these instructions:

  1. From the list of calculators, click on the calculator dropdown and then click on Step Calculator
  2. Click on Settings.
  3. You can change the following settings:

    • Disable Default Ajax Price Product Page: It will disable the calculation of the WooCommerce price in the product page via Ajax. If set to “Default”, it has the same behaviour as “Disable Ajax Price Product Page” on the Your Spreadsheet Calculator Settings. If “Yes”, it will force “Disable Ajax Price Product Page” to be “Yes”. If “No”, it will force “Disable Ajax Price Product Page” to be “No”.
    • Next Step On Click: If an Icon Selection or an Image Selection is clicked, the next step is shown.
    • Hide Product Price: If Yes, the product price is hide.

7 - Custom Themes

The instructions how to make a custom theme are the same for Your Spreadsheet Calculator, for more information please check here.

The only difference is that you need to create your file in /wp-content/uploads/awspc-step/themes