Your members want choices, just not too many. This article provides an example of how you can offer your members 3 different options on a sales page using a combination of CSS and HTML. This example assumes you have a basic understanding of HTML and CSS.
Keep in mind, this example is provided as a starting place. It can be copied and pasted onto your pages, and then you can change the href links to reflect your purchase link SmartTags, and the style attributes in the different sections to adjust the looks. At the bottom of this article, you will find the CSS and HTML in separate files if you and/or your developer would like to edit these different areas on a more thorough basis.
To create pricing tables on your page, simply copy and paste the following code into an HTML block, or within the "Text" view of the editor if using the old WordPress editor:
<style>
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
</style>
<div class="columns" style="box-sizing: border-box; float: left; width: 33.3%; padding: 8px;">
<ul class="price" style="box-sizing: border-box; list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s;">
<li class="header" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; background-color: #358E39; color: white; font-size: 25px; text-shadow: 0 1px 1px rgba(0,0,0,0.4);">Product 1</li>
<li class="grey" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; background-color: #eee; font-size: 20px;">$ 9.99 / year</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">10 Videos</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">Awesome Perks</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">Monthly Emails</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">Limited Access</li>
<li class="grey" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; background-color: #eee; font-size: 20px;">
<a href="[MM_Purchase_Link productId='1']" class="button" style="box-sizing: border-box; background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px;">Sign Up</a>
</li>
</ul>
</div>
<div class="columns" style="box-sizing: border-box; float: left; width: 33.3%; padding: 8px;">
<ul class="price2" style="box-sizing: border-box; list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);">
<li class="header" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; color: white; font-size: 25px; text-shadow: 0 1px 1px rgba(0,0,0,0.4); background-color: #4CAF50;">Product 2</li>
<li class="grey" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; background-color: #eee; font-size: 20px;">$ 24.99 / year</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">25 Videos</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">Even More Perks</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">Bi-weekly Emails</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">Extended Access</li>
<li class="grey" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; background-color: #eee; font-size: 20px;">
<a href="[MM_Purchase_Link productId='2']" class="button" style="box-sizing: border-box; background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px;">Sign Up</a>
</li>
</ul>
</div>
<div class="columns" style="box-sizing: border-box; float: left; width: 33.3%; padding: 8px;">
<ul class="price" style="box-sizing: border-box; list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s;">
<li class="header" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; background-color: #358E39; color: white; font-size: 25px; text-shadow: 0 1px 1px rgba(0,0,0,0.4);">Product 3</li>
<li class="grey" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; background-color: #eee; font-size: 20px;">$ 49.99 / year</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">50 Videos</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">The Most Perks</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">Weekly Emails</li>
<li style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center;">The Most Access</li>
<li class="grey" style="box-sizing: border-box; border-bottom: 1px solid #eee; padding: 20px; text-align: center; background-color: #eee; font-size: 20px;">
<a href="[MM_Purchase_Link productId='3']" class="button" style="box-sizing: border-box; background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px;">Sign Up</a>
</li>
</ul>
</div> 