How to Add Free Pricing Table in Weebly Site?

Weebly introduced a free “Price Chart” app through App Center which helps you to add simple pricing tables on your site. This is one of the free app 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 using the following methods:

  • Using Price Chart app from App Center
  • Pricing table widget using custom script

How to Add Free Pricing Table in Weebly Site?

Weebly Price Chart App

First let us discuss about the price chart app which is available under “eCommerce” category of Weebly App Center. Connect this app to your site and drag the element on the page where you want to add the pricing table. The table created will look something like below and you can try out on your Weebly site and customize it further.

Pricing Table Created with Weebly Pricing Chart App
Pricing Table Created with Weebly Pricing Chart App

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. The app needs to be connected to each of your site separately and has 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.
  • The widget is responsive auto aligning on mobile devices.
  • The background colors can be customized as you need.

Pricing Table Widget Using Script

The second option we explain here is the pricing table widget using a free StyleFix and PrefixFree scripts which can be seen in the this demo page.

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 = (/^{3,10}:/.exec(i) || ),
                    o = (/^{3,10}:\/\/+/.exec(i) || ),
                    u = /^(*)\??/.exec(r),
                    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 /^({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:not()').forEach(StyleFix.link);
                t("style").forEach(StyleFix.styleElement);
                t("").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(t, n, r) || t;
                return t
            },
            camelCase: function(e) {
                return e.replace(/-()/g, function(e, t) {
                    return t.toUpperCase()
                }).replace("-", "")
            },
            deCamelCase: function(e) {
                return e.replace(//g, function(e) {
                    return "-" + e.toLowerCase()
                })
            }
        };
        (function() {
            setTimeout(function() {
                t('link').forEach(StyleFix.link)
            }, 10);
            document.addEventListener("DOMContentLoaded", StyleFix.process, !1)
        })()
    })();
(function(e) {
    function t(e, t, r, i, s) {
        e = n;
        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(/-\*-(?=+)/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;
                    e = ++e || 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);
        else
            for (var f in i) o(StyleFix.deCamelCase(f));
        var l = {
            uses: 0
        };
        for (var c in e) {
            var h = e;
            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;
            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 = "";
            r = e;
            return !!r
        }
        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 = e = e = e;
        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,
                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;
            !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 ? "(" + t + ")" : "");
            !s(u) && s(n.prefixSelector(u)) && n.selectors.push(o)
        }
        for (var a in r) {
            var u = a + " " + (r || "");
            !s("@" + u) && s("@" + n.prefix + u) && n.atrules.push(a)
        }
        e.removeChild(i)
    })();
    n.valueProperties = ;
    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.

Related:  HTML Images Tutorial

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>

Recommended Articles:

4 thoughts on “How to Add Free Pricing Table in Weebly Site?”

  1. 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 ?

    Reply
    • 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.

      Reply
    • 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.

      Reply

Leave a Comment