SkyVerge WooCommerce Extensions

WooCommerce Memberships 1.5 has been recently released. This release consisted of a compatibility release that added support for WooCommerce 2.5, and also included a number of minor tweaks and bug fixes (see here for the complete Memberships changelog). Soon we will begin work on the next release to introduce new features!

Meanwhile, here’s another post about the Member Area, a feature introduced in Memberships 1.4 early last December. This component creates a new page accessible from WooCommerce “My Account” page for each customer that is a member of plan.

The Member Area lists the Membership benefits and features, such as access to restricted content, products that can now be purchased, member discounts, and membership notes. These sections can be enabled or disabled for each membership plan and each section can be tweaked through WordPress actions and filters, or by editing the Member Area template files.

Last month I wrote an extensive post on how to do some basic customization of the Member Area. In this new post I will introduce some more advanced customization possibilities.

This tutorial requires intermediate PHP / WordPress development skills.

Adding a new section in the Member Area

By default, Memberships provides currently 4 core sections: My Content, My Products, My Discounts and Membership Notes. In the Membership Plan admin page you can choose which of these sections a particular plan should feature (or choose none to deactivate the component altogether).

How about if you needed an additional section, like a welcome screen and display some static content, along with a YouTube video? We can add this section by hooking into the Member Area and with a sprinkle of code.

First, let’s add the section, giving it an id and a name, like so:

function my_custom_members_area_sections( $sections ) {
    $sections['welcome'] = __( 'Welcome', 'my-textdomain' );
    return $sections;
}
add_filter( 'wc_membership_plan_members_area_sections', 'my_custom_members_area_sections' );

If you visit your Membership Plan admin page with only this code, you will notice that now you have a new section available there. It was that easy!

WooCommerce Memberships new member area section

New Section available

Let’s now have a look what happened in the front end. To move quickly between WordPress admin and the front end as a customer sees it, you could use the User Switching plugin – it will allow you to quickly switch between users (it’s intended for use in test and staging sites).

You can have a dummy customer purchase your plan and then you can see the resulting Member Area the dummy user can then access to. You will notice that the new section is in the navigation tabs at the top of the Member Area but there’s no content for it.

WooCommerce Member Area blank section

New section added

Let’s move on the second step and add that!

Adding content in a custom Member Area section

The code you’ve just added before will be used in Memberships internal functions whenever there are sections involved. However, for the customer-facing side of things, you will need a second bit of custom code. This will be the actual template file.

Unlike the custom coding you added before, which can be placed in a child theme’s functions.php or in any custom theme file according to your project, the template file itself is sensitive about naming and placement. It needs to have a name that matches the id you used before to define the new section (the array key, more appropriately).

In our case, as in the example above, this key is 'welcome'. You will have to add a welcome.php file in your /myaccount/ folder inside the templates folder you use for your WooCommerce customizations.

WooCommerce Memberships new member area template

Memberships will only look for files that match the section ID for templates, so naming is important.

You must use Memberships v1.5.2 or newer, as this included a fix for fetching custom templates.

The contents of this file are entirely up to you. In our example, we want this to display a welcome video, so we’ll add an embed of the video in the template.

Feel free to use this as a starting point for your own template file. We recommend keeping the hooks before and after the member area in your template as we’ve done here in case other code modifies this area to preserve consistency.

If you compare this example with the bundled templates for the default sections inside the plugin folder, you will notice that there is more extended code, for example to query specific content and so on, filter the results according to Membership characteristics and so on.

Once you’ve added this template to

YourTheme/woocommerce/myaccount/{sectionID}.php

your custom member area section will now render your template:

WooCommerce Memberships Member Area new section

New Section with Content

Now you have a completely custom section to render your own member area template 🙂

More Advanced Changes to the Member Area Section

There are a few final notes that will let you take your member area customizations even further.

First, if you need to place some advanced logic in your template, you can take advantage of some variables that are passed to the template automatically:

  • $user_membership (an User Membership object, see class-wc-memberships-user-membership.php inside the /includes/ folder of the plugin as a reference)
  • $user_id (the id of the actual user currently viewing the template from his or her My Account pages)
  • $paged variable, which is a number, in case you need to process paged content (the number will match the number appended in the browser address for the requested page of a certain section)

Next, let’s put a final layer of SkyVerge® polish on this new area. Since it’s a “Welcome” area, we probably want it to show up first in the Member Area sections, and the “My Membership” table should link to this with the “View” action instead of the “My Content” section.

We can make a couple additional tweaks to do so. First, when you add your new section, you can put it at the beginning of an array of sections rather than pushing it onto the end. Create an array for $new_sections, add the Welcome section first, then loop through existing sections and add them into our new array.

WooCommerce Memberships member area re-ordered

Re-ordered Sections

Second, you can filter the “View” action URL with the wc_memberships_members_area_my-memberships_actions filter. This lets you can any of the actions in the “My Memberships” table, so we can target the view action’s URL to use the welcome section instead of the content section.

