SkyVerge WooCommerce Extensions

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

Default layout

WooCommerce Memberships my products - no excerpt

Excerpt Removed

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

Default Layout

WooCommerce Memberships My Content No Type

Type Replaced by Author

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.

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.

37 Comments

  1. Hi,

    I appreciate that your technical explanation gives developers lots of power and flexibility but for those of us with less time to learn the technical way of changing the templates can I suggest there is an opportunity for someone to create another paid plugin.

    Much as WooCommerce has email templates and you can edit the template files, that is just too difficult and time consuming for us. We bought a paid plugin that contains a nice editor and lets us do it all within the control panel. We then don’t have to learn any coding.

    A similar plugin would be a great addition here – the ability to customize the members area is terrific but it isn’t accessible to the majority of site owners when you have to edit template files and play around with hooks.

    Dale.

    • Hello Dale,

      thank you very much for your comment,

      Memberships is a relatively young plugin but one of our fastest growing ones – we are keeping track of our users’ feedback to help us define the direction of the extension development. The Members Area is definitely something that will grow further in the future 🙂

      sorry for the late reply and happy new year!

      Fulvio

      • Thank you, this is great.
        However, I agree. I could either
        A. sit for a couple hours and work out how to do it, test, implement and test again
        B. Pay for someone to do it for me.
        C. Pay allot less than B for a plugin that does it for me.

        Id rather C in all honesty. I haven’t got the time nor the budget to do it myself or get someone else to do it 🙂

  2. […] you use WooCommerce Memberships, you may find this tutorial on customizing the new member area helpful (requires beginner PHP […]

  3. Hi there,

    I’m new to WooCommerce and setting up my products and memberships – trying to think of everything in advance. We have two types of “membership” offerings, one is an actual annual membership offered to other organizations and this extension is great, but we also offer somewhat annual donor levels. We do offer certain products at lower prices to higher donors, so I like the idea of using this extension to manage that, however we do not want to label them as memberships.

    I’m wondering if there’s a way to change the Members Area for these “memberships” and remove or change the text “My Memberships or “My Membership _______________”

    I don’t want to remove this text from all of the memberships though. Just say 4 of them.

    • Hey Kristyn, the plugin doesn’t necessarily have options for these kind of changes, but they’re certainly possible and pretty straight-forward via custom code. All of the names / titles displayed on the frontend can be filtered, such as the notes on renaming sections above. We tend to recommend Codeable for small projects like this if you don’t already work with a developer.

  4. Hi there, good article! I’ve done a little custom templating on the My Memberships page, removing a couple of columns from the view. However, is it possible to change how that view is sorted? Ideally, we would like to be able to sort by “Accessible”, showing all items that are accessible immediately first, followed by the rest of the posts that will be viewed at a later date shown in order of soonest to latest accessible.

    How would I go about customizing the sort order?

    • Hey Matt, I’m afraid there’s not a good way to do this. Accessible date varies by member, so this data isn’t stored anywhere on the post itself. Thus when you’re querying posts to get the list of them to output, you can’t get them in “accessible” order since it depends on who the list is being shown to, and on what day they look at it.

      If you wanted to change this, you’d probably need a fair bit of custom handling in the templates to re-order posts as you’re looping through them (since only there do you know if the post is accessible to the person seeing it, along with when), which isn’t something I’ve looked into myself.

  5. This is a great and powerful plugin. I have enjoyed customizing it this week and my client is super impressed what a great job I did (Thanks to you guys!).

    I appreciate these customization’s but there is one other thing that I can seem to figure out or change. When a user cancels their membership, how come the admin does not get a notification email like we do when a new account or membership is created? is there any way to add this feature?

    • Hey Roz, it’s not available yet, but we do have admin emails on our roadmap for after our v1.7 release 🙂

      • Hi, Beka is this plugin allow registered members to see backend admin instead of front end.

        • Hey Muddasir, the plugin keeps members as the “Customer” role, so they only see the frontend of the site like other registered customers do, and cannot access the admin. cheers!

  6. Hi there,

    I’ve been looking forward to utilizing the information in this post since I got WooCommerce and I finally have my memberships and restricted content up and running, however in the My Account section, when logged in as a member, does NOT have a Members Area.

    I’m not sure what happened to it or if it was always there, as I had no reason to log in as a member to see if the content and discounts I offered were available from this location before actually implementing them.

    I know this isn’t really the best location to post such a question, but I’m not sure how to find out what happened to the link’s appearance in My Account or what might be overriding it.

    Thank you

  7. Hi there

    Thank you for this helpful article, I have a comment to add.

    I believe it is quite confusing for a customer when they enter the My Account section because the My Membership content stuff shows up right on the dashboard tab (of the redesigned tabbed My Account interface).

    I think it would make a lot more sense if the membership stuff appeared in its own tab called “Memberships” directly under Subscriptions tab on the left hand menu.

    Also – what are the actual endpoints for the My Membership stuff? I was trying to add a custom tab in My Account and keep getting 404s for the following

    /my-account/members-area
    /123456/my-membership-content/

    Thank you.
    Alex

    • Hey Alex, thanks for the feedback here! We’d originally opted against this for a couple reasons. (1) As Memberships are one of the most important components of your site, they should be immediately available for customers. (2) Since many sites may sell them via a Subscription, it may be confusing to customers to show both “Subscriptions” and “Memberships” separately, when the customer may think they’re the same thing.

      With that said, we’re definitely always gathering feedback for decisions like this, so I’ll be adding your comments here to our list for v1.8!

      As for the endpoints themselves, we try to flush permalinks during upgrade, but unfortunately this isn’t always reliable with WordPress. I’d recommend going to Settings > Permalinks and just hitting “save” to flush them manually. If that doesn’t work, we’d be happy to help out further if you can open a support thread. Thanks!

  8. A great article. As I’ve been using some of the filters to clean out unnecessary columns in the My Memberships and My Content displays, I’ve discovered that you don’t seem to have a filter for “membership-next-bill-on” so that I can unset that.

    Because of that I’m hiding it via css, but that’s not preferred.

    th.membership-next-bill-on, td.membership-membership-next-bill-on {
    display: none;
    }

    Also, I see that featured images show up for “My Products” but it doesn’t seem to be doing so with the “My Content”. Is that possible and I’m just not seeing it?

    • Hi Gray,
      (1) filtering the columns is indeed possible. The wc_memberships_my_memberships_column_names does this. However,
      (2) that column is added by our subscriptions integration class, so you could just stop it from adding the additional column:

      remove_action( 'wc_memberships_my_memberships_column_headers', array( wc_memberships()->get_integrations_instance()->get_subscriptions_instance()->get_frontend_instance(), 'output_subscription_column_headers' ) );
      remove_action( 'wc_memberships_my_memberships_columns', array( wc_memberships()->get_integrations_instance()->get_subscriptions_instance()->get_frontend_instance(), 'output_subscription_columns' ), 20 );
      

      (3) “I see that featured images show up for “My Products” but it doesn’t seem to be doing so with the “My Content”. Is that possible and I’m just not seeing it?” — It’s not something that’s a core feature / addition, but it’s certainly possible to add your own column using the methods described above to add the featured image. All of our filters for “My Content” give you access to the post object to do this.

      • This no longer seems to work in the latest version, is there some way to modify the remove action to get the Next Bill On column to go away in version 1.9.3?

      • Hi there!

        I tried to do something similar to unlink the menu “MEMBERSHIPS” in “my account” and to place the following code:

        function jmr_remove_memberships () {

        remove_action (‘woocommerce_account_menu_items’, array (wc_memberships () -> get_frontend_instance () -> get_members_area_instance (‘members_area’), ‘add_account_members_area_menu_item’), 999);

        remove_action (‘woocommerce_account_menu_item_classes’, array (wc_memberships () -> get_frontend_instance () -> get_members_area_instance (‘members_area’), ‘adjust_account_members_area_menu_item_classes’), 999);

        remove_action (‘wc_get_template’, array (wc_memberships () -> get_frontend_instance () -> get_members_area_instance (‘members_area’), ‘get_members_area_navigation_template’), 1);
        }
        add_filter (‘init’, ‘jmr_remove_memberships’);

        the front end works perfectly and also the code does what it has to do but the backend breaks with the following error:

        Fatal error: Uncaught Error: Call to a member function get_members_area_instance() on null in /Applications/MAMP/….

        I would be very grateful to receive help

        Thanks in advance (Muchas gracias!)

        • sorry that code was a test. This is correct:

          function jmr_remove_memberships() {

          remove_action( 'woocommerce_account_menu_items', array( wc_memberships()->get_frontend_instance()->get_members_area_instance(), 'add_account_members_area_menu_item' ), 999 );

          remove_action( 'woocommerce_account_menu_item_classes', array( wc_memberships()->get_frontend_instance()->get_members_area_instance(), 'adjust_account_members_area_menu_item_classes' ), 999 );

          remove_action( 'wc_get_template', array( wc_memberships()->get_frontend_instance()->get_members_area_instance(), 'get_members_area_navigation_template' ), 1 );

          }
          add_filter( ‘init’, ‘jmr_remove_memberships’ );

  9. Hi,

    If i have a parent page, with lots of childs, how can i make that in the members area to show only the parent page? So we have a course with 21 lessons. I dont want them to see in the admin area all the 21 lessons because it will confuse them so it is better to see only the index page.

    Thank you

    • Hello Cristi,

      thanks for the feedback – at the moment it is not possible to do what you describe (all pages will be shown). However, yours is indeed a good point so we have taken note and will add a feature/setting to enable listing only parent pages in the Member Area in a future update of Memberships.

      Thank you!

      Fulvio

  10. I am having trouble displaying the generated pages with urls such as:

    http://xxxxx/my-account/members-area/2125/my-membership-content/

    the content is not staying inside my template area for my 3rd party theme.
    With WOO Commerce and WOO Sensei, I was able to define wrappers.

    With WOO Memberships I am unable to find these wrappers. I have spent the morning looking through the .php files to no avail.

    What is the master template page for “my-membership-content”?

    the WOO COMMERCE page
    http://xxxxx/my-account/ looks fine, except for styling. I have no icons and I have no breadcrumbs. I suspect this is because I have the wrappers.

  11. Hi, is it possible to reverse the order of content in the table under My Content? I have 15 pages which are drip-fed every 5 days but the first few are on the second page, it would make more sense to have the earliest pages at the top. Is it also possible to hide the content completely until it is accessible?

    Thanks!

    • Hey Alan, there is a hook to do this: wc_memberships_get_restricted_posts_query_args — this would let you adjust the query to get those posts. We don’t currently have any samples on using it, I’ll add it to our queued up blog post ideas though 🙂

  12. Hello,

    We have several different membership plans. Is there a way to have the home screen upon login be directed to pages we have designed for the different member plans? I can see where to make that change globally across all memberships, but not individually.

    i.e. when Customer A, with MEMBERSHIP 1 logs in they are directed to a page (which we designed). Then if Customer B, with MEMBERSHIP 2 logs in they are directed to a different page (which we have designed).

    Thanks

    • Hey Joshua, it’s not something we have any examples handy for, but it would be possible with some custom code. The login_redirect filter would let you change where people are directed when logging in, and you have access to the user object, so you could check this user for a membership and change the redirect URL accordingly.

      This isn’t something we plan to support in Memberships itself since it supports multiple memberships per user, and therefore we wouldn’t have a way of knowing the right redirect / URL to use if a user has more that one membership.

  13. Hi,
    to Remove a Member Area Section’s table column, i need to copy the code in my function.php?
    I do ti, but doesen’t work! 🙁

  14. Hi there and thank you for this very useful article. I wonder if there’s a list/overview of the names of the table columns so that I can filter the ones I don’t need. Most of the time I can guess it, but I can’t figure it out with fort the “Discount” column in the discounts table. It’s not “discount”, it’s not “value”… What is it? Thank you in advance for help with this.

    • If you don’t need sections, you can remove them under the plan settings for Members Area 🙂 Otherwise, I’d have a look at the code where this filter is referenced, as that has keys for all of the member areas it’s adding.

      • Bi Beka, thank you for your quick answer. No I wanted to keep the section “Discounts” around. But in the table that lists the discounts is a column named “discount” (it’s visible in the first image in this article). It shows how much discount a member gets for a certain product. But I would like to hide that because it is not really necessary and we don’t have much space in our design. So there’s no list, reference or something similar where I could look that up?

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