v1.9.4 of Paid Memberships Pro introduced a table-free checkout page, improving the usability and display across device types and themes. This new layout placed the form’s input labels on their own line, above the input field.
The recipe below includes the necessary CSS to display these labels inline with the form inputs for large displays only.
The Code Recipe
You can also add this CSS directly into the ‘Additional CSS’ area of your WordPress Customizer. This is accessed via Appearance > Edit CSS in the WordPress Dashboard.
Note: Be sure to remove the <style> </style> tag when pasting this CSS into the “Additional CSS” block.
Comments (12)
This works except for the First Name and Last Name fields I have added to checkout using the “Add Name to Checkout Add On”. How would I apply the changes to those fields?
Hi @Chanel,
I have updated the code gist to include the CSS changes to the First Name & Last Name fields when using the “Add Name to Checkout Add-On”, thanks for brining that to my attention 🙂
Please see the updated coding gist from line 30 – 38.
This is awesome. Let me update one of our client’s membership site with this CSS.
Thanks Travis for sharing this.
Hi Collins,
You’re welcome 🙂
Hi
How do you style up the mailchimp opt-in button which gets added to the bottom of the form?
Hi there,
You can use some Custom CSS to style this element. Can you tell me a little about what you want this element to look like?
I’m getting an error with this piece of code when I add this either to the css customisation plugin or the Additional CSS in wordpress site.
Please advise if this is still valid css.
@media only screen and (min-width: 1200px) {
#pmpro_form h3 {
display: grid;
grid-template-columns: 2fr 1fr;
}
Hi there,
I see that you opened up a support ticket about this, one of our Support Engineers will follow up with you there.
Hi,
Sometimes when reading the comments, I would appreciate if someone confirms basic questions too. Such as if CSS is still working. I can’t follow the support question of others but still might be interested if at least nothing is wrong per se with a posted CSS code.
Especially if the snippet is small.
Let others be able to follow the answers to interesting CSS questions too. Provide a hint here too.
I know that CSS can be very ‘personal’, still I like to learn something in the comments too.
Hi @Rainer,
Good point! The code above still works, there was another issue at play with the comment above.
Hi I didnt get all the values in email for the forms, Anyone here to help me in this regard?
Hi there,
Would you kindly reach out to our support team over on our Member Support Area so that we can take a closer look into this for you? Thanks!