Modifying the WooCommerce memberships member area

WooCommerce memberships

A couple of weeks ago at SkyVerge we released WooCommerce Memberships 1.4. This new update brought significant innovations in the front-facing side of the extension, with a new “Members’ Area” to display membership information to plan members. This component is based off a few template files which, like any other template in WooCommerce, are fully customizable and extensible.

To support these templates, we have also introduced some new WordPress hooks and template PHP functions, as part as of the Memberships API available to theme and plugin developers alike, to make the Member Area very flexible and adaptive to many use cases and business scenarios.

We expect to see the Members’ Area component to grow further in the future. This is an introductory tutorial to help you get started with customizing or tweaking WooCommerce Memberships Member Area.

 

For this tutorial I am going to assume that you are familiar with HTML, basic PHP, and WordPress filters and actions. Also, while you are reading this tutorial, I’d suggest you to keep the files of WooCommerce Memberships at hand, especially the template files, which are located inside the folder /templates/ of the Memberships plugin. Those concerning the Member Area which we are going to discuss here are located inside: /templates/myaccount/

Understanding Member Area Sections 

The Members’ Area is accessed and generated when a logged-in customer clicks on a Membership Plan he or she is member of, among those listed in “My Memberships” table in “My Account” page (template file: my-memberships.php). When the user follows the corresponding link on each table row, he or she is brought to the first section of the Member Area of that Membership.

So, the Members’ Area has sections:

  • each section is an “endpoint” that uses the template, similar to how the WooCommerce “Shop” page is rendered
  • each plan may have different sections depending on which you have enabled for the plan in the corresponding Membership Plan edit screen in WordPress admin
  • each section has some content in it, relative to the current Membership Plan along with few more user variables, such as the member join date (which affects things like access time for contents or products that have a delayed access since sign up)

These sections can be accessed via tabbed navigation at the top of the Member Area (template file: my-membership-tabs.php).

You can create entire new sections by custom code, but we’ll get there soon in another tutorial – let’s first see how you can edit the existing templates and start with something more simple.

Changing a Member Area Section’s heading text 

Suppose you have a Membership Plan that grant special discounts to its members. The Members Area section that shows member discounts has, by default, an heading that says “My Membership Discounts”. You don’t like this heading and would like to change it into “Exclusive Discounts” instead.

If you just want to change a heading, all you need is to add a filter in your theme’s functions.php file, custom plugin, or the Code Snippets plugin. If you look at the bundled template files, you’ll notice that each one has a filter for the heading title text. The one for discounts is called 'wc_memberships_members_area_my_membership_discounts_title'. Therefore you can use this code to change the output:

function sv_members_area_discounts_section_title( $title ) {
    return __( 'Exclusive Discounts', 'my-theme-text-domain' );
}
add_filter( 'wc_memberships_members_area_my_membership_discounts_title', 'sv_members_area_discounts_section_title' );

WooCommerce Memberships change discount heading

Renaming Member Area Sections 

By default, the Members’ Area sections have generic names: “My Content”, “My Products”, etc. However, you may want to change these based on your site’s branding or membership names, just like we did with the headings as outlined above. The titles of these sections are filterable, and we can adjust them as needed if you want the section link to be the same as your heading link:

function sv_rename_member_area_sections( $sections ) {

    $sections['my-membership-content'] = __( 'Club Articles', 'my-theme-text-domain' );
    $sections['my-membership-products'] = __( 'Club Products', 'my-theme-text-domain' );
    $sections['my-membership-discounts'] = __( 'Exclusive Discounts', 'my-theme-text-domain' );
    $sections['my-membership-notes'] = __( 'Notes from MySite', 'my-theme-text-domain' );
    
    return $sections;
}
add_filter( 'wc_membership_plan_members_area_sections', 'sv_rename_member_area_sections' );

This gives us updated section titles, which we can couple with updated heading titles as desired.

WooCommerce memberships update member area section names

Removing a member area section’s table column 

