How to enhance the appearance of your Membership Checkout page by level using CSS.

If you’re looking to customize the general appearance of your Membership Checkout, one of the easiest methods to use is styling the page via CSS. We have some tutorials on enqueueing a customizations stylesheet for general PMPro Customizations, but what if you want to modify the appearance for a specific level ID at checkout?

Continue reading to learn how to customize the appearance of a specific level’s Checkout process.

A little background on customizing Paid Memberships Pro

There are a few ways you can modify your plugin-generated pages for Paid Memberships Pro, each requiring a different level of experience with PHP, CSS, and WordPress.

Some methods we regularly recommend include:

Keep in mind that when you use a custom template, you are completely overriding the core plugin’s template files and it will be important to keep your template up to date as improvements or bug fixes are release.

This article aims to demonstrate a few CSS-only adjustments you can make to your Membership Checkout page.

Code Recipe #1: Use the included CSS selectors filtered via the WordPress body_class() hook and [pmpro_checkout] shortcode output.

By default, Paid Memberships Pro adds a class to your site’s body tag using the WordPress body_class() hook. These are loaded on the pages assigned under Memberships > Page Settings as follows:

  • Account Page body.pmpro-account {}
  • Billing Information Page body.pmpro-billing {}
  • Cancel Page body.pmpro-cancel {}
  • Checkout Page body.pmpro-checkout {}
  • Confirmation Page body.pmpro-confirmation {}
  • Invoice Page body.pmpro-invoice {}
  • Levels Page body.pmpro-levels {}

You can use these class selectors to target specific elements generated in the page or to override elements in place by your theme. For example, if you wanted to hide the page menu on the checkout page and your theme didn’t have a template available that has a hidden menu, you could add the following custom CSS:

body.pmpro-checkout .navigation { display: none; }

Note that your theme may have a different navigation area class or ID that you need to target by this code.

Targeting a Specific Level’s Checkout Form

In addition to the body_class() filter, your Membership Checkout shortcode also adds a div wrapping the checkout form that includes the level ID being purchased. You can target this form area by level using the following format:

#pmpro_level-1 .pmpro_form { }

This will add custom CSS only for a Level 1 checkout. You can even target specific sections of the checkout page using the built-in selectors in the page. Some that are commonly modified include:

/* the "Membership Level" section */
#pmpro_level-1 .pmpro_form #pmpro_pricing_fields { } 

/* the "Account Information" section */
#pmpro_level-1 .pmpro_form #pmpro_user_fields { } 

/* the "Billing Address" section */
#pmpro_level-1 .pmpro_form #pmpro_billing_address_fields { }

/* the "Payment Information" section */
#pmpro_level-1 .pmpro_form #pmpro_payment_information_fields { }

/* the "Terms of Service" section */
#pmpro_level-1 .pmpro_form #pmpro_tos_fields { }

/* the "Submit and Checkout" button section */
#pmpro_level-1 .pmpro_form .pmpro-submit { }

Use your browser’s “Inspector” feature to explore more class selectors available on the checkout page or other plugin-generated pages in Paid Memberships Pro.

Code Recipe #2: Insert Custom CSS via wp_footer

The recipe below will allow you to target specific checkout pages by level ID and insert your custom CSS.

Using this method, however, will allow you to insert some Custom CSS into the Footer section of your desired checkout page. In the particular example below, a user wanted to remove the discount code fields from their Free Membership Level Checkout Page. Feel free to alter the Membership Level ID and the Custom CSS of the code recipe below to suit your needs.

This code recipe requires a Plus Account or higher.

View Membership Options

Want to do more?

I regularly joke that with WordPress (and Paid Memberships Pro) there is “Always a hook for everything!”.

While it might not always be true, there are lots of ways to write custom functions, target elements via CSS selectors, or insert your own classes via existing filters, such as the WordPress post_class() filter and more.

We even have a recipe for adding the logged in user’s specific level ID that you can read more about here.

If you’re a Plus or Unlimited member, please get in touch with our support team for more guidance on these examples or other style-related questions.

Our plugin pages are very lightly styled so that your chosen theme’s default forms appearance can create a seamless experience for members. If you’d like to enhance the appearance of plugin-generated pages let us know and we can help provide direction to you or your theme author.

