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 (4)
Chanel (Plus)
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?
Travis Lima (PMPro VIP)
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.
Collins Agbonghama
This is awesome. Let me update one of our client’s membership site with this CSS.
Thanks Travis for sharing this.
Travis Lima (PMPro VIP)
Hi Collins,
You’re welcome 🙂