How to Design Your Membership Levels Page: Order, Hide the Display, or Skip it Mega Post

by Kimberly Coleman | Add Ons, Newsletter, Recipes

We have several tutorials for altering the membership levels page using the default [pmpro_levels] shortcode or the Advanced Levels Page Shortcode Add On. This post summarizes several methods to:

It’s a useful guide if you aren’t quite sure of a method to use and want to explore your options.

  1. Reordering the Membership Levels Display

    Navigate to the Memberships > Membership Levels page in the WordPress Admin. Here you can drag and drop the membership levels into the order you would like them to display when using the default [pmpro_levels] shortcode or the [pmpro_advanced_levels] shortcode.

    Drag and Drop Membership Level Order

    If you are using the [pmpro_advanced_levels] shortcode, you can also specify the levels="2,4,1" attribute to force the display in your preferred order. This method will simultaneously reorder the display AND filter out levels you do not want to display.

  2. Hide Free Levels from the Membership Levels Display

    Here’s a tutorial for hiding all the free levels from display. This is a useful method if you have free levels that are reserved for specific customers or promotions, etc.

    View the Tutorial

    Hiding Specific Levels (by ID) from the Membership Levels Display

    To hide levels using the [pmpro_advanced_levels] shortcode, just exclude them from thelevels="1,2,3" attribute of the shortcode. Easy!

    If you are using the default [pmpro_levels] shortcode, you have two options for hiding levels from the output:

    Option 1: Define hidden levels in a custom function.

    The code recipe below allows you to define specific level IDs that will not be shown on your membership levels page.

    This code recipe requires a PMPro Plus Account or higher.

    View Membership Options

    Option 2: Add a setting to “hide” levels from display on the Memberships > Edit Level admin.

    This code recipe adds a new level setting to hide the display. If you expect to be manipulating level display fairly often and would prefer to do so via settings in the dashboard vs. code, this is the recipe for you. After installing the customization code, just navigate to Memberships > Edit Level and set “Show level” to “Yes” or “No”.

    This code recipe requires a PMPro Plus Account or higher.

    View Membership Options

  3. Skipping the Membership Levels Page

    If you have only one public level of membership, this method will redirect members from the membership levels page directly to membership checkout for the defined PMPRO_DEFAULT_LEVEL.

    View the Tutorial

    Skipping the Membership Checkout Process

    As with the “skipping” option above, this method will allow you to use the default WordPress registration process (or another plugin or theme’s registration process) and apply a default level of membership.

    View the Tutorial

Bootstrap v3+ Support for Membership Levels Page

by Kimberly Coleman | Add Ons, Newsletter

We just released version 1.7 of the Advanced Levels Display Shortcode add on – which includes support for Bootstrap-based themes running version 3+ of the Bootstrap framework. Just set the “template” attribute of the shortcode to “bootstrap”.

View the Add On

Screenshot

pmpro-advanced-levels_bootstrap

Levels Display Options for Bootstrap v3+ Themes

  • Buttons will be formatted like the “primary” button in Bootstrap v3+ (class=”btn btn_primary”)
  • Each level in the default or Two-Column layout will be wrapped in the “pane” class
  • Two, Three and Four-Column layouts use the Bootstrap v3+ fluid responsive grid
  • The table layout inherits table, striped, bordered formatting from Bootstrap v3+ (class=”table table-striped table-bordered”)
  • Price is displayed like the “lead” class in Bootstrap v3+

See Demo

Available Attributes

[pmpro_advanced_levels levels="1,3,2" template="bootstrap" layout="3col" description="true" checkout_button="Sign Me Up!" price="full"]

This shortcode displays the Membership Levels just like the pmpro_levels shortcode, with extended options for customizing the display.

Attributes include:

  • checkout_button: The button text for the action button (default: Select).
  • description: Show the level description; accepts “true” or “false” (default: true).
  • discount_code: Optionally apply a discount code to your membership level pricing. accepts the discount code (default: none).
  • expiration: Show the level expiration; accepts “true” or “false” (default: true).
  • levels: A comma-separated list of membership level IDs to display, in the order you want to display them; can be a single level ID (default: all levels ordered by ascending ID).
  • layout: How to display the levels; accepts “div”, “table”, “2col”, “3col” or “4col” (default: div).
  • price: How to display the level cost text. accepts “full”, “short” or “hide” (default: short).
  • template: Specify an integrated theme framework to inherit formatting. accepts “bootstrap”, “genesis”, “woo themes”, “gantry”, “pagelines” or “foundation” (default: none).

What we’re working on: Revamping the Plugin-generated Pages

by Kimberly Coleman | About PMPro

Just wanted to shoot out an update on some new development we are working on for Paid Memberships Pro. If you have feedback or ideas, please post in the comments.

Table-free Membership Checkout and Billing Information Page

The default Membership Checkout and Billing Information pages (displayed when using the [pmpro_checkout] and [pmpro_billing] shortcode) currently use a table layout (this was standard for WP forms years ago). We’re recoding these templates to use a div layout. This will make the checkout page more accessible and more responsive and “device-friendly”.

We’ll provide an add on that “falls back” to the old templates should you wish to continue using the previous design.

Table-optional Membership Levels Page

The default Membership Levels page (displayed when using the [pmpro_levels] shortcode) currently displays in a table layout. We’re planning to offer both table and div style layout as an attribute of the shortcode. For more options to customize the levels display, see the Advanced Levels Page Shortcode Add On.

Drag and Drop Levels Reordering available in Version 1.8.4

by Kimberly Coleman | About PMPro

Version 1.8.4 adds the ability to drag and drop membership levels to update the display order when using the default [pmpro_levels] shortcode.

How can I reorder my membership levels?

If you’re using the default [pmpro_levels] shortcode, you can update the display from the Memberships > Membership Levels admin page.

  1. Hold down your mouse on the level you want to move.
  2. Drag the level to the desired placement in the list.
  3. That’s it – this will automatically update the levels order.
  4. Navigate to the page assigned as the “Membership Levels” page to see the updated output.

Screenshots

pmpro-membership_levels_order

Want finer control over the levels page display?

Check out this post about the Advanced Levels Page Shortcode add on.