How to use a Page Builder to create a custom Membership Level Pricing page.

by Travis Lima | FAQ, General, Videos

The landing page for your levels is the primary place your site will attract and sell its membership products. Our plugin includes a few options to design this page, including the default [pmpro_levels] shortcode and the enhanced options when using the Advanced Levels Page Shortcode Add On.

What if you need more control over this page and would like to design a completely custom page for your levels? In this article, I will take you through the process of building a new membership levels page using the Elementor Page Builder, an open source plugin available in the WordPress plugin repository.

Did you know…

You do not need to use the default plugin-generated Membership Level page for your membership site. In step 2 of the plugin setup process, a page named “Membership Levels” is automatically created with the shortcode [pmpro_levels]. You can customize this page depending on your preferences, skill level, and the needs of your membership site.

A few ways you can customize the levels page include:

  1. Use Custom CSS to adjust the default layout.
  2. Create your own custom Page Templates for the levels page layout.
  3. Replace the default shortcode with the options included in the Advanced Levels Page Shortcode Add On which includes column-based or comparison-type options.
  4. Use a Page Builder or your theme’s included “pricing page” layouts to craft a totally custom page.

In this article, I’m focusing on the last option above and will demo how to use the Elementor Page Builder to create a Membership Levels page.

Video Demo

1. Choose the method that works for you.

Your skillset and goals will generally determine the method that you choose to build your membership levels page.

You do not have to use a Page Builder and might find that using your theme’s included layouts or theme’s shortcodes to create your membership level page will be easier. Chances are, you already have an idea of what will work for you. I chose to use Elementor in this article because it is a popular page builder plugin that many of our support customers are using.

Screenshot of the Elementor Plugin Homepage

2. Develop your membership levels page.

Now that you have chosen the tools needed to create your levels page, it is time to start building.

These steps assume you are working on an existing membership site and want to create the new design without affecting the current site’s levels page. If you are setting up a brand new membership site, you can directly edit the generated page for your Membership Levels. Just remove the [pmpro_levels] shortcode from that page and begin your work.
  1. Navigate to your Dashboard > Pages > Add New.
  2. Enter a title for your new membership levels page (mine is “My Level Page”).
  3. Start creating the layout exactly as you need it. Feel free to get creative here. Enhance the page with images, comparison tables, testimonials and more. This is the primary page your potential customers will visit to explore your product and, hopefully, convert to members. It’s important to make the page as compelling, clear and attractive as possible.

Screenshot of admin developing a membership level page using a page builder.

Pro Tip: Keep this page as concise, clear and simple as possible. It can be tempting to add a whole lot of detail to this page, but remember that confusion often leads to “cart abandonment”.

3. Link “buttons” to the level-specific membership checkout page.

As you can see from my screenshots, I created a membership level page that gives a little more information on the two membership levels that I want my users to sign up to. One level is free; the other is a premium membership.

I will now need to link up my membership checkout page to each of my “Sign Up” and “Buy Now” buttons in the layout.

In most cases, the URL for membership checkout will be something like this:
https://SITEDOMAIN.com/membership-account/membership-checkout/?level=1

This URL is primarily the same for each level checkout page—you just need to update the last attribute of the URL with the appropriate level’s ID.

  1. Navigate to the default Membership Levels Page and click the button to membership level that you want to link.

    Screenshot of default Paid Memberships Pro levels page

  2. Copy the URL of the checkout page. Notice that each URL will include the membership level’s ID. In my case, I am linking my “Gold” Membership Level (which has a level ID of “18”). You should see something similar to /membership-account/membership-checkout/?level=18

    Screenshot of admin copying the URL of a Paid Memberships Pro Checkout page

    Pro Tip: You can automatically include a discount code in the URL by adding the attribute &discount_code=CODENAME at the end of the button’s link to checkout.
  3. Add the copied URL to the appropriate button/link that you created on your custom membership levels page. Repeat steps 1-3 for each Membership Level you have added to your custom page.

    Screenshot of Admin pasting in a link to redirect users to the checkout page

