Advanced Custom Widget CSS
To customise the appearance of your membership widget, navigate to:
Clubs & Subscriptions > Membership Widget > Custom CSS
The Custom CSS section allows you to target specific CSS classes within the widget to change the design of its frontend display. This is particularly useful for ensuring the widget matches your website’s overall aesthetic. By default, the widget will automatically adapt to your website’s design, which includes fonts, colours and sizing.
Please Note: This is an advanced feature and may cause design issues if used incorrectly. If you’re not familiar with HTML or CSS, we recommend reaching out to our support team at [email protected] for assistance.
Finding CSS Classes to Target
To identify the correct CSS classes, we recommend using your browser’s Developer Tools (e.g. right-click the widget and choose “Inspect”).
This will let you see the HTML structure and CSS class names used in the widget.
Look for classes starting with .moi-, as these are specific to the Members One widget and safe to target.
Once You Know the CSS Classes
Once you’ve identified the class you want to customise, return to the Custom CSS section and enter your CSS code in the editor.
Make sure to:
-
Use valid CSS syntax
-
Use !important if needed to override default styles
-
Click Submit to apply your changes to the widget
Your styles will be immediately reflected in the live frontend widget after saving.
Most Common CSS Classes
| CSS Class | Use Case |
| .moi-club-card-with-img |
Expands the height of club cards that include an image. |
| .moi-club-card |
Expands the height of club cards without an image. |
| .moi-description |
Adjusts the club description text; useful for applying a line clamp when increasing the card size. |
|
.moi-custom-button |
Customises widget button styles, including colour, size, and appearance. |
|
.moi-section-header |
Adjusts the text sizing of each section’s header text. |
|
.moi-club-heading |
Modifies the heading text of each club card. |
|
.moi-frequency-title |
Styles the text for all frequency box titles. |
|
.moi-frequency-subtitle |
Styles the text for all frequency box subtitles. |
|
.moi-product-title |
Styles or adjusts the titles for all product listings. |
|
.moi-overview-subheading |
Adjusts the overview subheading, including the club name in the cart overview section. |
|
.moi-strikethrough |
Change the colour of the strikethrough for the discount amount. |
| .moi-link |
Adjust the styling on all links in the overview section. |
| .moi-club-details |
Adjust the Club Details text in the overview section. |
| .moi-discard-btn |
Style the clear button in the overview section. |
|
.moi-branding |
Remove “Powered by Members One” branding from club and checkout pages. |
