How to Change WooCommerce Variations and Attributes Sort Order

Last updated on June 1st, 2019

I was recently having an issue where the Size attribute was showing in the wrong order in the dropdown box for my variable product (S, L, M instead of S, M, L).  WooCommerce allows you to control the order that your custom attributes and variations appear in the template either alphabetically, by term ID, or by a completely custom sort order.

Product Attribute/Variation Sort Order Type

To change the attribute or variation sort order type alphabetically, by term ID, or a custom sort order:

In the left-hand menu, click Products and then click Attributes.

Change WooCommerce attribute order

On the WooCommerce Attributes page, hover over the attribute you want to change (in this example Size) and click Edit.

WooCommerce custom sort order for variations and attributes

In the Edit Attribute page, open the Default sort order dropdown menu.

There are four different options here. Custom ordering, Name, Name (numeric) and Term ID. Select the order you require and click Update. (In this example we are selecting Custom ordering).

WooCommerce size or color sort order

You can now check you template to see if the ordering is correct. Make sure to clear any page caches if configured.

If you want a completely custom sort order for you attributes/variations, continue to the next step.

Custom Attribute/Variation Sort Order

If you selected Custom ordering in the previous step, you can now set the custom order of your attributes/variations.

In the left-hand menu, click Products and then click Attributes.

In the main Attributes page, hover over your attribute (in this example Size) and click Configure terms.

WooCommerce custom sort order for attributes and variations

In the product attribute page (in this example Product Size), hover over the attribute and use the three lines to drag the attribute up or down. In this example we are moving the size M (medium) above L (large).

WooCommerce variations and attributes sort order

Once you drag and drop the attribute, the setting is saved automatically, you do not need to click save or update anywhere.

Now go to the Product page on the frontend of your website and check that the new custom order is correct. Make sure to clear any page caches if configured.