4. Last Step: Set your newly created Membership Level page as the default.

This last step will ensure that every generated link to your membership levels page will direct users to your new/custom page instead of the plugin-generated page. If you have inserted a link to the membership levels page within your post content, you will need to manually update those links to this new page.

  1. Navigate to your WP Dashboard > Memberships > Page Settings > Level Page > Select your new membership level page.

    Admin seeting Paid Memberships Pro Default Levels Page

Pro Tip: As a clean up step, you will also want to delete the old (plugin-generated) membership levels page and redirect that deleted page’s slug to this new page. You can alternately update your new page’s slug to match that of your previous page.

That’s it – and that’s alot.

If you have any questions about using this process to create the membership levels page of your dreams, please share a comment below.

How to Set Up Your Membership Level Pricing

by Travis Lima | FAQ, General, Newsletter, Videos

This guide covers some of the most common pricing models for membership sites and how to configure level pricing for your site. It’s a useful guide if you’re just getting started with Paid Memberships Pro and would like to learn the different ways you can potentially charge members.

How to set up your Membership Level Pricing

Paid Memberships Pro enables you to charge your members in a variety of ways, including:

  1. Set up a one-time/one-time “lifetime” payment for membership.
  2. Bill members on a recurring monthly subscription.
  3. Charge members on a yearly basis.
  4. Set up a trial for your members before having them commit to a full membership.

You can offer all of these pricing models and more using Paid Memberships Pro. Below are a few of the most common pricing options we have seen.

Once Paid Memberships Pro is installed on your site, the following settings can be configured in your WordPress Dashboard under Memberships > Membership Levels > Add New Level:

Video Demo

Setting up a once-off payment.

Here are the steps to create a one-time payment that will charge members when they signup for a membership. The membership can last indefinitely or for a specific amount of time.

  1. Set the amount you want to charge immediately at checkout in the “Initial Payment” field.
  2. If necessary, add a Membership Expiration to this level by clicking on the Membership Expiration checkbox (more on this later). If left blank, members will be able to access members-only content indefinitely.
  3. Save your Settings
Default: Change link appears (before CSS)
Pro Tip: Sell access to individual pages or posts, or sell a la carte items for a flat fee by using our AddOn Packages Plugin.

Setting up a monthly payment.

To charge monthly for your site’s membership, do the following:

  1. Set your initial payment to the amount you want to collect immediately when a member completes a checkout on your site. This can be the same amount you plan to charge on a recurring basis or it can be a higher or lower amount.
  2. Select the “Recurring Subscription” checkbox to open up more billing options.
  3. Set the Billing Amount and the Billing Frequency. If you want to bill clients monthly be sure to set your frequency to “1” per “Month(s)”
  4. Save your Settings.
Default: Change link appears (before CSS)

Setting up annual payments.

To set up a yearly pricing model for your membership level, do the following:

  1. Set the amount you want to charge immediately at checkout in the “Initial Payment” field. Again, you can set this first payment to be a higher or lower price than you plan to charge for subsequent years.
  2. Select the “Recurring Subscription” checkbox to open up more billing options.
  3. Set the Billing Amount and frequency. If you want to bill clients yearly be sure to set your frequency to “1” per “Year(s)”
  4. Save your Settings.
Default: Change link appears (before CSS)

Setting up a membership level with an expiration date.

In some cases, you may want to add an expiration date to your Membership Level, if you would like to add an expiration date to your level, do the following:

  1. Navigate to Memberships > Memberships Level in the WordPress Dashboard
  2. Select a Membership Level to edit.
  3. In the Membership Level Settings, check the “Membership Expiration” checkbox to open up the Membership Expiration options.
  4. Set the duration of the membership access. For example, “3 Month(s)”
Default: Change link appears (before CSS)

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

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.