Earlier Weebly did not have any option to add pricing table widget on the editor. However, later Weebly introduced a free “Price Chart” app through App Center. This app helps you to add simple pricing tables on your site. This is one of the free apps from Weebly and we hope there may be many other pricing table apps in future for the user to select from. In this article we will explain how to add free pricing table in Weebly site.
Related: How to add organization chart in Weebly site?
Add Pricing Table in Weebly
You can use the following methods to add pricing table in Weebly.
- Using Price Chart app from App Center
- Pricing table widget using custom script
Let us explain both the methods in detail.
Weebly Price Chart App
First let us discuss about the price chart app which is available under “eCommerce” category of Weebly App Center. When you are in Weebly editor, go to “Apps” section and search for Pricing Chart app. After finding the app, you can connect the app to your site. Check our article on how to connect apps from Weebly App Center to your site.
Once you successfully connected the app, go to “Build” tab and drag the element on the page where you want to add the pricing table. The pricing table will look something like below. You can customize the text, buttons, size and colors of the table.
Features of Free Price Chart App
Price chart app is published by Weebly and hence you can assume the integration with Weebly editor will be more easier than any other app. Remember, you have to connect the app to each of your site separately and use the following features:
- The widget has a plan, features and button elements together.
- This is a complete widget which means you can’t drag any other elements in-between.
- Though the widget allows unlimited plans and features, we recommend to strict to 3 to 5 plans.
- You can customize the background colors as you need.
Pricing Table Widget Using Script
The default Weebly app is supposed to be responsive and auto aligning on mobile devices. However, it does not properly on mobiles and also create annoying experience when editing the content in editor. Therefore, the second option we explain here is the custom pricing table widget using a free StyleFix and PrefixFree scripts. The widget will look like below:
You can add the widget in your Weebly site by following the below steps.
- Adding the script
- Adding custom CSS style
- Embedding HTML code
Adding the Script
Add the below script under “Pages > Choose the page > SEO Settings > Footer Code” section of your Weebly site.
< script >
/**
* StyleFix 1.0.3 & PrefixFree 1.0.7
* @author Lea Verou
* MIT license
*/
(function() {
function t(e, t) {
return [].slice.call((t || document).querySelectorAll(e))
}
if (!window.addEventListener) return;
var e = window.StyleFix = {
link: function(t) {
try {
if (t.rel !== "stylesheet" || t.hasAttribute("data-noprefix")) return
} catch (n) {
return
}
var r = t.href || t.getAttribute("data-href"),
i = r.replace(/[^\/]+$/, ""),
s = (/^[a-z]{3,10}:/.exec(i) || [""])[0],
o = (/^[a-z]{3,10}:\/\/[^\/]+/.exec(i) || [""])[0],
u = /^([^?]*)\??/.exec(r)[1],
a = t.parentNode,
f = new XMLHttpRequest,
l;
f.onreadystatechange = function() {
f.readyState === 4 && l()
};
l = function() {
var n = f.responseText;
if (n && t.parentNode && (!f.status || f.status < 400 || f.status > 600)) {
n = e.fix(n, !0, t);
if (i) {
n = n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi, function(e, t, n) {
return /^([a-z]{3,10}:|#)/i.test(n) ? e : /^\/\//.test(n) ? 'url("' + s + n + '")' : /^\//.test(n) ? 'url("' + o + n + '")' : /^\?/.test(n) ? 'url("' + u + n + '")' : 'url("' + i + n + '")'
});
var r = i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, "\\$1");
n = n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)" + r, "gi"), "$1")
}
var l = document.createElement("style");
l.textContent = n;
l.media = t.media;
l.disabled = t.disabled;
l.setAttribute("data-href", t.getAttribute("href"));
a.insertBefore(l, t);
a.removeChild(t);
l.media = t.media
}
};
try {
f.open("GET", r);
f.send(null)
} catch (n) {
if (typeof XDomainRequest != "undefined") {
f = new XDomainRequest;
f.onerror = f.onprogress = function() {};
f.onload = l;
f.open("GET", r);
f.send(null)
}
}
t.setAttribute("data-inprogress", "")
},
styleElement: function(t) {
if (t.hasAttribute("data-noprefix")) return;
var n = t.disabled;
t.textContent = e.fix(t.textContent, !0, t);
t.disabled = n
},
styleAttribute: function(t) {
var n = t.getAttribute("style");
n = e.fix(n, !1, t);
t.setAttribute("style", n)
},
process: function() {
t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);
t("style").forEach(StyleFix.styleElement);
t("[style]").forEach(StyleFix.styleAttribute)
},
register: function(t, n) {
(e.fixers = e.fixers || []).splice(n === undefined ? e.fixers.length : n, 0, t)
},
fix: function(t, n, r) {
for (var i = 0; i < e.fixers.length; i++) t = e.fixers[i](t, n, r) || t;
return t
},
camelCase: function(e) {
return e.replace(/-([a-z])/g, function(e, t) {
return t.toUpperCase()
}).replace("-", "")
},
deCamelCase: function(e) {
return e.replace(/[A-Z]/g, function(e) {
return "-" + e.toLowerCase()
})
}
};
(function() {
setTimeout(function() {
t('link[rel="stylesheet"]').forEach(StyleFix.link)
}, 10);
document.addEventListener("DOMContentLoaded", StyleFix.process, !1)
})()
})();
(function(e) {
function t(e, t, r, i, s) {
e = n[e];
if (e.length) {
var o = RegExp(t + "(" + e.join("|") + ")" + r, "gi");
s = s.replace(o, i)
}
return s
}
if (!window.StyleFix || !window.getComputedStyle) return;
var n = window.PrefixFree = {
prefixCSS: function(e, r, i) {
var s = n.prefix;
n.functions.indexOf("linear-gradient") > -1 && (e = e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig, function(e, t, n, r) {
return t + (n || "") + "linear-gradient(" + (90 - r) + "deg"
}));
e = t("functions", "(\\s|:|,)", "\\s*\\(", "$1" + s + "$2(", e);
e = t("keywords", "(\\s|:)", "(\\s|;|\\}|$)", "$1" + s + "$2$3", e);
e = t("properties", "(^|\\{|\\s|;)", "\\s*:", "$1" + s + "$2:", e);
if (n.properties.length) {
var o = RegExp("\\b(" + n.properties.join("|") + ")(?!:)", "gi");
e = t("valueProperties", "\\b", ":(.+?);", function(e) {
return e.replace(o, s + "$1")
}, e)
}
if (r) {
e = t("selectors", "", "\\b", n.prefixSelector, e);
e = t("atrules", "@", "\\b", "@" + s + "$1", e)
}
e = e.replace(RegExp("-" + s, "g"), "-");
e = e.replace(/-\*-(?=[a-z]+)/gi, n.prefix);
return e
},
property: function(e) {
return (n.properties.indexOf(e) ? n.prefix : "") + e
},
value: function(e, r) {
e = t("functions", "(^|\\s|,)", "\\s*\\(", "$1" + n.prefix + "$2(", e);
e = t("keywords", "(^|\\s)", "(\\s|$)", "$1" + n.prefix + "$2$3", e);
return e
},
prefixSelector: function(e) {
return e.replace(/^:{1,2}/, function(e) {
return e + n.prefix
})
},
prefixProperty: function(e, t) {
var r = n.prefix + e;
return t ? StyleFix.camelCase(r) : r
}
};
(function() {
var e = {},
t = [],
r = {},
i = getComputedStyle(document.documentElement, null),
s = document.createElement("div").style,
o = function(n) {
if (n.charAt(0) === "-") {
t.push(n);
var r = n.split("-"),
i = r[1];
e[i] = ++e[i] || 1;
while (r.length > 3) {
r.pop();
var s = r.join("-");
u(s) && t.indexOf(s) === -1 && t.push(s)
}
}
},
u = function(e) {
return StyleFix.camelCase(e) in s
};
if (i.length > 0)
for (var a = 0; a < i.length; a++) o(i[a]);
else
for (var f in i) o(StyleFix.deCamelCase(f));
var l = {
uses: 0
};
for (var c in e) {
var h = e[c];
l.uses < h && (l = {
prefix: c,
uses: h
})
}
n.prefix = "-" + l.prefix + "-";
n.Prefix = StyleFix.camelCase(n.prefix);
n.properties = [];
for (var a = 0; a < t.length; a++) {
var f = t[a];
if (f.indexOf(n.prefix) === 0) {
var p = f.slice(n.prefix.length);
u(p) || n.properties.push(p)
}
}
n.Prefix == "Ms" && !("transform" in s) && !("MsTransform" in s) && "msTransform" in s && n.properties.push("transform", "transform-origin");
n.properties.sort()
})();
(function() {
function i(e, t) {
r[t] = "";
r[t] = e;
return !!r[t]
}
var e = {
"linear-gradient": {
property: "backgroundImage",
params: "red, teal"
},
calc: {
property: "width",
params: "1px + 5%"
},
element: {
property: "backgroundImage",
params: "#foo"
},
"cross-fade": {
property: "backgroundImage",
params: "url(a.png), url(b.png), 50%"
}
};
e["repeating-linear-gradient"] = e["repeating-radial-gradient"] = e["radial-gradient"] = e["linear-gradient"];
var t = {
initial: "color",
"zoom-in": "cursor",
"zoom-out": "cursor",
box: "display",
flexbox: "display",
"inline-flexbox": "display",
flex: "display",
"inline-flex": "display",
grid: "display",
"inline-grid": "display",
"min-content": "width"
};
n.functions = [];
n.keywords = [];
var r = document.createElement("div").style;
for (var s in e) {
var o = e[s],
u = o.property,
a = s + "(" + o.params + ")";
!i(a, u) && i(n.prefix + a, u) && n.functions.push(s)
}
for (var f in t) {
var u = t[f];
!i(f, u) && i(n.prefix + f, u) && n.keywords.push(f)
}
})();
(function() {
function s(e) {
i.textContent = e + "{}";
return !!i.sheet.cssRules.length
}
var t = {
":read-only": null,
":read-write": null,
":any-link": null,
"::selection": null
},
r = {
keyframes: "name",
viewport: null,
document: 'regexp(".")'
};
n.selectors = [];
n.atrules = [];
var i = e.appendChild(document.createElement("style"));
for (var o in t) {
var u = o + (t[o] ? "(" + t[o] + ")" : "");
!s(u) && s(n.prefixSelector(u)) && n.selectors.push(o)
}
for (var a in r) {
var u = a + " " + (r[a] || "");
!s("@" + u) && s("@" + n.prefix + u) && n.atrules.push(a)
}
e.removeChild(i)
})();
n.valueProperties = ["transition", "transition-property"];
e.className += " " + n.prefix;
StyleFix.register(n.prefixCSS)
})(document.documentElement);
< /script>
Adding Custom CSS Code
The second step is to add custom CSS code for the pricing table under “Pages > Choose the page > SEO Settings > Header Code“.
<style type="text/css" media="screen">
.pricing_table {
line-height: 150%;
font-size: 12px;
margin: 0 auto;
width: 75%;
max-width: 800px;
padding-top: 10px;
}
.price_block {
text-align: center;
width: 100%;
color: #fff;
float: left;
list-style-type: none;
transition: all 0.25s;
position: relative;
box-sizing: border-box;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
}
/*Pricing Table Header Block with Plans*/
.pricing_table h3 {
text-transform: uppercase;
padding: 5px 0;
background: #333;
margin: -10px 0 1px 0;
}
/*Price tag section*/
.price {
display: table;
background: #444;
width: 100%;
height: 70px;
}
.price_figure {
font-size: 24px;
text-transform: uppercase;
vertical-align: middle;
display: table-cell;
}
.price_number {
font-weight: bold;
display: block;
}
.price_tenure {
font-size: 11px;
}
/* Pricing Plan Features*/
.features {
background: #def0f4;
color: #000;
}
.features li {
padding: 8px 15px;
border-bottom: 1px solid #ccc;
font-size: 11px;
list-style-type: none;
}
.footer {
padding: 15px;
background: #DEF0F4;
}
.action_button {
text-decoration: none;
color: #fff;
font-weight: bold;
border-radius: 5px;
background: linear-gradient(#666, #333);
padding: 5px 20px;
font-size: 11px;
text-transform: uppercase;
}
.price_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
transform: scale(1.04) translateY(-5px);
z-index: 1;
border-bottom: 0 none;
}
.price_block:hover .price {
background:linear-gradient(#DB7224, #F9B84A);
box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
background: #222;
}
.price_block:hover .action_button {
background: linear-gradient(#F9B84A, #DB7224);
}
@media only screen and (min-width : 480px) and (max-width : 768px) {
.price_block {width: 50%;}
.price_block:nth-child(odd) {border-right: 1px solid transparent;}
.price_block:nth-child(3) {clear: both;}
.price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
.price_block {width: 25%;}
.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
.price_block:last-child {border-right: 0 none;}
.price_block:hover {border: 0 none;}
}
.skeleton, .skeleton ul, .skeleton li, .skeleton div, .skeleton h3, .skeleton span, .skeleton p {
border: 5px solid rgba(255, 255, 255, 0.9);
border-radius: 5px;
margin: 7px !important;
background: rgba(0, 0, 0, 0.05) !important;
padding: 0 !important;
text-align: left !important;
display: block !important;
width: auto !important;
height: auto !important;
font-size: 10px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: black !important;
}
.skeleton .label {
font-size: 11px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: white !important;
border: 0 none !important;
padding: 5px !important;
margin: 0 !important;
float: none !important;
text-align: left !important;
text-shadow: 0 0 1px white;
background: none !important;
}
.skeleton {
display: none !important;
margin: 100px !important;
clear: both;
}
</style>
You can customize any of the attributes like font size, color, etc. as per your need to suit your site’s layout.
Adding HTML Code
The last step is to drag and drop an “Embed Code” element on the page where you want to add the pricing table and insert the following HTML code. Don’t forget to replace the content and link URLs with your own.
<ul class="pricing_table"> <li class="price_block"> <h3>Starter</h3> <div class="price"> <div class="price_figure"> <span class="price_number">FREE</span> </div> </div> <ul class="features"> <li>1GB Storage</li> <li>2 Clients</li> <li>5 Active Projects</li> <li>5 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Basic</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$9.99</span> <span class="price_tenure">per month</span> </div> </div> <ul class="features"> <li>2GB Storage</li> <li>5 Clients</li> <li>10 Active Projects</li> <li>10 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Premium</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$19.99</span> <span class="price_tenure">per month</span> </div> </div> <ul class="features"> <li>5GB Storage</li> <li>10 Clients</li> <li>20 Active Projects</li> <li>20 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Lifetime</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$999</span> </div> </div> <ul class="features"> <li>Unlimited Storage</li> <li>Unlimited Clients</li> <li>Unlimited Projects</li> <li>Unlimited Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> </ul> <ul class="skeleton pricing_table" style="margin-top: 100px; overflow: hidden;"> <li class="label" style="margin: 0 none;">ul.pricing_table</li> <li class="price_block"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> <li class="price_block" style="opacity: 0.5;"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> <li class="price_block" style="opacity: 0.25;"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> </ul>
The advantage of this custom widget is that you can prepare the content offline and paste the script/CSS/content in few minutes.
Final Words
Pricing table is one of the essential widget when you sell services and products on Weebly site. Weebly’s Pricing Chart app works well on desktop devices. However, it does not align properly on mobile devices. If you do not like to use Weebly app, try the custom script and create pricing tables easily anywhere on the site.
Is it possible to change the custom pricing table to add a features list on the left and just checkbox in the columns of the different pricing packs ?
These pricing tables are to display information, what you ask for is to validate and process the inputs. That should be possible only with scripts.
don’t work :(
If you mean Bootstrap pricing table, generally it breaks the site which you need to adjust with custom CSS. But all three pricing tables should wok as explained.