Your IP : 216.73.216.26
<?php include 'header.php'; ?>
<style>
/* Existing styles */
.comparison {
max-width: 940px;
margin: 0 auto;
font: 13px/1.4 "sans-serif";
text-align: center;
padding: 10px;
margin-bottom: 37px;
}
.comparison table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
border-bottom: 1px solid #CCC;
border-left: 1px solid #ccc;
}
.comparison td, .comparison th {
border-right: 1px solid #CCC;
empty-cells: show;
padding: 10px;
text-align: center;
}
.compare-heading {
font-size: 18px;
font-weight: bold !important;
border-bottom: 0 !important;
padding-top: 10px !important;
}
.comparison tbody tr:nth-child(odd) {
display: none;
}
.comparison .compare-row {
background: #F5F5F5;
}
.comparison .tickblue {
color: #0078C1;
}
.comparison .tickgreen {
color: #009E2C;
}
.comparison th {
font-weight: normal;
padding: 0;
border-bottom: 1px solid #CCC;
}
.comparison tr td:first-child {
text-align: left;
}
.comparison .qbse, .comparison .qbo, .comparison .tl {
color: #FFF;
padding: 10px;
font-size: 13px;
border-right: 1px solid #CCC;
border-bottom: 0;
}
.comparison .tl2 {
border-right: 0;
}
.comparison .qbse {
background: #0078C1;
border-top-left-radius: 3px;
border-left: 0px;
}
.comparison .qbo {
background: #009E2C;
border-top-right-radius: 3px;
border-right: 0px;
}
.comparison .price-info {
padding: 5px 15px 15px 15px;
}
.comparison .price-was {
color: #999;
text-decoration: line-through;
}
.comparison .price-now, .comparison .price-now span {
color: black;
}
.comparison .price-now span {
font-size: 32px;
}
.comparison .price-small {
font-size: 18px !important;
position: relative;
top: -11px;
left: 2px;
}
.comparison .price-buy {
background: #FFBC09;
padding: 10px 20px;
font-size: 12px;
display: inline-block;
color: black;
text-decoration: none;
border-radius: 3px;
text-transform: uppercase;
margin: 5px 0 10px 0;
}
.comparison .price-try {
font-size: 12px;
}
.comparison .price-try a {
color: #202020;
}
@media (max-width: 767px) {
.comparison td:first-child, .comparison th:first-child {
display: none;
}
.comparison tbody tr:nth-child(odd) {
display: table-row;
background: #F7F7F7;
}
.comparison .row {
background: #FFF;
}
.comparison td, .comparison th {
border: 1px solid #CCC;
}
.price-info {
border-top: 0 !important;
}
}
@media (max-width: 639px) {
.comparison .price-buy {
padding: 5px 10px;
}
.comparison td, .comparison th {
padding: 10px 5px;
}
.comparison .hide-mobile {
display: none;
}
.comparison .price-now span {
font-size: 16px;
}
.comparison .price-small {
font-size: 16px !important;
top: 0;
left: 0;
}
.comparison .qbse, .comparison .qbo {
font-size: 12px;
padding: 10px 5px;
}
.comparison .price-buy {
margin-top: 10px;
}
.compare-heading {
font-size: 13px;
}
.table-responsive {
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.table-responsive table {
width: 100%;
margin-bottom: 0;
border-collapse: collapse;
border-spacing: 0;
}
.table-responsive table tr {
border-bottom: 1px solid #ddd;
}
.table-responsive table th,
.table-responsive table td {
border: none;
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
}
.table-responsive table th {
text-align: left;
}
}
}
button {
width: 150px; /* Adjust width as needed */
height: 50px; /* Adjust height as needed */
font-size: 18px; /* Increase font size */
border-radius: 5px; /* Optional: Add rounded corners */
}
.active {
background-color: #ffbc09;
color: black;
}
.countrysize {
width: 220px; /* Adjust width as needed */
height: 50px; /* Adjust height as needed */
font-size: 22px; /* Increase font size */
border-radius: 5px; /* Optional: Add rounded corners */
}
</style>
</br></br>
<div class="container">
<h4 style="text-align: center; color: black; font-size:40px;">Set up your WTM ECommerce Store</h4><br>
<center>
<div>
<button id="monthButton" onclick="setPricingDuration('month')">Monthly</button>
<button id="yearButton" onclick="setPricingDuration('year')" class="active">Yearly</button>
</div>
<div style="margin-top: 10px; padding: 10px;"">
<select id="countrySelect" onchange="setPricing()" class="countrysize">
<option value="inr" selected>India</option>
<option value="usd">United States</option>
<option value="usd">Global</option>
<!-- Add other countries as needed -->
</select>
</div>
</center>
</div>
</br>
<div class="comparison">
<table id="pricingTable" class="table-responsive">
<thead>
<tr>
<th colspan="5"></th>
</tr>
<tr>
<th class="tl"></th>
<th class="compare-heading">Basic WTM Webshop</th>
<th class="compare-heading">Professional WTM Webshop</th>
<th class="compare-heading">Advance WTM Webshop</th>
<th class="compare-heading">Enterprises WTM Webshop</th>
</tr>
<tr>
<th></th>
<th class="price-info">
<div class="price-now">
<p>All the basics of starting a new business</p>
</div>
</th>
<th class="price-info">
<div class="price-now">
<p>Everything you need for a growing business</p>
</div>
</th>
<th class="price-info">
<div class="price-now">
<p>Advanced features for scaling your business</p>
</div>
</th>
<th class="price-info">
<div class="price-now">
<p>Including all features of Advance Plan</p>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td colspan="4">Monthly Price</td>
</tr>
<tr class="compare-row">
<td>Monthly Price</td>
<td class="price-now" id="plan1"><span class="price-small">INR ₹<span class="price-medium">1500</span></span> /month</td>
<td class="price-now" id="plan2"><span class="price-small">INR ₹<span class="price-medium">4000</span></span> /month</td>
<td class="price-now" id="plan3"><span class="price-small">INR ₹<span class="price-medium">15000</span></span> /month</td>
<td class="price-now" id="plan4"><span class="price-small">INR ₹<span class="price-medium">80000</span></span> /month</td>
</tr>
<tr>
<td> </td>
<td colspan="4">FEATURES</td>
</tr>
<tr>
<td>Features</td>
<td><a href="enquiry.php" class="price-buy">Try <span class="hide-mobile">It</span></a></td>
<td><a href="enquiry.php" class="price-buy">Try <span class="hide-mobile">It</span></a></td>
<td><a href="enquiry.php" class="price-buy">Try <span class="hide-mobile">It</span></a></td>
<td><a href="enquiry.php" class="price-buy">Request <span class="hide-mobile"></span></a></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Online E-Commerce Website</td>
</tr>
<tr class="compare-row">
<td>Online E-Commerce Website</td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td>Including all advance WTM Webshop features.+<a href="enterpriseecommerce.php"> <span style="color: Blue">More Detail Click Here..</span></a></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Unlimited Product</td>
</tr>
<tr class="compare-row">
<td>Unlimited Product</td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Free SSL Certificate</td>
</tr>
<tr class="compare-row">
<td>Free SSL Certificate</td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Payment Gateway</td>
</tr>
<tr class="compare-row">
<td>Payment Gateway</td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Mobile App</td>
</tr>
<tr class="compare-row">
<td>Mobile App</td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="4">International Payment Gateway</td>
</tr>
<tr class="compare-row">
<td>International Payment Gateway</td>
<td><center><img src="assets/images/2.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/2.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="4">Multivender Online Selling</td>
</tr>
<tr class="compare-row">
<td>Multivender Online Selling</td>
<td><center><img src="assets/images/2.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/2.png" style="max-width: 13%"></center></td>
<td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script>
function setPricingDuration(duration) {
setPricing(undefined, duration);
// Get buttons by their IDs
var monthButton = document.getElementById('monthButton');
var yearButton = document.getElementById('yearButton');
// Reset all buttons to default state
monthButton.classList.remove('active');
yearButton.classList.remove('active');
// Set the clicked button to active state
if (duration === 'month') {
monthButton.classList.add('active');
} else if (duration === 'year') {
yearButton.classList.add('active');
}
}
function setPricing(country, duration) {
var selectedCountry = country || document.getElementById('countrySelect').value;
var selectedDuration = duration || 'month'; // Default duration
var pricing = {
'inr': {
'month': [2000, 5000, 20000, 100000],
'year': [1500, 4000, 15000,80000]
},
'usd': {
'month': [30, 80, 300 ,1500],
'year': [20, 60, 200 ,1000]
}
};
var prices = pricing[selectedCountry][selectedDuration];
document.getElementById('plan1').innerHTML = '<span class="price-large">' + (selectedCountry === 'inr' ? ' ₹' : ' $') + '<span class="price-medium">' + prices[0] + '</span></span> /' + 'month';
document.getElementById('plan2').innerHTML = '<span class="price-large">' + (selectedCountry === 'inr' ? ' ₹' : ' $') + '<span class="price-medium">' + prices[1] + '</span></span> /' + 'month';
document.getElementById('plan3').innerHTML = '<span class="price-large">' + (selectedCountry === 'inr' ? ' ₹' : ' $') + '<span class="price-medium">' + prices[2] + '</span></span> /' + 'month';
document.getElementById('plan4').innerHTML = '<span class="price-large">' + (selectedCountry === 'inr' ? ' ₹' : ' $') + '<span class="price-medium">' + prices[3] + '</span></span> /' + 'month';
}
window.onload = function() {
setPricing();
};
window.onload = function() {
setPricing(undefined, 'year');
};
</script>
<?php include 'footer.php'; ?>