Add an action button to Woocommerce my account orders that open in a new window

Question

I'm going to add a button from my account order to make it go to a specific url. I made a button, but I want to open it with a new window instead of going to the page. What should I do? Down below is the code I added, and I'd like to open url here with a cage:

function sv_add_my_account_order_actions( $actions, $order ) {

    $actions['name'] = array(
        'url'  => 'the_action_url',
        'name' => 'The Button Text',
    );
    return $actions;
}
add_filter( 'woocommerce_my_account_my_orders_actions', 'sv_add_my_account_order_actions', 10, 2 );

how to add target="_blank" to each additional custom button?

Answer 1

Use the following that will add to each specific action html tag the attribute target with a _blank value opening the link in a new window:

// Your additional action button
add_filter( 'woocommerce_my_account_my_orders_actions', 'add_my_account_my_orders_custom_action', 10, 2 );
function add_my_account_my_orders_custom_action( $actions, $order ) {
    $action_slug = 'specific_name';

    $actions[$action_slug] = array(
        'url'  => home_url('/the_action_url/'),
        'name' => 'The Button Text',
    );
    return $actions;
}

// Jquery script
add_action( 'woocommerce_after_account_orders', 'action_after_account_orders_js');
function action_after_account_orders_js() {
    $action_slug = 'specific_name';
    ?>
    <script>
    jQuery(function($){
        $('a.<?php echo $action_slug; ?>').each( function(){
            $(this).attr('target','_blank');
        })
    });
    </script>
    <?php
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

You will have to set the same unique and explicit $action_slug variable in both functions.

---

To target orders complete only, add if ( $order->has_status('completed') ) { in the first function only like:

add_filter( 'woocommerce_my_account_my_orders_actions', 'add_my_account_my_orders_custom_action', 10, 2 );
function add_my_account_my_orders_custom_action( $actions, $order ) {
    if ( $order->has_status( 'completed' ) ) {
        $action_slug = 'specific_name';

        $actions[$action_slug] = array(
            'url'  => home_url('/the_action_url/'),
        'name' => 'The Button Text',
        );
    }
    return $actions;
}

Answer 2

I tried another approach:

1 - the filter:

add_filter( 'woocommerce_my_account_my_orders_actions', 'add_my_account_order_actions', 10, 2 );

2 - the action:

function add_my_account_order_actions($actions, $order) {
   $actions['name'] = array(
      'url' => 'my_url',
      'name' => __('test', 'my_plugin'),
   ),
   $actions['name2'] = array(
      'url' => 'my_url2',
      'name' => __('test2', 'myplugin')
   );
  return $actions;
}

3 - add the hook

add_action('woocommerce_after_account_orders','action_after_account_orders_js');

4 - the action

function action_after_account_orders_js()
{
    $addJs = 'my_account_actions';
    wp_enqueue_script($addJs, 'path_to_js_file'. $addJs . '.js', array());
}

5 - the js file:

window.addEventListener('load', () => {
    let nameCollection = document.getElementsByClassName('name');
    let name2Collection = document.getElementsByClassName('name2');
    let nameElements = [...nameCollection];
    let name2Elements = [...name2Collection];

    nameElements.forEach(item => {
        item.setAttribute('target', '_blank');
    });

    name2Elements.forEach(item => {
        item.setAttribute('target', '_blank');
    })

}); 

Tested and works