Support Home › Support Home › CloudServer › HTML Template › Change Pricing Plan option
ThemeLooks Support Team.
Nitin AgarwalHello,
In Shared Hosting page there are 3 pricing plans. I want to make it 4 as it is there on this theme- http://themelooks.us/demo/ecohosting/wordpress/shared-hosting/
I tried to do this using this code but it doesn’t work as expected.
<!-- Pricing Area Start -->
<div id="pricing" class="bg--lightgray">
<div class="container">
<!-- Section Title Start -->
<div class="section-title">
<h2>Populer Pricing</h2>
</div>
<!-- Section Title End -->
<div class= "row">
<!-- Pricing Slider Start -->
<div class="pricing--slider">
<!-- Pricing Item Start -->
<div class="col-md-3 col-sm-6 pricing--item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">₹49<span>/m</span></div>
<div class="pt-plan">Personal</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li>2GB RAM</li>
<li>20GB SSD Cloud Storage</li>
<li>Weekly Backups</li>
<li>DDoS Protection</li>
<li>Full Root Access</li>
<li>24/7/365 Tech Support</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-lg btn-custom">Order Now</a>
</div>
</div>
</div>
<!-- Pricing Item End -->
<!-- Pricing Item Start -->
<div class="col-md-3 col-sm-6 pricing--item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">₹99<span>/m</span></div>
<div class="pt-plan">Startup</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li>4GB RAM</li>
<li>50GB SSD Cloud Storage</li>
<li>Weekly Backups</li>
<li>DDoS Protection</li>
<li>Full Root Access</li>
<li>24/7/365 Tech Support</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-lg btn-custom">Order Now</a>
</div>
</div>
</div>
<!-- Pricing Item End -->
<!-- Pricing Item Start -->
<div class="col-md-3 col-sm-6 pricing--item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">₹149<span>/m</span></div>
<div class="pt-plan">Advance</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li>8GB RAM</li>
<li>80GB SSD Cloud Storage</li>
<li>Weekly Backups</li>
<li>DDoS Protection</li>
<li>Full Root Access</li>
<li>24/7/365 Tech Support</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-lg btn-custom">Order Now</a>
</div>
</div>
</div>
<!-- Pricing Item End -->
</div>
<!-- Pricing Slider End -->
</div>
</div>
</div>
<!-- Pricing Area End -->Please help me with it.
ThemeLooks Support TeamHi Nitin,
Either remove .pricing-slider class from there.
Or, use below markup:
<!-- Pricing Area Start -->
<div id="pricing" class="bg--lightgray">
<div class="container">
<!-- Section Title Start -->
<div class="section-title">
<h2>Populer Pricing</h2>
</div>
<!-- Section Title End -->
<!-- Pricing Slider Start -->
<div class="row">
<!-- Pricing Item Start -->
<div class="col-md-3 col-sm-6 pricing--item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">$9.99<span>/m</span></div>
<div class="pt-plan">Shared Basic</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li>2GB RAM</li>
<li>20GB SSD Cloud Storage</li>
<li>Weekly Backups</li>
<li>DDoS Protection</li>
<li>Full Root Access</li>
<li>24/7/365 Tech Support</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-lg btn-custom">Order Now</a>
</div>
</div>
</div>
<!-- Pricing Item End -->
<!-- Pricing Item Start -->
<div class="col-md-3 col-sm-6 pricing--item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">$29.99<span>/m</span></div>
<div class="pt-plan">Shared Pro</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li>4GB RAM</li>
<li>50GB SSD Cloud Storage</li>
<li>Weekly Backups</li>
<li>DDoS Protection</li>
<li>Full Root Access</li>
<li>24/7/365 Tech Support</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-lg btn-custom">Order Now</a>
</div>
</div>
</div>
<!-- Pricing Item End -->
<!-- Pricing Item Start -->
<div class="col-md-3 pricing--item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">$49.99<span>/m</span></div>
<div class="pt-plan">Shared Business</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li>8GB RAM</li>
<li>80GB SSD Cloud Storage</li>
<li>Weekly Backups</li>
<li>DDoS Protection</li>
<li>Full Root Access</li>
<li>24/7/365 Tech Support</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-lg btn-custom">Order Now</a>
</div>
</div>
</div>
<!-- Pricing Item End -->
<!-- Pricing Item Start -->
<div class="col-md-3 pricing--item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">$49.99<span>/m</span></div>
<div class="pt-plan">Shared Business</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li>8GB RAM</li>
<li>80GB SSD Cloud Storage</li>
<li>Weekly Backups</li>
<li>DDoS Protection</li>
<li>Full Root Access</li>
<li>24/7/365 Tech Support</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-lg btn-custom">Order Now</a>
</div>
</div>
</div>
<!-- Pricing Item End -->
</div>
<!-- Pricing Slider End -->
</div>
</div>
<!-- Pricing Area End -->Best Regards,
ThemeLooks Support Team
Nitin AgarwalThanks a lot. Also please tell me how to do this for Pricing Table Area. Below is the code.
<!-- Pricing Table Area Start -->
<div class="pricing-table">
<div class="container">
<!-- Section Title Start -->
<div class="section-title">
<h2>Hosting Specification</h2>
</div>
<!-- Section Title End -->
<div class="row reset-gutter">
<!-- Pricing Table Item Start -->
<div class="col-md-2 pricing-table-item hidden-sm hidden-xs" data-has-pricing-head="no">
<div class="pricing--content">
<div class="pt-body">
<div class="pt-features">
<ul class="text-left">
<li>Hardware</li>
<li>Memory</li>
<li>HDD</li>
<li>Channel</li>
<li>Email</li>
<li>Monitoring</li>
<li>Support</li>
<li>Operation System</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
<!-- Pricing Table Item Start -->
<div class="col-md-3 col-sm-6 pricing-table-item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">₹49<span>/m</span></div>
<div class="pt-plan">Personal</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li><strong>Hardware</strong>Intel i5 2.7</li>
<li><strong>Memory</strong>512Mb Ram</li>
<li><strong>HDD</strong>10GB Storage</li>
<li><strong>Channel</strong>5GB Bandwidth</li>
<li><strong>Email</strong>20 Email Addresses</li>
<li><strong>Monitoring</strong>24/7</li>
<li><strong>Support</strong>24/7</li>
<li><strong>Operation System</strong>Linux</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-custom">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
<!-- Pricing Table Item Start -->
<div class="col-md-3 col-sm-6 pricing-table-item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">₹99<span>/m</span></div>
<div class="pt-plan">Startup</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li><strong>Hardware</strong>Intel i5 2.7</li>
<li><strong>Memory</strong>512Mb Ram</li>
<li><strong>HDD</strong>10GB Storage</li>
<li><strong>Channel</strong>5GB Bandwidth</li>
<li><strong>Email</strong>20 Email Addresses</li>
<li><strong>Monitoring</strong>24/7</li>
<li><strong>Support</strong>24/7</li>
<li><strong>Operation System</strong>Linux, Windows</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-custom">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
<!-- Pricing Table Item Start -->
<div class="col-md-3 col-sm-6 pricing-table-item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">₹149<span>/m</span></div>
<div class="pt-plan">Advance</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li><strong>Hardware</strong>Intel i5 2.7</li>
<li><strong>Memory</strong>512Mb Ram</li>
<li><strong>HDD</strong>10GB Storage</li>
<li><strong>Channel</strong>5GB Bandwidth</li>
<li><strong>Email</strong>20 Email Addresses</li>
<li><strong>Monitoring</strong>24/7</li>
<li><strong>Support</strong>24/7</li>
<li><strong>Operation System</strong>Linux, Windows</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-custom">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
<!-- Pricing Table Item Start -->
<div class="col-md-3 col-sm-6 pricing-table-item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">₹299<span>/m</span></div>
<div class="pt-plan">Enterprise</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li><strong>Hardware</strong>Intel i5 2.7</li>
<li><strong>Memory</strong>512Mb Ram</li>
<li><strong>HDD</strong>10GB Storage</li>
<li><strong>Channel</strong>5GB Bandwidth</li>
<li><strong>Email</strong>20 Email Addresses</li>
<li><strong>Monitoring</strong>24/7</li>
<li><strong>Support</strong>24/7</li>
<li><strong>Operation System</strong>Linux</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-custom">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
</div>
</div>
</div>
<!-- Pricing Table Area End -->Based on Bootstrap Grid System, it’s not possible to divide the 12 column with 5. Please learn more about the Bootstrap Grid System from here http://getbootstrap.com/css/#grid
However, you could use the code below if you want.
<!-- Pricing Table Area Start -->
<div class="pricing-table">
<div class="container">
<!-- Section Title Start -->
<div class="section-title">
<h2>Hosting Specification</h2>
</div>
<!-- Section Title End -->
<div class="row reset-gutter">
<!-- Pricing Table Item Start -->
<div class="col-md-2 col-md-offset-1 pricing-table-item hidden-sm hidden-xs" data-has-pricing-head="no">
<div class="pricing--content">
<div class="pt-body">
<div class="pt-features">
<ul class="text-left">
<li>Hardware</li>
<li>Memory</li>
<li>HDD</li>
<li>Channel</li>
<li>Email</li>
<li>Monitoring</li>
<li>Support</li>
<li>Operation System</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
<!-- Pricing Table Item Start -->
<div class="col-md-2 pricing-table-item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">$9.99<span>/m</span></div>
<div class="pt-plan">Shared Basic</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li><strong>Hardware</strong>Intel i5 2.7</li>
<li><strong>Memory</strong>512Mb Ram</li>
<li><strong>HDD</strong>10GB Storage</li>
<li><strong>Channel</strong>5GB Bandwidth</li>
<li><strong>Email</strong>20 Email Addresses</li>
<li><strong>Monitoring</strong>24/7</li>
<li><strong>Support</strong>24/7</li>
<li><strong>Operation System</strong>Linux</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-custom">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
<!-- Pricing Table Item Start -->
<div class="col-md-2 pricing-table-item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">$19.99<span>/m</span></div>
<div class="pt-plan">Shared Pro</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li><strong>Hardware</strong>Intel i5 2.7</li>
<li><strong>Memory</strong>512Mb Ram</li>
<li><strong>HDD</strong>10GB Storage</li>
<li><strong>Channel</strong>5GB Bandwidth</li>
<li><strong>Email</strong>20 Email Addresses</li>
<li><strong>Monitoring</strong>24/7</li>
<li><strong>Support</strong>24/7</li>
<li><strong>Operation System</strong>Linux, Windows</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-custom">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
<!-- Pricing Table Item Start -->
<div class="col-md-2 pricing-table-item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">$29.99<span>/m</span></div>
<div class="pt-plan">Shared Business</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li><strong>Hardware</strong>Intel i5 2.7</li>
<li><strong>Memory</strong>512Mb Ram</li>
<li><strong>HDD</strong>10GB Storage</li>
<li><strong>Channel</strong>5GB Bandwidth</li>
<li><strong>Email</strong>20 Email Addresses</li>
<li><strong>Monitoring</strong>24/7</li>
<li><strong>Support</strong>24/7</li>
<li><strong>Operation System</strong>Linux, Windows</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-custom">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
<!-- Pricing Table Item Start -->
<div class="col-md-2 pricing-table-item">
<div class="pricing--content">
<div class="pt-head">
<div class="caption">Starting At</div>
<div class="pt-price-tag">$29.99<span>/m</span></div>
<div class="pt-plan">Shared Business</div>
</div>
<div class="pt-body">
<div class="pt-features">
<ul>
<li><strong>Hardware</strong>Intel i5 2.7</li>
<li><strong>Memory</strong>512Mb Ram</li>
<li><strong>HDD</strong>10GB Storage</li>
<li><strong>Channel</strong>5GB Bandwidth</li>
<li><strong>Email</strong>20 Email Addresses</li>
<li><strong>Monitoring</strong>24/7</li>
<li><strong>Support</strong>24/7</li>
<li><strong>Operation System</strong>Linux, Windows</li>
</ul>
</div>
</div>
<div class="pt-footer">
<a href="#" class="btn btn-custom">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Table Item End -->
</div>
</div>
</div>
<!-- Pricing Table Area End -->Best Regards,
ThemeLooks Support Team
Nitin AgarwalHello,
I want to make it 4 pricing plans similar to how it is done in this page- http://themelooks.us/demo/ecohosting/wordpress/shared-hosting/
ThemeLooks Support TeamIn this issue, you need to hire someone else to customize the template for you based on your needs/requirements.
This is because, your provided example (EcoHosting) theme’s design & development process is not the same as your purchased one (CloudServer). Both are totally different to each other by their design & development.
Thanks for understanding.
Best Regards,
ThemeLooks Support Team
Nitin AgarwalThat’s sad. I know 4 columns can be done in this by just adding the correct bootstrap class or adding codes in the correct position as we did for the pricing list. Any ways I will figure it out myself.
Thanks
Nitin AgarwalMy problem is fixed. This solution will help other users as well
Add the following codes in custom.css folder:
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}Put it to use using the following class:
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>Great! We appreciate your expertise.
Best Regards,
ThemeLooks Support Team
