Sort the woocommerce products in “out of stock” at the end of the page in elementor

Question

I'm using elementor with the shortcode [products] to show woocommerce product. I want to sort “out of stock” at the end of the page, and I tried the code below from the answer at Add sorting by stock quantity in WooCommerce products sort by, which didn't work with the shortcode.

// Ordering products based on the selected values
function filter_woocommerce_get_catalog_ordering_args( $args, $orderby, $order ) {    
    switch( $orderby ) {
        case 'availability':
            $args['orderby']  = 'meta_value_num';
            $args['order']    = 'DESC';
            $args['meta_key'] = '_stock';
            break;
    }

    return $args;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'filter_woocommerce_get_catalog_ordering_args', 10, 3 );

// Orderby setting
function filter_orderby( $orderby ) {
    $orderby['availability'] = __( 'Availability', 'woocommerce' );
    return $orderby;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'filter_orderby', 10, 1 );
add_filter( 'woocommerce_catalog_orderby', 'filter_orderby', 10, 1 );

// Optional: use for debug purposes (display stock quantity) 
function action_woocommerce_after_shop_loop_item() {
    global $product;
    echo '<div style="color: red !important; font-size: 20px !important;">' . wc_get_stock_html( $product ) . '</div>';
}
add_action( 'woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 9, 0 );```