# Quantity Using the **Quantity** element allows you to create any type of numbers as input. ## **Element Tab** The Quantity element has the following fields in the **Element Tab**:

* **Name** - Title of the field. * **Placeholder** - You can either fill the placeholder or not (It is not required). * **Description** - Description of the field. * **Step** - Defines the up and down (increase/decrease) buttons' step value. * **Default Value** - The default value will be shown to the users when they open a cost calculator. * **Min Value** - minimum value that the quantity field can take * **Max Value** - maximum value that the quantity field can take * **Unit Name** - You can put unit measures, such as kg(kilograms), gr(grams), m (meters), etc, to this field. You can also decide whether you want unit measures, for example, kg, to show on the right or left. * **Hide Min/Max Values** - Enable to hide the minimum and maximum values set to the field in the calculator. * **Multiply by Unit Price** – enables the use of a unit price multiplier. When toggled on, the final value will be calculated by multiplying the selected value by the specified unit price.

* **Unit Price** – the cost per unit of the selected value. This numeric field supports decimal values and defines how much each unit contributes to the total. * **Unit** – a label indicating the measurement unit used for the selected value (such as centimeters, meters, or inches). * **Pricing Structure** - The **Pricing Structure** setting defines **how the Cost Calculator calculates the final value** of the field based on the quantity selected by the user. [**Learn More.**](#pricing-structure) ## Styles Under this tab, you can select the suitable style for the quantity field according to your needs:

The field offers two styles: [**Default**](#default) and [**Side Buttons**](#side-buttons). With the **Side Buttons** style, you can choose the position of the buttons and display them separately, giving you greater control over the field’s appearance:

Here are the available styles: {% tabs %} {% tab title="Default" %}

{% endtab %} {% tab title="Side Buttons" %}

{% endtab %} {% tab title="Side Buttons (both sides)" %}

{% endtab %} {% tab title="Side Buttons (separated)" %}

{% endtab %} {% tab title="Side Buttons (both separated)" %}

{% endtab %} {% endtabs %} ## Settings Tab The Quantity element has the following fields in the **Settings** Tab:

* **Currency Sign** - Enable if you want to show the currency sign in the total summary. * **Currency Settings** - Applies global currency settings such as thousand and decimal. separators, the number of decimals to the entered value. * **Round Value** - Enable if you want to round the value to the whole number in the total summary. * **Required** - Defines whether the element will be required to be filled or not. * **Hidden by Default** - The element will be hidden by default. You can make it visible using [**conditional system**](https://docs.stylemixthemes.com/cost-calculator-builder/conditional-system/condition-actions#id-1.-hidden-by-default). * **Calculate hidden by default** - If any case hides the element: via the **Hidden by Default** setting or hidden by some [**condition**](https://docs.stylemixthemes.com/cost-calculator-builder/conditional-system/condition-actions#id-2.-calculate-hidden-by-default), the element's default value (if it is set) will be counted in the formula. * **Show in Grand Total** - Disable if you want to hide the element in Grand Total. * **Additional Classes** - Add extra classes to the HTML elements to further style changes ### Set Measurement Unit This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.

* **Unit Symbol** - enter the unit symbol * **Position** - select the position where the symbol should be displayed relative to the number * **Thousands separator** - select the symbol to [separate thousands ](#user-content-fn-1)[^1] * **Number of decimals** - indicate the number of decimals in the fractional part * **Decimal separator** - select the symbol to separate the fractional part Here is how it will look:

## Pricing Structure :star:**Premium Feature** The **Pricing Structure** setting defines **how the Cost Calculator calculates the final value** of the field based on the quantity selected by the user. It allows you to override the field value before it is passed to the [formula ](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/total)field. This is especially useful for applying quantity-based discounts or custom pricing logic. {% hint style="success" %} Pricing structure is available in [**Quantity**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/quantity) and [**Basic** **Slider**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/range-button) Elements. {% endhint %} Pricing Structure has 4 different options:


Default	#default-pricing
All Units Pricing	#all-units-pricing
Tiered Pricing	#tiered-pricing
Flat Unit Price per Range	#flat-unit-price-per-range

By default, the calculator uses the [**Default** ](#default-pricing-structure)pricing structure. It just passes the entered value by the user to the formula field without changes. {% hint style="warning" %} Pricing Structure is not available when the [**Multiply by Unit Price**](#settings-tab) setting is on. {% endhint %} When you select **All Units Pricing**, **Tiered Pricing**, or **Flat Unit Price per Range**, the calculator opens additional pricing settings, allowing you to configure pricing ranges and display a discount badge:

Before looking at each pricing structure, let's understand the common settings of them:

* **Pricing Structure** - choose one of the available pricing structure options. * **Pricing Range Table** - on this table, you can define the range and unit price for the inputs. The range always starts from the [minimum ](#element-tab)value of the element that you set, and ends with the [maximum ](#element-tab)value of the element. You can add new ranges by clicking the Add another range button, and delete the last range by clicking the icon next to it. * **Badge Text** - here you can define the label that will be displayed in the discount badge that will be displayed along with the field. * **Format** - choose one of the available formats to display the discount badge on the element. There are three options: * % - displays the discounted amount in percentage * $ - displays the discounted amount in currency * $ + % - displays the discounted amount in currency and a percentage * **Variants** - choose the discounted badge style Here you can see the different badges and how they look with sample examples: {% tabs %} {% tab title=" % and Outlined" %}

{% endtab %} {% tab title="$ and Primary" %}

{% endtab %} {% tab title="$ + % and Solid " %}

{% endtab %} {% endtabs %} Before going deep to learn about each structure, here is a quick summary of them:

Pricing Range used in the table examples

* From 0 to 10 with a unit price of 17 * From 11 to 100 with a unit price of 14 * From 101 to 200 with a unit price of 12 * From 201 to 250 with a unit price of 10

| Pricing Structure | Explanation | Input: 8 | Input: 57 | Input: 221 | | ----------------------------------------------------------- | ----------------------------------------------------------------------- | ------------ | ----------------------- | --------------------------------------------- | | [**Default Pricing**](#default-pricing) | Passes the entered value directly to the formula without modification | 8 | 57 | 221 | | [**All Units Pricing**](#all-units-pricing) | Applies one unit price to all units based on the matched quantity range | 8 × 17 = 136 | 57 × 14 = 798 | 221 × 10 = 2210 | | [**Tiered Pricing**](#tiered-pricing) | Calculates each pricing range separately and sums the results | 8 × 17 = 136 | 10 × 17 + 47 × 14 = 828 | 10 × 17 + 90 × 14 + 100 × 12 + 21 × 10 = 2840 | | [**Flat Unit Price per Range**](#flat-unit-price-per-range) | Returns a fixed price based on the matched quantity range | 17 | 14 | 10 | ### Default Pricing This is the default behavior of the Cost Calculator. The value entered by the user is passed directly to the formula field without any modification.

#### Example If the user enters 25, the formula receives 25.

Use Default Pricing when no quantity-based pricing logic is required, and calculations are handled entirely inside the formula. ### All Units Pricing This option applies a single unit price to all selected units within a range. You define quantity ranges and assign a unit price for each range. Once a range is matched, all units are multiplied by the unit price of that range.

#### Example Let's set the pricing range like that: * From 0 to 10 with a unit price of 17 * From 11 to 100 with a unit price of 14 * From 101 to 200 with a unit price of 12 * Rest, from 201 to 250 with a unit price of 10

Here are the results. Switch tabs to check the difference: {% tabs %} {% tab title="Input 8" %} User enters **8.** It matches the **first** range.\ Final value is **8 × 17 = 136**

{% endtab %} {% tab title="Input 57" %} User enters **57.** It matches the **second** range.\ Final value is **57× 14 = 798**

{% endtab %} {% tab title="Input 221" %} User enters **221.** It matches the **last** range.\ Final value is **221 × 10 = 2210**

{% endtab %} {% endtabs %} {% hint style="success" %} Use this option when you want bulk discounts where all units get the same price once a quantity threshold is reached. {% endhint %} ### Tiered Pricing This option applies different prices to different portions of the quantity. Each range has its own unit price and is calculated independently. The final value is the sum of all tier calculations.

Here are the results. Switch tabs to check the difference: {% tabs %} {% tab title="Input 8" %} User enters **8.** All units fall into the first range:\ Final value is **8 × 17 = 136**

{% endtab %} {% tab title="Input 57" %} User enters **57**. * First 10 units → 10 × 17 = 170 * Next 47 units → 47 × 14 = 658 Final value is **170 + 658 = 828**

{% endtab %} {% tab title="Input 221" %} User enters **221** * First 10 units → 10 × 17 = 170 * Next 90 units → 90 × 14 = 1260 * Next 100 units → 100 × 12 = 1200 * Remaining 21 units → 21 × 10 = 210 Final value is the sum of all: **2840.**

{% endtab %} {% endtabs %} {% hint style="success" %} Use Tiered Pricing when pricing must gradually decrease as quantity increases rather than switching all units to a lower price. {% endhint %} ### Flat Unit Price per Range This option assigns a fixed value when the entered quantity falls within a specific range. Instead of multiplying units, the calculator returns a predefined flat value for the matched range.

Here are the results. Switch tabs to check the difference: {% tabs %} {% tab title="Input 8" %} User enters **8.** All units fall into the first range:\ Final value is **17.**

{% endtab %} {% tab title="Input 57" %} User enters **57**. Matched range is 11 to 100:\ Final value is **14.**

{% endtab %} {% tab title="Input 221" %} User enters **221.** Matched range is 201 to 25:\ Final value is **10.**

{% endtab %} {% endtabs %} {% hint style="success" %} Use this option when pricing is not dependent on unit count and only the selected range matters. {% endhint %} ## Fractional (Decimal) Value Input When using the Quantity field with its default settings, it is not possible to input fractional numbers. Any fractional number entered will automatically be rounded to the nearest whole number:

Quantity Field (Currncy Settings, Round Value are OFF)

### Enabling Fractional Input To allow the input of fractional numbers in the Quantity field, the **Currency Settings** must be enabled. This setting ensures that the Quantity field can handle and correctly display fractional values.

Currency Settings in the Quanttiy Field Settings

**Here is the result:**

Quantity Field (Currency Settings is ON, Round Value is OFF)

{% hint style="success" %} If both **Currency Settings** and **Round Value** options are enabled, you can enter fractional values in the Quantity field. However, these values will be automatically rounded to the nearest whole number in the summary. {% endhint %} ## **Example of Using Quantity Element** Let’s create a BMI Calculator with a quantity element. The default height value will be 170 with a unit value in cm. The default weight value will be 60 with a unit value in kg. There will be a formula element to calculate the BMI.

Choose the correct styles for the fields:

That’s how it will look on the user’s page:

You can set up **Multiply by Unit Price** when you want the value a user inputs to multiply by the cost. For example, if the cargo service delivers packages from the USA to Europe at 25 USD/ kg. The values will multiply by 25 to calculate the fees for the delivery.

That's how it will look on the user's page

[^1]: r.g 7, 000, 000 (seven millions)