Design a Specific Level’s Membership Checkout Page Using CSS

CSS is the easiest way to customize the appearance of your Membership Checkout page. 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 page.

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:

• Using an action hook or filter,
• Overriding the frontend.css file included in Paid Memberships Pro via your theme,
• Enqueueing a customizations stylesheet or customizations plugin to adjust the layout, or
• Making a major adjustment by loading a custom template.

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

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 or block also adds a div wrapping the checkout form. This includes a CSS selector for 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 “Web Inspector” or “Developer” tools 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.

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 have premium membership, 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.