Ask SkyVerge

Here’s an Ask SkyVerge question we’ve heard from lots of Memberships users: When a member logs in, how can I redirect them to a custom member home page instead of the WooCommerce account page?


This has been a popular request for some time, but wasn’t feasible for us to address since members can belong to multiple plans. How would Memberships know which page to send a user to when they belonged to multiple plans? It’d be a configuration nightmare! 

However, once we added Gutenberg blocks that allow you to show or hide content based on member status, we realized merchants could harness the power of blocks to create a single home page that shows varied content based on the visitor’s membership plan(s). In this article, we’ll walk you through how to use member blocks to create a custom member home page.

Requirements:

Note: This process will be most effective for stores with multiple membership plans—if you only have one plan, you might opt to use a page without member blocks, restrict it to your plan, and skip to step three!

1. Design your member home page

We’ll start out with the fun part—designing your member home page! 

You can use Member Content blocks to determine what members of each plan will see when they visit the page. The complexity of this step will vary based on the number of membership plans you support. For this example, I’m working with two plans, but the concept applies to membership sites of any size.

1. On your home page, add a Member Content block. 

Adding the Member Content block on a WordPress page.
Use the Member Content block to show content to plan members.

2. The content within this block will only be visible to members of the plans listed in the Memberships plans field on the Block menu. You can select as many plans as you want or leave this field blank to show this content to all plans. I’m going to create two separate member blocks, one for each of my plans.

Selecting membership plans in the Member Content block settings.
Use the Membership plans setting to decide which members can see the block content. 

You can adjust other settings, too, to determine when this content will be visible (with the Delay access settings) or create CSS classes for the block (under the Advanced settings). We’ll touch upon the Restricted content message settings in step two

3. Add any content that you want to the block—you can even add other blocks! I’m using the member block to promote some member-only products.

Adding content to a Member Content block.
Add content, including other blocks, within the Member block. 

4. Repeat steps 1-3 for as many plan-specific blocks you’d like to create. 

Now that we’ve got our member content sorted out, it’s time to decide what happens when a non-member comes to this page.

2. Determine non-member visibility

We now need to decide what should happen when someone without access to a block comes to this page. There are a couple options for handling non-member access to this page.

First, you could restrict this page to your membership plans, so non-member access will be handled by your current Memberships restriction mode settings. Make sure that all plans grant access to this page, though, so the page is visible to all members! Members who aren’t authorized to visit this page won’t be redirected upon login.

Second, you could leave this page unrestricted and let the member blocks handle access. This is a great option if you want to tease member content to non-members to entice them to join your plans.

If you decide to go this route, you can use the Restricted content message field in the Blocks menu to decide what non-members will see in place of this block. You can make the block invisible to non-members (“No message”), use the default restriction message setup for Memberships, or create a custom message. This message will be visible instead of the block and its contents to anyone who isn’t a member of the plan(s) specified in step one—so members of other plans will see this, too.

Adding a restricted content message to the Member Content block settings.
Use the Restricted content message setting to decide what message non-members will see instead of this block. 

You can also use a Non-member block to share a special message with folks who don’t belong to one or more membership plans. This is a great way to promote the perks of a membership while also protecting your special member content. I’m going to add a non-member block at the top of my page, to let non-members know what they are missing. I’m leaving the Membership plans field blank, so this block will only appear to folks who aren’t members of any plan on my site. 

Adding the Non-member Content block on a WordPress page.
Use the Membership plans setting to decide which non-members can see the block content. 

I highly recommend viewing your page as a non-member (an Incognito window works well) and as a member of each/all your site plans to ensure this page looks just right. The free User Switching plugin is a great way to quickly step into a particular member’s shoes to see what your site looks like from their perspective. 

What’s great about these blocks is that they’re incredibly easy to use and no matter what type of member / non-member you are, the page always looks great—there are no awkward gaps or spaces!

Here’s what my page looks like as a non-member—as you can see, the non-member block is visible, as is the custom restriction message I set up for the first member block:

Viewing the member home page as a non-member.
Member home page when viewed as a non-member.

Here’s what my page looks like as a member of the Hogwarts Alumni Association plan. The non-member block is hidden, and I can now see the content in the Alumni member block:

Viewing the member home page as a member of one plan.
Member home page when viewed as a member of one plan. 

Finally, here’s what my page looks like for members of both plans. I can see all the member blocks content:

Viewing the member home page as a member of all plans.
Member home page when viewed as a member of all plans.

3. Configure member redirects

Now that we’re happy with our page and how it appears for any user, we’ll complete one more step to make this our home page for members. 

Note: This setting will only redirect members of at least one plan. If you want to redirect all users (including non-members) upon log in, check out the free Peter’s Login Redirect plugin. 
  1. Go to WooCommerce > Settings > Memberships.
  2. Find the Redirect members upon login setting and select the “Site page” option.
  3. Choose the page you created in step one from the Login redirect page menu.
  4. Click Save changes.
The Redirect members upon login and Login redirect pages settings in the site Memberships settings.
Use the Redirect members upon login setting to direct members to your custom home page. 

That’s it! You’re all setup to redirect members to your custom page upon login. We hope that creating custom home pages with Memberships blocks will make it easier to communicate with members, promote plan perks, and encourage non-members to join your plans!

Published by Lindsey Fogle

Lindsey is a product manager at SkyVerge based out of Charlottesville, Virginia. When not sneaking Harry Potter references into SkyVerge docs, you’ll find her hiking up/skiing down a mountain or perfecting her homemade pizza.

3 Comments

  1. Would love to see Elementor integration rather than Gunterberg blocks.

    It’ll benifits Elementor Users like us who uses WooCommerce Membership.

    Reply
  2. Hi! Cool to see this new feature! I would be cool to have the same on Beaver Builder!

    Is it planned?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *