First download the Pricing Tables ZIP file from inside your Zomex/Envato account. Extract the files and move the extracted folder to your desktop.
File Structure
Before installation let's go through the file structure of the script.
pricing-tables.html - Contains all of the HTML of the pricing tables broken down into 6 code examples (1-6 plans)
/fonts/ - Contains the fonts used by Font Awesome (icons)
/css/pricingtables.css - Contains all of the CSS used by the pricing tables
/css/fontawesome.min.css - Contains the CSS of the icons frame work Font Awesome
/css/body.css - Contains the CSS of the demo page (not used by the Pricing Tables)
How To Install
Installing this Pricing Sables script within your existing website is a quick and easy process.
First upload the CSS and fonts directories to your server or local application.
Decide which page you'd like to install the Pricing Tables on.
CSS
The CSS handling the styling of the tables (colors/pricing/design).
Within the <head> section of that page paste the following:
<!-- Pricing Tables -->
<link href="/css/fontawesome.min.css" type="text/css" rel="stylesheet" />
<link href="/css/pricingtables.css" type="text/css" rel="stylesheet" />
<!-- Pricing Tables -->These lines load the CSS file used by Pricing Tables and the CSS used by the icons (Font Awesome). If your website is already using Font Awesome v6.1 you can remove the font-awesome line from above.
Paths - You will need to modify the paths to match your upload location. The above will work if your CSS and fonts directories have been uploaded to root (public_html).
HTML
The HTML handles the structure/data of the tables.
Open pricing-tables.html in your text editor. This file contains all of the HTML used by the Pricing Tables broken down by the amount of plans (1-6). Search the file for the amount of plans you'd like to install. You can search specifically for 1 plan, 2 plans, 3 plans, 4 plans, 5 plans, 6 plans to find the block of code to use.
For this example let's go with the 3 Plans layout. Select and copy all of the code between the two <!-- Pricing Tables (3 plans) --> lines.
Paste this code within the <body> section of your website where you would like the table to be displayed.
Completed
Your table should now be displayed within your page as per our demo. If you run into any issues please contact us, we will be happy to assist you.
Customization
The Pricing Tables are fully customizable as all of the code is open and editable. Please refer to our Pricing Tables documentation page to find our customization guides.
Comments
If you have any questions please leave a comment below or contact our support.