WooCommerce: Override the title set to the browsers tab in my account page

Question

I'm currently trying to change the title set in the browsers tab when visiting the My Account page in WooCommerce.

When I go for example to the Orders page the tab is still named My Account and this is not so nice. It should always has the name of the endpoint / account_menu_items . I've tried this here but this changes only the title on the menu content at the top left:

/**
 * Change title for menu items
 */
add_filter( 'the_title', 'custom_account_endpoint_titles' );
function custom_account_endpoint_titles( $title ) {
    global $wp_query;

    if ( in_the_loop() && isset( $wp_query->query_vars['orders'] ) ) {
        return 'Orders';
    }

    return $title;
}

Screenshot:

Answer 1

Try using the pre_get_document_title filter instead as this allows you to modify it before it's rendered.

Note theat the $title_pieces is actually an array that looks like

array (
  'title' => 'title example',
  'tagline' => 'just another wordpress blog'
}

So you need to do it like this

add_filter( 'pre_get_document_title', 'custom_account_endpoint_titles' );

function custom_account_endpoint_titles($title_pieces) {

    global $wp_query;

    if ( in_the_loop() && isset( $wp_query->query_vars['orders'] ) ) {

      $title_pieces['title'] = 'Orders';
      //$title_pieces['tagline'] = 'Your tag line'; Set a tag line if you want to

      return $title_pieces;
    }

    return $title_pieces;

}

Also, make sure to dump the value of $wp_query->query_vars['orders'] to ensure its the value you're actually looking for

Answer 2

I've finally found the filter and the way to change it:

/**
 * Override woocommerce account endpoint titles in the browser tab
 */
add_filter( 'wpseo_title', 'woocommerce_endpoint_titles' );
function woocommerce_endpoint_titles( $title ) {
    $sep       = ' – ';
    $sitetitle = get_bloginfo();

    if ( is_wc_endpoint_url( 'orders' ) ) {
        $title = 'Bestellungen' . $sep . $sitetitle;
    } elseif ( is_wc_endpoint_url( 'view-order' ) ) {
        $title = 'Bestellung' . $sep . $sitetitle;
    }

    return $title;
}

If you created your own endpoints in WooCommerce you can use this filter too but you need to register your custom endpoints first. You can do it this way:

/**
 * Add custom menu items to wc query vars so that we can use is_wc_endpoint_url()
 */
add_filter( 'woocommerce_get_query_vars', 'add_items_to_query_vars' );
function add_items_to_query_vars( $vars ) {

    foreach ( [ 'custom-endpoint-1', 'custom-endpoint-2' ] as $e ) {
        $vars[ $e ] = $e;
    }

    return $vars;
}

I hope this helps someone.