Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save travislima/99ce2779370d119f7e2b11534d75d9d4 to your computer and use it in GitHub Desktop.
Save travislima/99ce2779370d119f7e2b11534d75d9d4 to your computer and use it in GitHub Desktop.
Return the style of labels and form inputs on the Membership Checkout form to pre-1.9.4 layout using Paid Memberships Pro
<style>
@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;
}
}
</style>
@laurenhagan0306
Copy link

This profile is included in the blog post on "Styling the Checkout Page: Inline Labels and Inputs" at Paid Memberships Pro here: https://www.paidmembershipspro.com/styling-the-checkout-page-inline-labels-and-inputs/

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