WooCommerce memberships member area link changed

Want to check out these final tweaks? Have a look at this snippet.


I hope this tutorial was useful to you as a starting point to create your custom member area sections!

Published by Fulvio Notarstefano

Fulvio is a WordPress engineer, and spends most of his time on new plugin development and updating existing plugins. You'll find him on the SkyVerge blog keeping you in the loop on what's new with our plugins, along with helping in your support threads.

17 Comments

  1. […] a dev tutorial for you: how to add a custom section to the member area in WooCommerce Memberships from […]

  2. Hi,
    Great article. Is it possible to have an individual blog feed per member, so for example a student would login and they see their own courses notes that would only be visible to them from the teacher? The notes would be in the format of blog posts.
    Thanks

    • Hello Keith

      thanks for your feedback,

      on a hunch I would say it’s definitely possible, but requires some custom coding – the members area is visible only to the logged in member. So when coding your own templates you would have the member ID and thus a WordPress user object. From there you can get other variables such as user meta and anything that is associated to that user using WordPress or WooCommerce functions. So, you can create a new tab, from the user ID get all the notes from the matching course and query content that you want to display to that user.

      As for “course notes” are you referring to Sensei?

  3. Hi
    Thanks for the reply.
    I’m trying to assign posts to specific user (not Role).
    Example: John Smith (member) logins into my site, and he can only see posts that have been assigned to him.
    For the “course notes” I mean in context of my end goal. So the posts would be added by a Teacher and the student would logged in to see the posts (course notes) from the teacher if that makes sense?

  4. Another excellent SkyVerge tutorial. 🙂

    Out of curiosity does Memberships play nicely with Admin Custom Order Fields? Would it be possible to display custom order field info in a custom member area section (i.e. welcome.php)?

    • The two plugins don’t integrate with one another specifically, but you could display custom order fields in the member area — ACOF has a function to get the order fields so long as you have the order ID: wc_admin_custom_order_fields()->get_order_fields( $order_id, false )

      given that you’re in the member area, you could query the orders for this user to get fields for the orders and display them with the order ID.

  5. Hi,
    Is it possible to get the links of the restricted page under specific plan? For e.g I created a Custom Page Template and I want to display the links of the pages that was restricted by that plan instead displaying it in default page, by the way Im also using a WooCommerce Subscriptions Plugin.

    • Hi Jay, I’d have a look at the get_restricted_content() method on the membership plan object. While this returns any content type, you could use the get_restricted() method as a model for getting content of a particular post type. This returns to you the array of post objects that are restricted, so you could limit to the posts of your particular custom post type.

  6. Thanks for this.

    How would I go about putting a “My Subscriptions” link in the horizontal navigation?

    e.g. My Content | My Subscriptions | My Products | My Discounts | Membership Notes

  7. Hi. Thank you for this amazing tutorial. Is there any way to add “My Courses” Tab to “My Account” tabs? Like WooCommerce Subscriptions.

    please help me.

  8. I’m hoping to create a custom area where a member can add and edit details about themselves. I’m creating a website for a gym offering classes and we need to have members provide contact details in the event of a medical emergency.

    I’d like for a member to be able to provide a contact name, address, email address, phone number etc.

    Do you think this is possible?

    • Hey Darren, It’s possible but would likely need something like the Gravity Forms User Registration Add-on to handle adding / updating user info. You’d also likely need customization to show these details in the account area, as they wouldn’t be present by default, so I’d recommend enlisting a developer to assist (we recommend Codeable for these sort of projects).

  9. Hi Beca

    I’m building a new site for a charity – a new parents support group – and they need to capture a lot more info on the customer when they sign up – e.g. kids names, ages activities etc.

    What would be the best way to add these multiple additional membership fields so that 1) they are required on the WooCommerce checkout page (or somewhere else that needs to be filled in before being able to checkout) and 2) the new fields appear in the membership profile page?

    At the moment I am using Gravity Forms for the registration, but it does not really flow well with WooCommerce. I’m struggling to find anything that will flow well and be compatible with WooCommerce and WC memberships.

    More than happy to do some tweaking and customization – but I need a way to integrate more registration fields.

    The process for a new member would be 1) Fill out sign up form (multiple fields), 2) add membership to cart, 3) Pay and receive Members info. 4) Sign up for additional activities (could be separate events module).

    Thanks for your suggestions in advance.
    Alex

  10. I’m using this Snippets and with the 1.9 version update I lost these navigation steps:
    Instead of going from the /my-account/ page -> Click on Memberships -> Go to /my-account/members-area/, it was working like this: From the /my-account/ page -> Click on Memberships -> Go to /my-account/my-membership/104/my-membership-details/. After rechecking every custom modification I did, I came back to this great article and noticed there was an update, “final tweaks”. I updated the code and it worked as it should again. Is there a way I can get a notice when there’s a new one? like if it was a plugin?

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.