Membership Plugin

WordPress Membership Plugin

Miscellaneous CSS Tweaks for Simple Membership Plugin

You can add the CSS tweaks to the following admin interface/area of your site:

Appearance -> Customize -> Additional CSS

Furthermore, some WordPress themes offer the functionality of incorporating personal CSS adjustments to your website. In the event that your theme supports this feature, it can be utilized to add your custom CSS tweaks.

Alternatively, you can use a plugin similar to the custom css plugin to apply these CSS tweaks to your site (to ensure that the customization is not lost when you upgrade the main plugin).

Table of Contents

Add the following CSS tweak to hide the “Forgot Password” link in the membership login form widget:

.swpm-login-widget-form #forgot_pass {
    display: none;
}

Add the following CSS tweak to hide the “Join Us” link in the membership login form widget:

.swpm-login-form-register-link {
    display: none;
}

Alternatively, you can use the following tweak also:

.swpm-login-widget-form .register_link {
    display: none;
}

Note: If you prefer to manually add users to your site and want to prevent visitors from seeing the ‘Join’ option on the front-end, the Hide Join Us Link feature is worth exploring.

Hiding the Remember Me Checkbox in the Login Form Widget

Add the following CSS tweak to hide the “Remember Me” checkbox in the membership login form widget:

.swpm-remember-me {
    display: none;
}

Hiding the Account Expiry Details in the Login Form Widget

Add the following CSS tweak to hide the Account Expiry details that is displayed in the membership login form widget (when viewed by a logged-in member):

.swpm-logged-expiry {
    display: none;
}

Add the following CSS tweak to hide the Edit Profile link in the membership login form widget:

.swpm-edit-profile-link {
    display: none;
}

Login Form Background Color Customization

You can use the following CSS code to apply a background color to the member login form. It will apply a light grey background color to the login widget.

.swpm-login-widget-form {
    background-color: #EEE;
    padding: 10px;
}

Bigger Login Form Submit Button (Customize the Login Button)

The following example CSS code tweak shows how you can apply some customization to the login button inside the login form:

.swpm-login-form-submit {
     background: grey !important;
     color: black !important;
     font-size: 18px !important;
     font-weight: bold !important;
 }

The above custom CSS tweak will apply the following changes to the login button:

  • Apply a background color of “grey”
  • Make the “Login” button black.
  • Make the font size 18px and bold.

Center Align the Member Login Widget

Use the following CSS code to center align the member login form

.swpm-login-widget-form {
    margin-right: auto;
    margin-left: auto;
    max-width: 310px;
}


Make the Registration Button’s Font Size Bigger

The following CSS tweak to make the register button’s font size 20px.

.swpm-registration-submit {
font-size: 20px !important;
}

Add Padding to the Registration Button

The following CSS tweaks will add a little bit of padding the register button.

.swpm-registration-submit {
padding: 0.5em 1em !important;
}

Hide the Membership Level Field

The membership level field is required and must be included in the registration form. However, you can hide it by enabling the following checkbox option in the Advanced Settings menu of the plugin:

Hide Membership Level Field on Registration Form

Alternatively, you can hide it using CSS, making it invisible to users while still being included in the form.

The following CSS code will hide the membership level on your registration form (Note: this tweak won’t work for the Form Builder Addon):

.swpm-registration-membership-level-row{
	display: none;
}

The form builder addon’s fields do not have a fixed ID since the fields are customization to some degree. So to hide the membership level field on a form generated using the form builder addon, you need to inspect the HTML of the registration page and find the ID of the membership level field. Then you can add a CSS tweak to hide that field.

For example: If the ID of the membership level field for your custom form is item-swpm-18, then the following CSS code will hide this field:

#item-swpm-18 {
    display: none;
}


Hiding the Company Name Field on the Edit Profile Page

Add the following CSS tweak to hide the Company Name field from the member’s edit profile page.

.swpm-profile-company-row {
    display: none;
}

Hiding the Password Fields on the Edit Profile Page

Add the following CSS tweak to hide the password and re-type password fields on the edit profile form. Can be useful if you don’t want your members to be able to change the password from the edit profile page:

.swpm-profile-password-row{
display: none;
}
.swpm-profile-password-retype-row{
display: none;
}

If using the Form Builder Addon

If you are using the form builder addon to handle the registration and profile edit forms, then add the following CSS tweak to hide the password and re-type password fields on the edit profile form. 

.swpm-fb-profile-form .swpm-item-password {
    display: none;
}

#4) Account Expired/Renewal Message Related Tweaks

Customize the font of the account expired/renewal message

The plugin shows a message like the following to members whose accounts have expired.

The following CSS tweak will make the font-size of this message bigger and apply red color to it.

.swpm-post-account-expired-msg {
    font-size: 20px !important;
    color: red !important;
}

Center Align the Payment Button

To center align the payment button on your page, you can use an HTML block to insert the payment button shortcode with custom alignment. Below is an example of the HTML code you can use to achieve this:

<div style="max-width: 300px; margin-right: auto; margin-left: auto;">
[swpm_payment_button id="4851"]
</div>

You can experiment with different width values in place of “300px” to achieve your desired result.

Additional Reading Material

Read our tutorial on using your browser’s developer tools to inspect and modify CSS.