Zomex - Pricing Tables script docs

In this guide you will learn how to customize the content of the Pricing Tables. For the sake of this guide we will use the 1 plan table.

The HTML of the 1 plan table is:

<!-- Pricing Tables (1 plan) -->

    <div class="tables tables-1col">
        <div class="tables-box tables-box-features animate__animated animate__bounceInLeft wow displayorder0">
            <div class="tables-head">
                <div class="tables-heading">
                    Main Information
                </div>
            </div><!-- .tables-head -->
            <div class="tables-text">
                &nbsp;
            </div><!-- .tables-text -->
            <div class="tables-features-list">
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Web Space
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Bandwidth
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Control Panel
                </div>
            </div><!-- .tables-features-list -->
            <div class="tables-price">
                <div class="tables-price-priceprefix">
                    &nbsp;
                </div>
                <div class="tables-price-currencyprefix">
                    &nbsp;
                </div>
                <div class="tables-price-price">
                    &nbsp;
                </div>
                <div class="tables-price-term">
                    &nbsp;
                </div>
            </div><!-- .tables-price -->
            <div class="tables-buttons">
                &nbsp;
            </div><!-- .tables-buttons -->
            <div class="tables-head2">
                <div class="tables-heading2">
                    Plan Comparison
                </div>
            </div><!-- .tables-head2 -->
            <div class="tables-features-list">
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Web Space
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Bandwidth
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Addon Domains
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Control Panel
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Script Installer
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Daily Backups
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Server
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Free Domain
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Ticket Support
                </div>
            </div><!-- .tables-features-list -->
            <div class="tables-buttons">
                &nbsp;
            </div><!-- .tables-buttons -->
            <div class="tables-head2">
                <div class="tables-heading2">
                    Key Features
                </div>
            </div><!-- .tables-head2 -->
            <div class="tables-features-list">
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Addon Domains
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Databases
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>FTP Accounts
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Email Accounts
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Mailing lists
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Subdomains
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Email Limit
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Auto Responders
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>File Manager
                </div>
            </div><!-- .tables-features-list -->
            <div class="tables-buttons">
                &nbsp;
            </div><!-- .tables-buttons -->
            <div class="tables-head2">
                <div class="tables-heading2">
                    Free Software
                </div>
            </div><!-- .tables-head2 -->
            <div class="tables-features-list">
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>WordPress
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Joomla
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Drupal
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Magento
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Zen Cart
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>phpBB
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>MyBB
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>SMF
                </div>
                <div class="tables-features-list-item">
                    <i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>PHPCoin
                </div>
            </div><!-- .tables-features-list -->
            <div class="tables-buttons">
                &nbsp;
            </div><!-- .tables-buttons -->
        </div><!-- .tables-box tables-box-features -->
        <div class="tables-box tables-box-1 animate__animated animate__zoomInLeft wow" onclick="location.href='#';">
            <div class="tables-head">
                <div class="tables-heading">
                    Plan 1
                </div>
            </div><!-- .tables-head -->
            <div class="tables-text">
                Perfect shared hosting plan for beginners
            </div><!-- .tables-text -->
            <div class="tables-features-list">
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Web Space
                    </div>10GB
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Bandwidth
                    </div>100GB
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Control Panel
                    </div>cPanel
                </div><!-- .tables-features-list-item -->
            </div><!-- .tables-features-list -->
            <div class="tables-price">
                <div class="tables-price-priceprefix">Only</div><div class="tables-price-currencyprefix">$</div><div class="tables-price-price">9.99</div><div class="tables-price-term">/month</div>
            </div><!-- .tables-price -->
            <div class="tables-buttons">
                <a class="tables-button tables-button-color1" href="#"><i class="fa-solid fa-cart-shopping tables-icon-order"></i>Order Now</a>
            </div><!-- .tables-buttons -->
            <div class="tables-head2">
                <div class="tables-heading2">
                    Plan 1
                </div>
            </div><!-- .tables-head2 -->
            <div class="tables-features-list">
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Web Space
                    </div>10GB
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Bandwidth
                    </div>100GB
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Addon Domains
                    </div>5
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Control Panel
                    </div>cPanel
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Script Installer
                    </div>Softaculous
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Daily Backups
                    </div>R1Soft
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Server
                    </div>LiteSpeed
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Free Domain
                    </div><i class="fa-solid fa-circle-xmark tables-icon-cross"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Ticket Support
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
            </div><!-- .tables-features-list -->
            <div class="tables-buttons">
                <a class="tables-button tables-button-color1" href="#"><i class="fa-solid fa-cart-shopping tables-icon-order"></i>Order Now</a>
            </div><!-- .tables-buttons -->
            <div class="tables-head2">
                <div class="tables-heading2">
                    Plan 1
                </div>
            </div><!-- .tables-head2 -->
            <div class="tables-features-list">
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Addon Domains
                    </div>1
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Databases
                    </div>Unlimited
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        FTP Accounts
                    </div>Unlimited
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Email Accounts
                    </div>Unlimited
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Mailing lists
                    </div>Unlimited
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Subdomains
                    </div>Unlimited
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Email Limit
                    </div>500/hour
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Auto Responders
                    </div>Unlimited
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        File Manager
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
            </div><!-- .tables-features-list -->
            <div class="tables-buttons">
                <a class="tables-button tables-button-color1" href="#"><i class="fa-solid fa-cart-shopping tables-icon-order"></i>Order Now</a>
            </div><!-- .tables-buttons -->
            <div class="tables-head2">
                <div class="tables-heading2">
                    Plan 1
                </div>
            </div><!-- .tables-head2 -->
            <div class="tables-features-list">
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        WordPress
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Joomla
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Drupal
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Magento
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        Zen Cart
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        phpBB
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        MyBB
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        SMF
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
                <div class="tables-features-list-item">
                    <div class="tables-features-list-item-overfeat">
                        PHPCoin
                    </div><i class="fa-solid fa-circle-check tables-icon-check"></i>
                </div><!-- .tables-features-list-item -->
            </div><!-- .tables-features-list -->
            <div class="tables-buttons">
                <a class="tables-button tables-button-color1" href="#"><i class="fa-solid fa-cart-shopping tables-icon-order"></i>Order Now</a>
            </div><!-- .tables-buttons -->
        </div><!-- .tables-box -->
    </div><!-- tables -->

