Return to previous page

Adding a new custom tab in the my account pages or reordering them

This topic has 2 replies, 2 voices, and was last updated 2 years, 2 months ago ago by Rose Tyler

Niddy

Participant

February 19, 2022 at 16:39

This isn’t a support query, it’s more to help others who may want to add the bundled YITH Wishlist to the customer account pages when they are logged in.

It’s not that hard and if you want to learn how to do it; as I had to do earlier, then follow these simple steps –

STEP 1 – Add & Activate Child Theme
STEP 2 – In Admin goto Appearance -> Theme File Editor -> Theme Functions (make sure you are on the child theme in top right corner)
STEP 3 – Add code to functions at the bottom on a new line –

function custom_add_wishlist_endpoint() { add_rewrite_endpoint( 'wishlist', EP_ROOT | EP_PAGES ); } add_action( 'init', 'custom_add_wishlist_endpoint' ); function custom_wishlist_query_vars( $vars ) { $vars[] = 'wishlist'; return $vars; } add_filter( 'query_vars', 'custom_wishlist_query_vars', 0 ); function custom_add_wishlist_link_my_account( $items ) { $items['wishlist'] = 'Wishlist'; return $items; } add_filter( 'woocommerce_account_menu_items', 'custom_add_wishlist_link_my_account' ); function custom_wishlist_content() { echo do_shortcode( ' [yith_wcwl_wishlist] ' ); } add_action( 'woocommerce_account_wishlist_endpoint', 'custom_wishlist_content' );

STEP 4 – Go to Admin -> Settings -> Permalinks and save – do not change anything, just save permalinks.
STEP 5 – Head to your account and you’ll now see the new wishlist tab added.

If you would like to change the order of the tabs; head back to Step 2 and under the code you just added to functions, add the following code:

function my_account_menu_order() { $menuOrder = array( 'dashboard' => __( 'Dashboard', 'woocommerce' ), 'orders' => __( 'My Orders', 'woocommerce' ), 'edit-address' => __( 'Manage Address', 'woocommerce' ), 'edit-account' => __( 'Account Details', 'woocommerce' ), 'wishlist' => __( 'My Wishlist', 'woocommerce' ), 'customer-logout' => __( 'Logout', 'woocommerce' ), ); return $menuOrder; } add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );

You can edit and rename the tabs here by updating the part before woocommerce like this:

=> __( 'My Custom Title', 'woocommerce' ),

If you have any custom links not listed above then on front-end, right click on the link and copy the element ID i.e. li[class*=dashboard]

STEP 6 – If you change the order of the My Account menu items or change them you must perform Step 4 again (refresh Permalinks).

Hope this helps – works a treat when done properly and also adds the icon automatically to the menu (if icons are used).

Please, contact administrator
for this information.

#317847 Copied Theme version: 8.1 WooCommerce version: 5.9

1 Answer

Rose Tyler

Support staff

February 20, 2022 at 10:58

Hello,

Thanks for using our theme and sharing your knowledge

Regards

#317908 Copied
Tagged: custom tab, my account, reorder, template, woocommerce, wordpress
Viewing 2 results - 1 through 2 (of 2 total)