Insert a “Renew Membership” button via custom shortcode to display a renewal link/button for members.

The code recipe below to creates a renewal button shortcode [pmpro_renew_button] that can be used to insert a “Renew Membership” button on your WordPress site.

This page requires a Plus Account or higher.


Already have an account?

Log In

New to this site?

Register Now

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.

Always Show the Discount Code Field

If you’re using any of the recipes to require discount codes or have a large percentage of your members using codes during registration, here’s a quick CSS snippet to always show this field at the top of your Membership Checkout page.


The CSS Code Recipe

#other_discount_code_p {display: none;}
#other_discount_code_tr {display: table-row !important;}

Copy and paste this into your active theme (or child theme’s) style.css file or a stylesheet for PMPro Customizations (our recommended method).


The Result (Screenshot)

Enqueue a Customizations Stylesheet in Your PMPro Customizations Plugin

If you would like to add unique CSS/styles to your site running Paid Memberships Pro, here’s a tutorial that extends our article on creating a plugin for PMPro Customizations.

This page requires a Plus Account or higher.


Already have an account?

Log In

New to this site?

Register Now

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 Plus Account or higher.


Already have an account?

Log In

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…

This page requires a Plus Account or higher.


Already have an account?

Log In

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 Plus Account or higher.


Already have an account?

Log In

New to this site?

Register Now