Extending the WooCommerce account page with a list of collections

We just released a new version picu (1.5.9), which contains an improved shortcode for displaying a list of collections.

We have implemented two new attributes: The first is status, which allows you to filter collections either by sent, approved or delivered status. It is also possible combine them:

[picu_list_collections status="sent,approved"]

The second attribute is current_user, which will only display collections, that have been sent to the currently logged in user¹. This is especially useful if you have an existing client area, where you can drop in the shortcode like so:

[picu_list_collections current_user]

Please take a look at our full documentation on how to use the shortcode.

---

Client Area – Part 2

Extending the WooCommerce «My Account» page by adding an endpoint, that contains a list of your client’s collections.

In a previous blog post we talked about how to implement a very basic client area, using a custom template, where you can display links to the client’s collections.

In the following example we will harness the shortcode improvements and show you how to add a custom page to the “My Account” menu in WooCommerce.

If you are using WooCommerce to sell your photographs, you can use this example to integrate your proofing and delivery workflow right into the account page, that your clients already know and use.

While there are plugins, eg. this one, that let you edit and create new endpoints to My Account, we will take a code based approach. We recommend – instead of modifying files in your theme – to use the following snippets in a custom plugin or with the code snippets plugin.

Let’s get into it!

First, we will create a custom endpoint:

/**
 * Add custom end point
 */
add_action( 'init', function() {
    $endpoint_name = 'my-collections';
    add_rewrite_endpoint( $endpoint_name, EP_PAGES );
});

You can replace “my-collections”, with whatever you like your custom endpoint (part of the URL) to be.

Next, we add a custom item to the WooCommerce «My Account» menu:

/**
 * Add custom item to the "My Account" menu
 */
add_filter( 'woocommerce_account_menu_items', function( $items ) {

    $appear_after = 'orders';
    $endpoint_name = 'my-collections';
    $menu_item_label = 'My Collections';

    $position = array_search( $appear_after, array_keys( $items ) ) + 1;
    $items = array_slice( $items, 0, $position, true ) + array( $endpoint_name => $menu_item_label ) + array_slice( $items, $position, count( $items ) - 1, true ) ;

    return $items;
});

You can set the position at which your custom menu item should appear using the $appear_after variable. By default the following menu items exist: dashboard, orders, downloads, edit-address, edit-account and customer-logout.

Make sure to use the same value for $endpoint_name, as you have in the first snippet above.

With $menu_item_label you can define the text of the link that will appear in the menu.

Lastly, we will add the content, that will be displayed, when the client clicks on our custom menu item:

/**
 * Add the content to your custom end point
 */
add_action( 'woocommerce_account_my-collections_endpoint', function() {
     ?>
     <h3>My Collections</h3>
     <h4>Please approve the following collections:</h4>
     <?php echo do_shortcode( '[picu_list_collections current_user status="sent"]<p>No collections to approve.</p>[/picu_list_collections]' ); ?>
     <hr />
	
     <h4>You have already approved the following collections:</h4>
     <?php echo do_shortcode( '[picu_list_collections current_user status="approved"]<p>You do not have any approved collections.</p>[/picu_list_collections]' ); ?>
     <hr />

     <h4>Download your final images:</h4>
     <?php echo do_shortcode( '[picu_list_collections current_user status="delivered"]<p>Currenlty there are no downloads available.</p>[/picu_list_collections]' ); ?>
     <?php
});

Make sure to use the same endpoint name again in the action tag, eg. woocommerce_account_my-collections_endpoint.

In this example we created three sections, one for each collection status, but you are free to change it to whatever fits your needs.

Visit the following link to view the the full snippet for easy copying/pasting.

Last but not least, go to “Settings > Permalinks” in your WordPress Admin. This will flush the rewrite rules and make the new endpoint is available.

That’s it!

We hope you found this useful. If you have any questions or feature requests, please get in touch. We’d love to hear from you!