Content, Products, and Discounts sections of the Members Area contain a table that lists content or products accessible to the user. Each row in the table has different columns with useful information.

Suppose that the part of your theme where the Members Area appears isn’t particularly wide, the table columns are a bit squeezed. You decide that you don’t really need to show the ‘excerpt’ to users. There’s a filter for that!

The snippet below is meant for the Products section found in my-membership-products.php, but you can compare the other Members Area sections template files and you’ll notice they all follow the same pattern.

function sv_members_area_products_table_columns( $columns ) {
    unset( $columns['membership-product-excerpt'] );
    return $columns;
}
add_filter('wc_memberships_members_area_my_membership_products_column_names', 'sv_members_area_products_table_columns', 10, 1 );
WooCommerce Memberships my products
WooCommerce Memberships my products - no excerpt

You can compare with the other items in this array filtered by the hook apply_filters() to notice that it contains column names and their matching ids. These are looped further down in the template to populate columns. If you unset one of these as shown above, both the column header and the corresponding column cells will not be printed, completely removing this column

Adding a new members’ area section column 

That brings us to the next possibility, which is to add a column that is not in the bundled template my-membership-content.php. Suppose that for your “Content” section you want to show the author of a post listed here. One way to do this could be to copy over the template in your theme and add some markup or the post author below the title, but we typically recommend avoiding this approach as you’ll have to keep your templates updated with each plugin update.

Let’s say you want to put that information in a column instead in a more upgrade-safe way; you can insert the column into the existing array of columns for that section:

// Replaces the My Content "Type" column with an "Author" column
function sv_members_area_content_table_columns( $columns ) {
    
    // unset the "type" column, which shows post, page, etc
    unset( $columns['membership-content-type'] );
    
    $new_columns = array();
    
    foreach( $columns as $column_id => $column_name ) {
    
        $new_columns[$column_id] = $column_name;
        
        // insert our new column after the "Title" column
        if ( 'membership-content-title' === $column_id ) {
            $new_columns['membership-content-author'] = __( 'Author', 'my-theme-text-domain' );
        }
    }
    
    return $new_columns;
}
add_filter( 'wc_memberships_members_area_my_membership_content_column_names', 'sv_members_area_content_table_columns', 11 );

This code will remove the ‘Content Type’ column and replace it with a column called ‘Author’. But you need now to add some content for it.

If you look further down in the template file, you will see that each column in the $columns array you just filtered is looped in a foreach loop. For each key (the column id) the template calls a do_action() with a name matching the column id. In our case, this id will be:

'wc_memberships_members_area_my_membership_content_column_membership-content-author'
(compare with the code above).

We’ll use this action to fill the new table cell with our content for that cell (in this case, the author).

// Fills the "Author" column with the post author
function sv_members_area_content_author( $post ) {
    $author = get_user_by( 'ID', $post->post_author );
    echo $author->display_name;
}
add_action( 'wc_memberships_members_area_my_membership_content_column_membership-content-author', 'sv_members_area_content_author' );
WooCommerce Memberships My Content
WooCommerce Memberships My Content No Type

This will just print the author’s name, but you can get the idea of the customization possibilities here.

What’s next 

I hope you have found this tutorial useful and that you will be able to move through the new WooCommerce Memberships template files with more agility. In the next tutorial, I am going to show you how to add an entire new section to a plan’s Member Area.

Meanwhile, you can familiarize with the hooks introduced in this tutorial, compare them with the others found in the templates and run some experiments. You may have noticed that most of them pass more than one parameter in apply_filters() or do_action(). This means that those variables can be accessed by your callback functions (the function you attach to add_action() or add_filter() ) — this is particularly useful if you want to alter the output of that filter using information from such variables.

Read more on the WordPress Codex how to pass more than one accepted argument for filters or actions in your hooked functions.

Beka Rice is a Sr. Director of Product Management at GoDaddy where she focuses on building an amazing WooCommerce experience. She’s been working with WooCommerce since 2013 and has built dozens of plugins used by hundreds of thousands of online stores.