Hide a custom action button on click displaying a text in WooCommerce admin orders list

Question

I am creating woocommerce plugin to send order details via WhatsApp. Here is my plugin code

add_filter( 'manage_edit-shop_order_columns', 'dvs_whatsapp_msg_list_column' );
function dvs_whatsapp_msg_list_column( $columns ) {
    $columns['dvs_show_whatsapp'] = 'WhatsApp';
    return $columns;
}
 
add_action( 'manage_shop_order_posts_custom_column', 'dvs_whatsapp_msg_list_column_content' );
function dvs_whatsapp_msg_list_column_content( $column ) {
    global $post;
    if ( 'dvs_show_whatsapp' === $column ) {
        $order = wc_get_order( $post->ID );
        $firstname = $order->get_billing_first_name();
        $lastname = $order->get_billing_last_name();
        $phone = $order->get_billing_phone();
        $ordernum = $order->get_order_number();
        $total = $order->get_total();
        $payment = $order->get_payment_method_title();
        $country = $order->get_billing_country();
        $calling_code = WC()->countries->get_country_calling_code($country);
        $whatsappnum = $calling_code.$phone;

        $msg = 'Hello ' .$firstname. ' ' .$lastname. ', your order #' .$ordernum. ' has been received. The order amount is ' .$total. '. Your payment method is ' .$payment.  '. Please contact us if you have any question regarding your order. Thank you.';
        
echo '<a href="https://wa.me/' .$whatsappnum. '?text=' .urlencode($msg).'" target="blank" class="dvs-whatsapp-btn">Send WhatsApp</a>';
    }
}

This is output

I want when shop manager or admin click the Send Whatsapp link then it will hide the link and show Message sent so shop manager or admin can know the details of this msg is already sent.

Please help.

Answer 1

Javascript is not the way to achieve this. You will use the following instead to hide the link and display "Message sent" once an external link has been clicked:

add_filter( 'manage_edit-shop_order_columns', 'dvs_whatsapp_msg_list_column' );
function dvs_whatsapp_msg_list_column( $columns ) {
    $columns['whatsapp'] = __('WhatsApp', 'woocommerce');
    return $columns;
}

add_action( 'manage_shop_order_posts_custom_column', 'dvs_whatsapp_msg_list_column_content' );
function dvs_whatsapp_msg_list_column_content( $column ) {
    if ( 'whatsapp' === $column ) {
        global $the_order;

        if( ! $the_order->get_meta('_wapp_sent') ) {
            echo '<a href="?post_type=shop_order&send=dvs_whatsapp&order_id=' . $the_order->get_id() .' target="blank" class="dvs-whatsapp button">' . __("Send WhatsApp") . '</a>';
        }
        else {
            echo __("Message sent", "woocommerce");
        }
    }
}

add_action( 'admin_init', 'dvs_redirect_whatsapp_send' );
function dvs_redirect_whatsapp_send() {
    global $pagenow;

    # Check current admin page.
    if ( $pagenow == 'edit.php' && isset($_GET['post_type']) && $_GET['post_type'] == 'shop_order'
    && isset($_GET['send']) && $_GET['send'] == 'dvs_whatsapp' && isset($_GET['order_id']) && $_GET['order_id'] > 0 ) {
        $order = wc_get_order( $_GET['order_id'] );

        $msg = sprintf( __("Hello %s %s, your order #%s has been received. The order amount is %s. Your payment method is %s. %s", "woocommerce"),
            $order->get_billing_first_name(),
            $order->get_billing_last_name(),
            $order->get_order_number(),
            $order->get_total(),
            $order->get_payment_method_title(),
            __("Please contact us if you have any question regarding your order. Thank you.", "woocommerce")
        );

        $whatsapp_num = WC()->countries->get_country_calling_code( $order->get_billing_country() ) . $order->get_billing_phone();

        update_post_meta( $_GET['order_id'], '_wapp_sent', 'true' ); // Mark order as WhatsApp message sent

        wp_redirect( 'https://wa.me/' . $whatsappnum . '?text=' . urlencode($msg) ); // Redirect to WhatsApp sending service
        exit;
    }
}

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