fbpx
WordPress membership plugin
  1. Home
  2. Knowledge Base
  3. Display Pricing Options by Using Tables on your Sales Page

Display Pricing Options by Using Tables on your Sales Page

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="https://membermouse.com/checkout/?rid=pK2qyz" 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="https://membermouse.com/checkout/?rid=p57LaD" 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="https://membermouse.com/checkout/?rid=pGpM60" 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>
HTML

Here is what the above code looks like when used:


You can use the attached documents to see the HTML and CSS in separate files. This allows you to quickly make edits and changes as needed.

Article Attachments

Was this article helpful?
Yes No

Can’t find the answer you’re looking for?

Reach out to our Customer Success Team
Contact us!
WP membership plugin
en_US EN
en_US EN es_ES ES de_DE DE fr_FR FR pt_BR PT
Features
Company
Resources
Connect
From the Blog
10 Niche Membership Sites That Will Inspire You
The Complete Guide To Naming Your Membership Levels
So You Want to Start a Membership Business?
16 Of The Best WordPress Membership Themes in 2023

© 2024 MemberMouse, LLC   Privacy Policy   |   Refunds   |   Terms & Conditions   |   FTC Disclosure