Plugin to Convert Levels page to DIV layout (plus a fancy Three Column style code idea)

The default Paid Memberships Pro Membership Levels page is a table layout. Some membership pricing is better displayed NOT in a table – so we’ve just released an add on plugin that loads your membership levels in a DIV layout, and also includes the description text for the level (if you have entered it in the Edit Membership Level admin page) for each level.

View or Download the Add On

Default Levels page layout

Default Levels page layout

Layout using ONLY the new DIV layout add on

Layout using ONLY the new DIV layout add on

Layout using new add on + custom CSS in this post

Layout using new add on + custom CSS in this post

Continue reading for the special CSS code to achieve this look!

This page requires a PMPro Core Account or higher.

Already have an account? Login Now »

New to this site? Register Now »

Use CSS to hide an empty column on pmpro_levels page: No recurring payment

If you are using the default pmpro_levels shortcode on your Membership Levels page – depending on your pricing you may have an empty column under the “Subscription Information” or “Initial Payment” heading. CSS to the rescue! Here’s a block of code that can be used to hide the “Subscription Information” column (useful if all of your membership levels have initial payments only), as well as a little extra styling. Just place this block of code right into the Text / HTML editor of the page containing your levels shortcode (right before the shortcode) and you are good to go. Or make it your own and tweak anything in this block – colors, fonts, etc. 48ee20694305c045f50fa5106803b27e001 Note: This code won’t necessarily behave if you are using a customized version of levels.php Levels Page: Before Levels Page: After…

This page requires a PMPro Core Account or higher.

Already have an account? Login Now »

New to this site? Register Now »

pmpro_levels Page: Getting Fancy

Thanks to the design tweaks in 1.7.1, we can now have some fun creating drop-in style blocks for the pmpro_levels page.

Levels Page: Before

20130805-pmpro_levels-before

Levels Page: After

20130805-pmpro_levels

Sign up for a PMPro membership to get the code to make your levels page look like this.

This page requires a PMPro Core Account or higher.

Already have an account? Login Now »

New to this site? Register Now »