How to adjust your membership site’s default currency format.

Currency formatting varies from country to country. For example, the placement of a comma (“,”) or period (“.”) in a currency format can mean something completely different depending on what currency is being used. Our core plugin offers formatting for several built-in currencies, which you can specify on the Memberships > Payment Settings page, but what if your currency is not being properly represented?

This code recipe demonstrates how to use the pmpro_currencies filter to adjust the format to match your desired currency.

Danish Krone as Default Currency

This page requires a Plus Account or higher.

Already have an account?

Log In

New to this site?

Register Now

Notify Members of Upcoming Recurring Payment / Automatic Renewal for Membership

Our Recurring Payment Email Reminder Add On allows you to notify members that their membership renewal payment is processing soon. This recipe shows you how to use the pmpro_upcoming_recurring_payment_reminder filter to modify when that notification is sent.

View the Add On

About The Code Recipe

By default, the Recurring Payment Email Reminder Add On will send a notification 7 days prior to a member’s recurring payment date. In the example below, we are modifying that default to send the notification 14 days (or two weeks) prior to renewal. Annual plans may want to adjust this to 30 days prior (roughly 1 month) or another value that best fits the needs of your membership program.

The Code Recipe

This code recipe requires a Plus Account or higher.

View Membership Options

Choose when to display the Renew link to members who sign up for a membership level with an expiration date.

Use the following code recipe to display a “Renew” link on the Membership Account page at your desired period before a member’s expiration date.

"Renew" link on the PMPro Membership Account Page

About the Code Recipe

By default, when a member signs up for a membership level that has an expiration date, they will see a “Renew” link a certain number of days prior to their membership expiration date. When a member “Renews” their membership, the new period is automatically tacked on to the end of their existing membership level. The core plugin has built-in logic to determine when the “Renew” link appears based on the active member’s billing and expiration date settings.

If the member logs in to their membership account before this timeframe is triggered, they will instead see a “Change” link, allowing them to view current membership level offerings and change their membership level. This code recipe allows you to control exactly when the “Renew” link will appear for the member.

The Code Recipe

This code recipe requires a Plus Account or higher.

View Membership Options

More about Renewals and PMPro

If you are new to PMPro, check out some of these other articles related to member renewals:

Include the used and claimed Group Discount Codes in your Membership Orders export file

This recipe was so useful that we merged it into the Group Discount Codes Add On. When the Add On is activated, a “Group Code” column is added to the CSV export showing the Group Code that was used at checkout (if applicable). The regular Discount Code column will show the main/parent discount code.

You can grab the Group Discount Codes Add On that includes this feature here. If you are interested in how this works to possibly do something similar via custom code, we’ve kept the original code recipe here for reference.

About the Code Recipe

The Group Discount Codes Add On for Paid Memberships Pro allows you to see the number of times the ‘parent’ discount code was used on the Memberships > Discount Codes admin page. However, you might want to know which individual ‘child’ group discount codes have been used and by whom.

If you’re new to the Group Discount Codes Add On, it adds features to PMPro to better manage large numbers of unique discount codes with the same pricing. For example, it can be used to create a group of codes to print on promotional material, for use in a campaign with Groupon or for an email campaign.

You can use the following code recipe to add an extra CSV column called group_code to your Orders CSV download file. Inside of this new column, you will be able to see which individual group codes have been used and by which member. To access and download your Orders CSV file, navigate to your WordPress Dashboard > Memberships > Orders > Export to CSV.

We are currently working on better reports for Discount Codes in the core Paid Memberships Pro plugin as well as specialized reports for viewing activity on your Group Discount Codes. This code recipe will help membership sites already using the Group Discount Codes Add On to have better visibility of code uses. is already merged into the Add On, but you can view the code recipe below for reference. Let us know if you have any other ideas for this Add On or discount codes in general.

The Code Recipe

This code recipe requires a Plus Account or higher.

View Membership Options

Add a Membership Duration dropdown to Checkout and Offer a Discount for Extending Membership

Give your customers the option to select a membership duration and offer a discount for a longer term. This is a great way to collect a larger up-front payment from members and offer an incentive to pay for membership in advance.

