Month: February 2021

Are you looking for a straight way to add a new tab in my-account page in WooCommerce that can be implemented quickly and easily by any WooCommerce user irrespective of their level of skill?

Today, I’m going to show you how to add a custom tab on the WooCommerce My Account page – feel free to leave a comment below if you found this tutorial useful

To add a new tab in the WooCommerce my-account page, it entails four steps as follows:

1. Create a filter hook to add the new tab in my-account page and the filter should gather all the data that is displayed on the menu and then push in your new data.
2. Create a second filter that adds the URL redirect of the menu you added in the first step to the page you have created just now.
3. Adding the new endpoint under the Account menu
4. Add this code to your theme’s functions.php file or you can add this code to a plugin class or function and you will successfully add the new menu on my account page in WooCommerce.

1. Add the First Filter to Add Menu to My-Account Page

// Note: Resave Permalinks or it will give 404 error
function myaccount_add_notification_endpoint() {
    add_rewrite_endpoint( 'notification', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'myaccount_add_notification_endpoint' );

This gonna create the new endpoint “notification” the new menu on my account page.

2. Add Second Filter to Add Menu to My-Account Page

function myaccount_add_notification_query_vars( $vars ) {
    $vars[] = 'notification';
    return $vars;
}
add_filter( 'query_vars', 'myaccount_add_notification_query_vars', 0 );

3. Insert the new endpoint into the My Account menu

function myaccount_add_notification_link_my_account( $items ) {
    $items['notification'] = 'Notification';
    return $items;
}
add_filter( 'woocommerce_account_menu_items', 'myaccount_add_notification_link_my_account' );

4. Add content to the new endpoint

function myaccount_add_notification_content() {
echo '<h3>Welcome to the new page</h3>;
echo do_shortcode( ' /* your-shortcode-here */ ' );
}
add_action( 'woocommerce_account_notification_endpoint', 'myaccount_add_notification_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

Wrapping Up! You can find the whole code at the end of the post 😉
Adding a new menu tab in my-account page on WooCommerce should not be a challenge anymore after reading this tutorial. I have tried to explain step-by-step and with a practical example on how to add a new tab in my-account page and add the content of your choice. I have also written other tutorials on how to show Store(Vendor) Name on Checkout page in WordPress and add a checkbox in checkout page for customer whether wants to be a member & send customer details to email.

PHP snippet: How to Add a New Tab in My Account Page

// How Use => Add the below function in your theme's functions.php file
// Output  => https://snipboard.io/dDeMmK.jpg
/**
 * @snippet       WooCommerce Add A New Tab In My Account
 * @author        Nazrul Kabir(www.nazrulkabir.com)
 * @compatible    WooCommerce 3.5.7+
 */
// ------------------
// 1. Register new endpoint to use for My Account page
// Note: Resave Permalinks or it will give 404 error
function myaccount_add_notification_endpoint() {
    add_rewrite_endpoint( 'notification', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'myaccount_add_notification_endpoint' );
// ------------------
// 2. Add new query var
function myaccount_add_notification_query_vars( $vars ) {
    $vars[] = 'notification';
    return $vars;
}
add_filter( 'query_vars', 'myaccount_add_notification_query_vars', 0 );
// ------------------
// 3. Insert the new endpoint into the My Account menu
function myaccount_add_notification_link_my_account( $items ) {
    $items['notification'] = 'Notification';
    return $items;
}
add_filter( 'woocommerce_account_menu_items', 'myaccount_add_notification_link_my_account' );
// ------------------
// 4. Add content to the new endpoint
function myaccount_add_notification_content() {    
    echo '<h3>Notification List</h3>';
    echo do_shortcode( ' /* your-shortcode-here */ ' );
}
add_action( 'woocommerce_account_notification_endpoint', 'myaccount_add_notification_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

If you’ve any confusion please let me know 🙂

So, this was the requirement from the client to show the Vendor Name on the Checkout page. Though the plugin shows the Vendor Name of each product on the right side just after the product name.
N.B: To support multi-vendor in WordPress I’m using Dokan Plugin.

Let’s copy the code from below:

add_action( 'woocommerce_before_checkout_form', 'print_vendor_name_on_checkout_page', 10 );
function print_vendor_name_on_checkout_page()
{
echo 'Shop: ';
foreach( WC()->cart->get_cart() as $cart_item_key => $cart_item ){
$authror_id = $cart_item['data']->post->post_author; // <=== The post author ID
$author = get_user_by( 'id', $authror_id );
$store_info = dokan_get_store_info( $author->ID );
$store_title= $store_info['store_name'];
}
if ( !empty( $store_title ) ) { ?>
<span class="details">
<?php echo $store_title; ?>
</span>
<?php }
} 

That’s all! We’re done!
N.B.: In my case customers are allowed to order from one shop/vendor at once. That’s why I’ve printed the shop name outside the foreach function.

So, what if in your case you allow ordering from multiple stores? Just print the store name inside the foreach!

add_action( 'woocommerce_before_checkout_form', 'print_vendor_name_on_checkout_page', 10 );
function print_vendor_name_on_checkout_page()
{
echo 'Shop: ';
foreach( WC()->cart->get_cart() as $cart_item_key => $cart_item ){
$authror_id = $cart_item['data']->post->post_author; // <=== The post author ID
$author = get_user_by( 'id', $authror_id );
$store_info = dokan_get_store_info( $author->ID );
$store_title= $store_info['store_name'];
if ( !empty( $store_title ) ) { ?>
<span class="details">
<?php echo $store_title; ?>
</span>
<?php }
}
}

Done! Pretty simple, isn’t it?