<!-- /end Pricing Table (1 plan) --->

This HTML is the complete 1 plan table which consists of:

Comparison Column (div classes: tables-box tables-box-features) - This column contains the features for each row and is displayed as the first column of each of the 1-6 examples.

Plan Column (div classes: tables-box tables-box-1) - This column is the plan which contains the plan title, description, features, pricing and order buttons. The 2, 3, 4, 5 & 6 plan layouts will contain one of these blocks for each plan.

Customization Examples

In this section we will look at how to make customizations to the content.

Changing plan name

The plan name is set multiple times within the plan column. You will need to update the following references, changing Plan 1 to your desired name:

<div class="tables-heading">
    Plan 1
</div>

<div class="tables-heading2">
    Plan 1
</div>

Changing plan description

The plan description is set one time within the plan column. Edit the following text with your own:

<div class="tables-text">
	Perfect shared hosting plan for beginners
</div><!-- .tables-text -->

Changing plan pricing

The plan pricing is set one time within the plan column. Edit the following text with your own:

<div class="tables-price">
	<div class="tables-price-priceprefix">Only</div><div class="tables-price-currencyprefix">$</div><div class="tables-price-price">9.99</div><div class="tables-price-term">/month</div>
</div><!-- .tables-price -->

Changing a plan feature and value

Each plan feature represents one row of the table. A feature is defined in both the feature column and plan column. For example let's edit the Server feature.

It is defined in the feature column (displayed on desktop):

<div class="tables-features-list-item">
	<i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Server
</div>

And in the plan column:

<div class="tables-features-list-item">
	<div class="tables-features-list-item-overfeat">
		Server
	</div>LiteSpeed
</div><!-- .tables-features-list-item -->

The plan column contains both the feature (displayed on mobile) and the value (LiteSpeed), this text can be edited to replace the feature.

You can also replace the feature value with a check or cross icon:

Check

<div class="tables-features-list-item">
	<div class="tables-features-list-item-overfeat">
		Server
	</div><i class="fa-solid fa-circle-check tables-icon-check"></i>
</div><!-- .tables-features-list-item -->

Cross

<div class="tables-features-list-item">
	<div class="tables-features-list-item-overfeat">
		Server
	</div><i class="fa-solid fa-circle-xmark tables-icon-cross"></i>
</div><!-- .tables-features-list-item -->

Setting plan order URLs

The plan URL is set multiple times within the plan column.

The first is the URL when someone clicks on a random place of the plan column:

onclick="location.href='#';"

It is also set for all order buttons (4) which are displayed at the bottom of each table feature set:

<div class="tables-buttons">
	<a class="tables-button tables-button-color1" href="#"><i class="fa-solid fa-cart-shopping tables-icon-order"></i>Order Now</a>
</div><!-- .tables-buttons -->

To set the URL simply change the default # with your URL.

Removing a plan row/feature

You can remove a feature/row easily by deleting the HTML markup. For example lets say we want to remove the Server feature/row. You will need to remove the following HTML from the feature column and plan column.

Feature column:

<div class="tables-features-list-item">
	<i class="fa-solid fa-arrow-up-right-from-square tables-icon-feature"></i>Server
</div>

Plan column:

<div class="tables-features-list-item">
	<div class="tables-features-list-item-overfeat">
		Server
	</div>LiteSpeed
</div><!-- .tables-features-list-item -->

Request Support

We hope you found this documentation useful. If you run into any issues we will be happy to assist you.