Customer Dashboards For WooCommerce
Overview
WooCommerce store owners often struggle to provide a personalized and streamlined dashboard experience for their customers after purchase. The default WooCommerce My Account page can be confusing and lacks customization options, leading to a suboptimal user experience and potentially decreased customer satisfaction.
The My Account Customizer plugin provides a library of shortcodes for re-designing any WooCommerce My Account layout and easily combining it with any other components using native WordPress editor blocks or your favorite page builder.
Features & Benefits
The WooCommerce My Account Layout Customizer plugin empowers you to create custom dashboard experiences for your customers, regardless of the products or services they sell. Whether you offer physical goods, virtual products, one-time purchases, or recurring subscriptions, this plugin allows you to tailor the My Account page to your unique business needs.
With the ability to drag and drop elements using shortcodes and Kadence Blocks, you can easily rearrange and customize the layout of the My Account page. The plugin also offers ready-to-use patterns for Gutenberg, enabling you to achieve instant satisfaction with pre-designed layouts.
2 Minute Quick Start
Start by adding the standard WooCommerce My Account Shortcode [woocommerce_my_account] to any page:
Then, add any of the Customize My Account shortcodes to your layout to relocate parts of the My Account where you prefer them to be in your layout (instead of the default layout created by the WooCommerce shortcode).
For example, one can move the entire default navigation menu to a different location.
In this example, we use the Navigation Area shortcode to relocate the entire My Account Navigation Area to a spot below the My Account Content Area:
[woocommerce_my_account]
[lf_navigation]
Another option would be to hide any element repositioned by the use of shortcodes simply by adding the hide attribute, like this:
[any_shortcode_name hide=yes]
Doing this will completely hide the elements output by that shortcode, including the rest of the default My Account shortcode elements other than those relocated by the use of other shortcodes.
For example, if we use the same default My Account Navigation Area shortcode as above, but now add the attribute of hide, we can remove it entirely from the layout:
[woocommerce_my_account]
[lf_navigation hide=yes]
As you can, this completely hides the entire My Account Navigation Area from the layout: (presumably so you would use some other navigation links to display the various content)
Shortcodes, Tabs, Links
Content
These are the primary content areas for the my-account layout
[lf_woocommerce]
WooCommerce Wrapper
[lf_content]
Main content area
[lf_navigation]
Main navigation wrapper
These inner-content areas are useful for more “granular” visibility/placement situations
[lf_address_description] Address description
[lf_address_columns]
Address columns
[lf_addresses]
Addresses section
[lf_bookings_table]
Bookings table
[lf_customer_details] Customer details
[lf_downloads_table] Downloads table
[lf_edit_account_form]
Edit account form
[lf_error]
Error messages
[lf_info]
Info messages
[lf_login_form]
Login form
[lf_memberships_table]
Memberships table
[lf_message]
Success messages
[lf_notices]
Notices and messages
[lf_order_details]
Order details
[lf_order_tracking_form]
Order tracking form
[lf_orders_table]
Orders table
[lf_payments_box]
Payment box
[lf_payments] Payment methods table
[lf_payments_button]
Add Payment Method Button
[lf_register]
Registration form
[lf_password] Reset password form
[lf_subscriptions]
Subscriptions table
[lf_wishlist_table]
Wishlist table
These are the WooCommerce navigation tabs
[lf_avatar]
Displays User avatar box (Kadence Theme)
[lf_tab_account]
Edit Account Navigation Tab
[lf_tab_addresses]
Edit Address Navigation Tab
[lf_tab_custom target="_self" label="Tab Label" url="https://some-url.com"]
Create a custom navigation tab with label and url, plus an optional parameter for target="_blank|_self|_parent|_top|framename"
[lf_tab_dashboard]
Dashboard Navigation Tab
[lf_tab_downloads]
Downloads Navigation Tab
[lf_tab_orders]
Orders Navigation Tab
[lf_tab_memberships]
Memberships Navigation Tab
[lf_payments]
Payment Methods Navigation Tab
[lf_tab_subscriptions]
Subscriptions Navigation Tab
[lf_tab_logout]
Logout Navigation Tab
These output links to the content areas
[lf_link_account]
Edit Account content link. Outputs url suffix: /edit-account
[lf_link_add_payments]
Add Payment Method content link. Outputs url suffix:
/add-payment-method
[lf_link_addresses]
Edit Address content link. Outputs url suffix: /edit-address
[lf_link_dashboard]
Dashboard content link. Outputs url suffix: /my-account
[lf_link_downloads]
Downloads content link. Outputs url suffix: /downloads
[lf_link_logout]
Customer Log Out link. Outputs url suffix: /customer-logout/?_wpnonce=xxxxxxx
[lf_link_orders]
Order content link. Outputs url suffix: /orders
[lf_link_memberships]
Order content link. Outputs url suffix: /memberships
[lf_link_payments]
Payment Methods content link. Outputs url suffix: /payment-methods
[lf_link_subscriptions]
Subscriptions content link. Outputs url suffix: /subscriptions
Hide Attributes
Add hide=yes after any shortcode tag to hide that element everywhere
example:
[lf_tab_orders hide=yes]
Add hide=url-suffix after any shortcode tag to hide that element only on pages ending with that url string
Example to hide that element on url ending with /edit-address:
[lf_tab_orders hide=edit-address]
Example to hide that element on url ending with /my-account
[lf_tab_orders hide=my-account]
CSS Classes
These modify and move existing elements
.lf-before-content
Add to any element and it will relocate before the default content on any my-account endpoint
.lf-after-content
Add to any element and it will relocate after the default content on any my-account endpoint
.lf-replace-dashboard
Add to any element and it will replace the default dashboard endpoint content
You can also hide elements on specific my-account endpoints:
.lf-hide-dashboard
Add to any element and it will hide element on dashboard endpoint page
.lf-hide-account
Add to any element and it will hide element on account endpoint page
.lf-hide-address
Add to any element and it will hide element on address endpoint page
.lf-hide-downloads
Add to any element and it will hide element on downloads endpoint page
.lf-hide-orders
Add to any element and it will hide element on orders endpoint page
.lf-hide-payments
Add to any element and it will hide element on payments endpoint page
.lf-hide-password
Add to any element and it will hide element on password endpoint page
.lf-hide-logout
Add to any element and it will hide element on logout endpoint page
You can also hide elements based on user being logged-out, which is useful for the container holding most all your customizations other than registration, log-in and password. *Be careful not to hide those from logged-out users!
.lf-hide-logged-out
Add to any element and it will hide element when user is logged-out