When you’re creating a membership site or online course, many times you want to show content that they may not have access to as a way to get them to purchase that course or content.
Memberium’s page templates support showing content grayed out that a member doesn’t have access to rather than just hiding it completely. Here’s an example of what we’re talking about.
As you can see above, the first 2 courses are unlocked for this member, but the 3rd one isn’t. Instead, it is grayed out and has a lock icon.
If you want to set something like this up with buttons, images, or links, you’ll need to make sure members are taken to the right place based on their access. Let me show you how to do this on your site.
Table of Contents:
Making Conditional Buttons with a Page Builder
The first and probably easier way of accomplishing this is to make two buttons.
One button will be shown if the member has the access tag or membership for the content. That button will take the member to the content.
The other button will be shown if the member doesn’t have the access tag, and that button will take the member to a sales page or order form.
If you’re using a page builder that Memberium integrates with (Elementor, Gutenberg, Divi, Beaver Builder, Oxygen), this process is extremely easy.
Step 1: Create Two Buttons with Different Links
First, in your page builder of choice, create two buttons. One button should link to the sales page or order form. The other button should link to the actual content.
Here are my two buttons…
Step 2: Use Memberium to Protect Each Button
Now that we have our two buttons we want to make sure only one button shows up at a time.
This can be done with Memberium’s integration with the page builder. This example is done with Elementor.
By selecting the button, we can go to the Advanced tab and then select Memberium.
In the Require Tag IDs box, we can require that a member has a certain tag to see the button.
This bottom button on my page is the button that links to the real content. Only paid members should see the button.
When someone signs up for my course, they get the “Gold Course” tag. This tag will be used to protect the button here.
For our other button, the button that shows to logged out users and members who haven’t purchased this course, we will follow the same steps with one change.
Instead of selecting the same tag in the “Require Tag IDs” box, we will select the tag with the same name prefixed by “Does Not Have”
You can see an example below…
With this in place, we’re telling Memberium to show this button only to members who don’t have the gold course tag.
Making Conditional Buttons without a Page Builder
We recommend using a page builder, especially if you are new to WordPress. We recognize not everyone uses one though, so here is how you can accomplish the same thing above without a page builder.
The first thing you’ll need to know is your tag ID. In the previous example, I was using a tag called “Gold Course” and the tag ID in ActiveCampaign was 851. Finding this ID isn’t hard at all.
Finding an ActiveCampaign Tag ID
Open any page or post (even a draft) and scroll to the Memberium content protection settings box.
In the Require Tag IDs box, type in the name of your tag. You’ll see a number in parentheses next to the name.
That is the tag ID
In this example, the tag ID is 851
Creating our Buttons
If you’re not using a page builder, you’ll have to create your buttons with HTML and CSS.
In my case, I’ll be using this code for my buttons. CSS will be needed to get it to look like a button and not a regular link.
<a href="/my-course-link" class="button">Start Course</a>
<a href="/sales-page-link" class="button">Start Course</a>
Of course, you are free to use any item with a link. It could be a linked image for instance.
Adding the Conditional Element
With both buttons in place, we need to add Memberium shortcodes to conditionally show and hide the buttons.
This will be done using the [memb_has_any_tag] shortcode.
[memb_has_any_tag tag_id=851]
Shown to users with the 851 tag
[else_memb_has_any_tag]
Shown if user doesn’t have that tag
[/memb_has_any_tag]
As you can see above, all we need to do is replace the placeholder text with our actual HTML buttons.
Here’s the final product…
[memb_has_any_tag tag_id=851]
<a href="/my-course-link" class="button">Start Course</a>
[else_memb_has_any_tag]
<a href="/sales-page-link" class="button">Start Course</a>
[/memb_has_any_tag]That’s all there is to it!
Feel free to copy the code above, change the links and the tag ID as needed.
