Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Return the style of labels and form inputs on the Membership Checkout form to pre-1.9.4 layout using Paid Memberships Pro
@media only screen and (min-width: 1200px) {
#pmpro_form h3 {
display: grid;
grid-template-columns: 2fr 1fr;
.pmpro_checkout .pmpro_checkout-fields .pmpro_checkout-field {
clear: left;
.pmpro_checkout .pmpro_checkout-fields .pmpro_checkout-field label {
float: left;
margin: 0 1em 0 0;
text-align: right;
width: 200px;
.pmpro_checkout .pmpro_checkout-field.pmpro_captcha, .pmpro_checkout .pmpro_checkout-field-text p {
margin-left: 200px;
padding-left: 1em;
.pmpro_checkout .pmpro_checkout-field-text p {
margin-top: 0;
form.pmpro_form .pmpro_submit {
text-align: right;
.pmpro_btn.pmpro_btn-submit-checkout {
width: auto;
/* The CSS below, is only intended to style the "First Name & Last Name"
fields when using the Paid Memberships Pro "Add Name to Checkout Add On". Do not include unless using these fields. */
label[for="first_name"], label[for="last_name"] {
clear: left !important;
float: left !important;
margin: 0 1em 0 0 !important;
text-align: right !important;
width: 200px !important;
Copy link

laurenhagan0306 commented Apr 12, 2021

This profile is included in the blog post on "Styling the Checkout Page: Inline Labels and Inputs" at Paid Memberships Pro here:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment