Attribute values in variable products on shop/categories WooCommerce pages

In an online store on WooCommerce, I use code that displays certain product attributes on archive/category pages.

add_action( 'woocommerce_before_shop_loop_item_title', 'new_template_loop_product_meta', 20 );
function new_template_loop_product_meta() {
    global $product;

    $attrs_by_cats = [
        20 => [ 'pa_size' ],
    ];

    $attr_list = [
        'Size' => 'pa_size',
    ];

    if ( ! is_object( $product ) ) {
        $product = wc_get_product( get_the_id() );
    }

    $cats = $product->get_category_ids();

    if ( ! is_array( $cats ) ) {
        return;
    }

    $attrs = [];

    foreach ( $cats as $cat ) {
        if ( isset( $attrs_by_cats[ $cat ] ) ) {
            $attrs[] = $attrs_by_cats[ $cat ];
        }
    }

    $allowed_attrs = array_unique( array_merge( [], ...$attrs ) );

    echo '<div class="custom-attributes">';

    foreach ( $attr_list as $attr_title => $attr_name ) {
        if ( in_array( $attr_name, $allowed_attrs, true ) ) {
            show_attribute( $product, $attr_title, $attr_name );
        }
    }

    echo '</div>';
}
/* Show attr */
function show_attribute( $product, $attr_title, $attr_name ) {
if ( 'sku' === $attr_name ) {
    $attr = (string) esc_html( $product->get_sku() );
} else {
    $attr = $product->get_attribute( $attr_name );

    if ( ! $attr ) {
        return;
    }
    $attr = explode( ', ', $attr ); // convert the coma separated string to an array

    $attr_arr = []; // Initialize

    // Loop through the term names
    foreach ( $attr as $term_name ) {
        // Embed each term in a span tag
        $attr_arr[] = sprintf('<span class="attr-term">%s</span>', $term_name);
    }
    // Convert back the array of formatted html term names to a string
    $attr = implode(' ', $attr_arr);
}

if ( '' === $attr ) {
    return;
}

printf( '<div class="custom-attributes-text">%s: %s</div>', $attr_title, $attr);
}

With simple products this code works without problems. The problem is only with the attribute in variable products.

When creating a product I added sizes S, M, L and automatically created variations. Then for each size S, M and L I manually set the stock availability to 30.

Then, the size L is all sold out and I have 0 in stock. Except that on the product list page all sizes are shown, while S and M should be shown.

How can I fix this code so that it works with variable products?

Thanks in advance for your help!