Screenshot of the Membership Checkout page with code recipe

About the Recipe

This code will add a “Membership Duration” dropdown field to your checkout page. Once selected, the member’s expiration date and initial payment amount will be updated accordingly.

In the code recipe, there is a 20% discount when selecting a 2-year membership duration and a 25% discount for selecting a 3-year membership duration. The code recipe serves as an example for what is possible, you can alter the recipe to remove the discount or adjust the discount to suit your business.

You will need to input the Level ID that you want this code recipe to apply to. Only select membership levels that are billed on a yearly basis otherwise this will conflict with other level billing periods. Add your Membership Level ID to 'levels' => array( 8 )

This code recipe requires the Register Helper Add On to be installed and activated. If you need help altering this code to suit your needs, feel free to get in touch with one of our Support Engineers on our Member Support Forum.

The Code Recipe

This code recipe requires a Plus Account or higher.

View Membership Options

Add a customized notification banner to alert your members of upcoming expiration.

This code recipe adds a notification banner to remind members that their account will expire within 7 days—or any custom timeframe you would like. You can use the recipes with any WordPress theme, or specifically with a membership site using Memberlite.

About the Code Recipe

By default, Paid Memberships Pro will send members an expiration email notice 7 days prior to their expiration date (by the way, if you want to add more email expiration warnings, see our Extra Expiration Warning Emails Add On).

This recipe adds an expiration warning directly on your site, reminding the logged in member that they must renew to maintain access. The banner will only be shown to a member that has an active membership level with an expiration date within the next 7 days. You won’t need to rely on email delivery, receipt, or that your member will actually read the message.

If a member decides to renew their membership by clicking the “Click here to renew membership” link, they will be redirected to the membership levels page. From here they can select their desired membership level and proceed to checkout. They will no longer see the message

This code recipe requires a Plus Account or higher.

View Membership Options

Change the wording ‘Membership’ to ‘Subscription’ for Paid Memberships Pro

This is a simple code recipe that will allow you to change the wording “Membership” to “Subscription” for Paid Memberships Pro.

About the Recipe

Depending on where your target membership audience lives or the type and location of your business, the word “Subscription” might be more familiar than “Membership”. The code recipe below uses the WordPress gettext filter to translate the word “Membership” to “Subscription” throughout the Paid Memberships Pro Plugin.

If you would like to change the word “Membership” to something else, you can do so by editing the code of this recipe by replacing “Subscription” with your desired label. If you are a Paid Membership Pro Plus Member and need some help with this, please reach out to us on our Member Support Forums.

The Code Recipe

This code recipe requires a Plus Account or higher.

View Membership Options

Offer members a discounted rate for upgrading to a higher level

Encourage existing members to upgrade to a higher priced level by offering a discount that is unique to them – no discount code required.

About the Recipe

This code recipe was recently developed for one of our Plus Members.  The member was in the process of launching a new membership level and wanted to encourage their current members to make the upgrade to the new membership level by offering a unique discount that can only be seen or used by the current members of their site. The current members would not need to use a discount code to apply for the deal. All they would need to do is select the new membership level and confirm their subscription by checking out of the site.

For those who are looking to simply offer upgrading members the chance to pay the difference between their current and new level, have a look at our Proration Add-On.

Note: This code recipe will not change the amount that is seen on the Membership Level Page of your site and the discounted price will only be seen once on the checkout page. Make sure to communicate this effectively to your members to avoid confusion.

Code Recipe

This code recipe requires a Plus Account or higher.

View Membership Options

Remove homepage redirect for admins only (PMPro Member Homepages Add On)

Prevent members with the Administrator role from being redirected to a new homepage when using the Member Homepages Add On

About the Recipe

Using the Member Homepages Add On for Paid Memberships Pro allows you to completely redirect logged in members to a home page of your choice based on their membership level.

This code recipe will prevent Administrators with a membership level from being redirected to the new homepage. This can be useful at times when a website admin needs to get access to the ‘public/non-member’ homepage.

This recipe will only work if our Member Homepages Add On is installed and activated on your website.

The Code Recipe

This code recipe requires a Plus Account or higher.

View Membership Options