LearnDash / WooCommerce Advice for an Elegant Customer Login Experience

LearnDash and WooCommerce work really well together. There integration is really well done. However, the out of the box experience is a bit weak.  I updated my FREE course that shows exactly how to configure your LearnDash / WooCommerce set up. Here is an excerpt from the course showing how to improve the customer login experience so members arrive on a dashboard page which very clearly show members what to do next.

The problem we have to address is that WooCommerce takes members who have just logged in to their My Account page. It can be configured so it displays the courses they have purchased, but it's cryptic. The user experience is not a good one.

What you can do instead is the following:

1. Build a Dashboard that displays the courses the member has purchased.
2. Update the top navigation menu so logged in members see menu items they can use to quickly get to the Dashboard.
3. Update the login process so logins take members to your dashboard.

Building the Dashboard

LearnDash has an Add-on named LearnDash Course Grid. It's an enhanced version of the LearnDash course grid. You could consider using the course grid widgets provided by Elementor and Gutenburg, but I prefer using this shortcodes instead.

To activate the addon, visit LearnDash->Add-ons, install it and activate it. If the add-on does not appear on that page, you may have to download the LearnDash Course Grid Wordpress plugin.

You can get as elaborate as you like with your dashboard, but the basic dashboard we configure includes a list of the LearnDash courses the member has purchased. If you followed the previous lesson, purchasing the course enrolls the member in the course. On the dashboard we want to display a list of the courses to which the member has enrolled..

You can Google the shortcode learndash_course_grid to get all the documentation on how to use it. There are many option. Here is what we typically use with an explanation of the attributes we include here.

learndash_course_grid columns="4" enrollment_status="enrolled" skin="grid" thumbnail_size="large" card="grid-1" filter_search="false"  post_meta=""

• You can include fewer columns if you like. 4 is the maximum it will allow.
• The Enrollment_Status is important. That is going to ONLY display the ones they have purchased. If you omit that attribute, it will display all your courses.
• The skin, thumbnail_size and card attributes control the look and feel of each course in the grid. Review the documentation and experiment with these to get the look you like.
• The filter_search attribute is important once you have a good number of courses. When you have one or two courses, a filter is not necessary. That is why I set it to false.
• The post_meta attribute controls whether to display the date the course was published, name of the author and other meta information about the course. Setting it to "" keeps it from displaying.

As I mentioned earlier, you can format this page as elegantly as you like. This simple configuration is what we build for a good majority or our small customer sites.

Update Navigation Menu

You now have a Dashboard  but it does NOT appear in the top menu. And you don't want to display in the top menu unless the member is logged in. How do you control that? There are many Wordpress plugins for this. We've been using User Menus - Nav Menu Visibility for a very long time. When you activate this plugin, each menu item in the Wordpress Menu page gets an additional field called, "Who can see this link?" You can change it from the default of "Everyone" to "Logged in users."

We typically add the Dashboard as the second menu items from the left after Home.  We add the My Accounts as the right most menu item.

You might also consider adding a Logout and Login menu item. Those can be configured so they only appear for "Logged out users" and "Logged in users," respectively.

Take Members to Dashboard Upon Logging In

The final step to give your site the polished feature I'm sure you want is to land members on the dashboard page after they login.  For this, we have been using a Wordpress plugin called WP Login and Logout Redirect. After activating this plugin, you will see a new menu in the left sidebar menu "Redirect Options."

There you will be able to enter the page to redirect after login and after logout.  All you need to is add the URL of your dashboard there and it will take members to the dashboard after they login.

Note: Depending on your theme and how you have configured you login page, you may find that the redirection doesn' t work. You can try instead ot use theWordpress wp-admin login or your LearnDash login feature. Those will work perfectly and redirect members as described.

You now have a highly functioning LearnDash site making very good use of WooCommerce and delivering an elegant user experience to your members.

Hope this helps!