Add a custom Member Area section in WooCommerce Memberships

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).

Check our step-by-step guide on creating a membership site with WooCommerce.

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.

We previously wrote a guide on how to create a membership program using WooCommerce to reward your loyal customers.

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.

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!

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.

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.

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

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.

<?php
/**
 * WooCommerce Memberships: "Welcome" section
 * Custom template added to the "Member Area"
 */
  
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Renders the welcome section for the membership in the my account area.
 *
 * @param array $args {
 *		@type \WC_Memberships_User_Membership $user_membership user membership object
 *		@type int $user_id current user's ID
 * }
 */
?>

<h3><?php esc_html_e( sprintf( 'Welcome, %s!', wp_get_current_user()->display_name ), 'my-textdomain' ); ?></h3>

<?php do_action( 'wc_memberships_before_members_area', 'welcome' ); ?>

<div>
<iframe class="aligncenter" width="560" height="315" src="https://www.youtube.com/embed/YQHsXMglC9A" frameborder="0" allowfullscreen></iframe>
</div>

<p><?php esc_html_e( 'Congratulations, you are a member!', 'my-textdomain' ); ?></p>

<?php do_action( 'wc_memberships_after_members_area', 'welcome' );

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:

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.

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.

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!