Skip to content

Instantly share code, notes, and snippets.

@pbrocks
Last active April 7, 2021 03:56
Show Gist options
  • Save pbrocks/b076efdc73bba5190a11c0447343cd2c to your computer and use it in GitHub Desktop.
Save pbrocks/b076efdc73bba5190a11c0447343cd2c to your computer and use it in GitHub Desktop.
The following CSS code will alter the "Renew" link of your Paid Memberships Pro Account page and make it into a button.
/**
* The following CSS code will alter the "Renew" link of your
* Paid Memberships Pro Account page and make it into a
* button.
*
* If you do not have an expiration date set for
* your membership level and thus no "Renew" link, the first
* link will be affected by the CSS. In most cases, this
* will then be the "Change" membership link.
*
* Add this CSS to your WordPress Customizer's Additional CSS section
* (WP Dashboard > Appearance > Customizer > Additional CSS)
* Code Recipe written by Paul Barthmaier
* https://gist.github.com/pbrocks
*/
#pmpro_account-membership > table > tbody > tr >
td.pmpro_account-membership-levelname > div > a:nth-child(1) {
background: rgba( 250, 128, 114, 1 );
border: none;
border-radius: 5px;
box-shadow: 0px 1px 3px rgba( 0, 0, 0, 0.3 );
color: #FFF;
font-weight: 700;
margin-right: 1rem;
padding: .3rem 1rem;
text-decoration: none;
transition: all .4s;
}
#pmpro_account-membership > table > tbody > tr >
td.pmpro_account-membership-levelname > div > a:nth-child(1):hover {
background: rgba( 250, 128, 114, .3 );
box-shadow: 0px 1px 3px rgba( 0, 0, 0, 0.5 );
color: rgb( 250, 128, 114 );
}
@laurenhagan0306
Copy link

This recipe is included in the blog post on "Increase renewals by changing the “Renew” text link into a button on your Membership Account page." at Paid Memberships Pro here: https://www.paidmembershipspro.com/increase-renewals-by-changing-the-renew-text-link-into-a-button-on-your-membership-account-page/

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