Change alphabetical sorting of attributes / variations on product page in Woocommerce shop

Question

I have a Woocommerce shop where the different attributes / variations are ordered alphabetically when you click the 'select' on a product page. I'm currently trying to figure out how I can sort them based on the ordening in the backend.

Specifically: Currently Small is placed after Large, which not feels all that intuitive.

Any help would be more than welcome. I've been googling for an hour now and can't seem to find the solution.

The HTML / PHP of my current template is as follows:

<?php
    if ( is_array( $options ) ) {

        if ( isset( $_REQUEST[ 'attribute_' . sanitize_title( $name ) ] ) ) {
            $selected_value = $_REQUEST[ 'attribute_' . sanitize_title( $name ) ];
        } elseif ( isset( $selected_attributes[ sanitize_title( $name ) ] ) ) {
            $selected_value = $selected_attributes[ sanitize_title( $name ) ];
        } else {
            $selected_value = '';
        }

        // Get terms if this is a taxonomy - ordered
        if ( taxonomy_exists( $name ) ) {

            $orderby = wc_attribute_orderby( $name );

            switch ( $orderby ) {
                case 'name' :
                    $args = array( 'orderby' => 'name', 'hide_empty' => false, 'menu_order' => false );
                break;
                case 'id' :
                    $args = array( 'orderby' => 'id', 'order' => 'ASC', 'menu_order' => false, 'hide_empty' => false );
                break;
                case 'menu_order' :
                    $args = array( 'menu_order' => 'ASC', 'hide_empty' => false );
                break;
            }

            $terms = get_terms( $name, $args );

            foreach ( $terms as $term ) {
                if ( ! in_array( $term->slug, $options ) )
                    continue;

                echo '<option value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . '>' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</option>';
            }
        } else {

            foreach ( $options as $option ) {
                echo '<option value="' . esc_attr( sanitize_title( $option ) ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $option ), false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</option>';
            }

        }
    }
?>

Answer 1

You might have figured out the solution by now as it is quite simple( although I got to know after wasting 5-6 hrs), but if you haven't, here it is.

1. From the admin panel, select Products >> Attributes.
2. There, edit the Size attribute & change the Default sort order to "Custom Ordering" & save it.
3. Go back to the Attributes page & click on "Configure items" for Size attribute. Now on the table of values, drag the items up or down in any order you want to display on the front-end.

For ex. in your case, drag Small to the top of the table & Large to the bottom, that's it. There is no save option, so don't get confused with it, wherever you drag any item on the list, it will stick and get saved.