Woocommerce | Order variations list by attributes order

Question

I have created a dynamic ajax add to cart button on the catalog page. I need the order of the variations to be displayed according to the main attribute orders and not as it's crated on the product page.

This is the Code I'm using:

<?php
    global $product;
    $variations = $product->get_available_variations();
    $variations_ids = wp_list_pluck( $variations, 'variation_id' );

    foreach ($variations_ids as $variations_id) {
        $variation = wc_get_product($variations_id);
        $variationName = implode(" / ", $variation->get_variation_attributes());
        $variation_obj = new WC_Product_variation($variations_id);
        $stock = $variation_obj->get_stock_quantity();
    ?>
    <?php if( $stock != 0 || ! $variation_obj->get_manage_stock() ){ ?>
        <div class="variation variation-<?php echo $variations_id; ?>" data-act="atc" data-variation-id="<?php echo $variations_id; ?>" data-variation="/?add-to-cart=<?php echo $variations_id; ?>"><?php echo $variationName; ?></div>
    <?php } else { ?>
        <div class="out-of-stock variation"><?php echo $variationName; ?></div>
    <?php } ?>

<?php } ?>