It’s a section to display pricing tabs.
Pricing switcher
The pricing switcher is an add-on for the pricing section, based on the switch element. It can be useful for toggling between monthly/annual prices.
Prior to v2.4.1
In the HTML template you need to set data-pricing-monthly
and data-pricing-annually
attributes and add the .pricing-switchable
class on every element you want to change when switching the pricing toggle.
In React and Vue, you can simply use a ternary operator to decide what to display on the toggle switch. Take a look at the templates to see how it works.
Since v2.4.1
In the HTML template you need to pass data via a data-price-output
attribute to the .pricing-item-price element:
<div class="pricing-item-price" data-price-output='{
"0": ["$", "35", "monthly"],
"1": ["$", "27", "annually"]
}'>
0
stands for “unchecked” and 1
for “checked”.
- The dollar sign will be outputted in the
.pricing-item-price-currency
element - The amount will be outputted in the
.pricing-item-price-amount
element - The period will be outputted in the
.pricing-item-price-after
element
In React and Vue, you will need to set a priceOutput
state / data. Take a look at the templates to see how it works.
Pricing slider
The pricing slider is an add-on for the pricing section, introduced in v2.4.1.
In the HTML template you need to pass input and output data.
Input data is passed via a data-price-input
attribute to the <input type="range" />
element:
<input type="range" data-price-input='{
"0": "1,000",
"1": "1,250",
"2": "1,500",
"3": "2,000",
"4": "2,500",
"5": "3,500",
"6": "6,000",
"7": "15,000",
"8": "50,000"
}'>
Output data looks a little different for structure, since each value is not a string, but an array of strings.
<div class="pricing-item-price" data-price-output='{
"0": ["", "Free", ""],
"1": ["$", "13", "/m"],
"2": ["$", "17", "/m"],
"3": ["$", "21", "/m"],
"4": ["$", "25", "/m"],
"5": ["$", "42", "/m"],
"6": ["$", "58", "/m"],
"7": ["$", "117", "/m"],
"8": ["$", "208", "/m"]
}'>
- The dollar sign will be outputted in the
.pricing-item-price-currency
element - The amount will be outputted in the
.pricing-item-price-amount
element - The period will be outputted in the
.pricing-item-price-after
element
In React and Vue, you will need to set priceInput
and priceOutput
states / data. Take a look at the templates to see how it works.
Component files
📋 React
👉 src/components/sections/Pricing.js
📋 Vue
👉 src/components/sections/Pricing.vue
Theming
Style is defined into 3 files:
📋 Core file
src/assets/scss/core/sections/_pricing.scss
👆🚫 Don’t edit this file!
📋 Settings file
src/assets/scss/settings/sections/_pricing.scss
👆 Use this to adjust Sass variables
📋 Theme file
src/assets/scss/theme/sections/_pricing.scss
👆 Use this to add custom CSS