how to loop through attributes in woocommerce?

I would like to do something like this

I have a color attribute which is pa_color and I have pa_top-size and pa_bottom-size. I managed to do the color, but I don't know how to do it for the size, I did the colors like this:

<?php
                            $attributes = $product->get_attributes();
                            $attribute_keys  = array_keys( $attributes );

                            foreach ( $attributes as $attribute_name => $att ){
                            $options = $att->get_options();
                            $att_arr[] = wc_attribute_label($attribute_name);

                            
                    if($attribute_name == 'pa_color' ){
                        ?>
                    <div class="pick-color">
                        <p>Pick color</p>
                        <div class="colors">
                            <?php 
                                foreach($options as $option_id){
                                    $term = get_term( $option_id, $attribute_name);

                                    echo "<div>";
                                    echo "<div class='single-color'>";
                                    echo "<a href='javascript:void(0);' class='attribute $term->taxonomy color-$term->slug' data-id='$term->slug'></a>";
                                    echo "</div>";
                                    echo "<span class='color-name'>$term->slug</span>";
                                    echo "</div>";
                                }
                                ?>
                        </div>
                    </div>
                    <?php } ?>

I tried to do it like this for the size, but I don't get it the way I should get it, like in the picture

<?php     
                    if($attribute_name == 'pa_top-size' || $attribute_name == 'pa_bottom-size'){
                        ?>
                    <div class="pick-size">
                        <p>Izaberi veličinu:</p>
                        <div class="table">
                            <div class="table-row">
                                <div class="table-col">
                                    <p>
                                        top size:
                                    <div class="table-col">
                                        <div class="sizes">
                                            <?php 
                                            var_dump($colors);
                                                foreach($options as $option_id){
                                                    $term = get_term( $option_id, $attribute_name);
                                                    echo "<a href='javascript:void(0);' class='attribute $term->taxonomy' data-id='$term->name' class='active'>$term->name</a>";
                                                }
                                            ?>
                                        </div>
                                    </div>
                                    <?php
                                        ?>
                                    </p>
                                </div>

                            </div>
                            <div class="table-row">
                                <div class="table-col">
                                    <p>
                                        <?php if($attribute_name == 'pa_bottom-size'){
                                        ?>
                                        bottom size:
                                    <div class="table-col">
                                        <div class="sizes">
                                            <?php 
                                                foreach($options as $option_id){
                                                    $term = get_term( $option_id, $attribute_name);
                                                    echo "<a href='javascript:void(0);' class='attribute $term->taxonomy' data-id='$term->name' class='active'>$term->name</a>";
                                                }
                                            ?>
                                        </div>
                                    </div>
                                    <?php
                                        }?>
                                    </p>
                                </div>

                            </div>
                        </div>
                    </div>
                    <?php } ?>

I tried to do it like this for the size, but I don't get it the way I should get it, like in the picture