Swap the button on a member’s current plan for a “Current plan” label.
Where this fits
Members can now pick and switch plans. A small finishing touch is showing them which one they already have.
By the end of this lesson you can
Change the button on a member’s current plan to read Current plan
Disable that button so it can’t be clicked
Change the style of the current plan button
Heads up: This uses MemberScript 187, a script you paste site-wide or on one page. It works with your existing data-ms-price:update and data-ms-price:add buttons.
Lesson notes
How it works
How the Current Plan button works
A pricing table shows the same buttons to everyone, so a member on the Pro plan still sees a Buy Pro button. MemberScript #187 fixes that. When the page loads, it waits for Memberstack, gets the logged-in member and reads their first plan. It then finds every button with data-ms-price:update, data-ms-price:add, data-ms-plan:update or data-ms-plan:add.
If a button's value matches the member's current price ID or plan ID, the script changes its text to Current Plan, disables it and turns off pointer events so it can't be clicked. Links also get cursor: not-allowed and lower opacity. Logged-out visitors and members with no plan see the table unchanged. If a member holds several plans, only the first one is marked.
How to add it to your pricing table
You don't add any new attributes to the buttons. The script works with the Memberstack price and plan attributes your pricing table already uses from the earlier lessons. It compares each button's value with both the member's price ID and plan ID, so it works for paid buttons with prc_ IDs and free buttons with pln_ IDs.
1Copy MemberScript #187 from the Memberstack scripts page.
2Paste it site-wide or in the page settings of your pricing page.
3Check every pricing button has its price or plan attribute.
4Publish and log in as a member who has one of the plans.
How to style the current plan button
The script adds the class current-plan-button to the matched button. Create a style for that class in Webflow or your page CSS to set the background, text colour and border for the current plan state. Keep the cursor and opacity as they are, so the button still reads as disabled.
Before you move on
0 of 5
Tick these off on your own site. Done with all of them? You’re ready for the next lesson.
Up next: Next, you’ll create discounts and promo codes without leaving the Memberstack dashboard.
Common questions
Do I need new attributes for the Current Plan button?
No. MemberScript #187 reads the price and plan attributes already on your pricing buttons and matches them to the member's plan.
What does the member see on their own plan's button?
The text changes to Current Plan and the button is disabled, so they can't buy the plan they already have.
Hey, Mah at Memberstack here and welcome to Members Script 187. In this video, I’m going to show you how to change the button in a pricing table to current plan depending on a users’s current plan and also be able to disable that button for users that are already on that current plan. All right, let me show you how to set that up all inside of Webflow. In Webflow, you are going to need to add members script 187 and it should look like this. If you’re watching this on YouTube, the link to that code should be in the description
0:31
below. And if you’re watching this on the Memberstack site, and you should have already seen the code. You can either add this sitewide or on a specific page settings depending on your specific use case. You’re also going to add the style for the current plan button state. And that’s just the style for when a button is on current plan. So right now it’s bit gray and that is all defined over here. So you can change out the button color as well as the button color text and then leave cursor and opacity the way it is and then define
1:02
the border pixels as well. But if this is all good with you, then you do not have to change out the style. So on the page itself, you are just going to make sure that you have the attributes of datams price update or datams price add. And these are all members stack price um attributes. And that’s it. If you have any questions on this, feel free to reach out in the Slack 2.0 channel. Bye.
This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.