Bootstrap v3+ Support for Membership Levels Page

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).

Drag and Drop Levels Reordering available in Version 1.8.4

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.