WooCommerce wrong attribute sort order

How to Change WooCommerce Variations and Attributes Sort Order

Last updated on

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.

Let me know in the comments if this helped. Follow me on Twitter, Facebook and YouTube.

p.s. I increased my AdSense revenue by 68% using AI 🤖. Read my Ezoic review to find out how.

1 Star2 Stars3 Stars4 Stars5 Stars 5.00 (4 votes)

Leave a Reply

Your email address will not be published. Required fields are marked *

We use Markdown to style comments, like on Github and Reddit.
To do a line break, type two spaces after the sentence.
You can add inline code by wrapping it in backticks: `code here`

    To do an entire block of code  
    type four spaces before the line
    and it will appear in a block like this.
    <-- four empty spaces

10 replies

Thank you for this in-depth tutorial. I am trying to work on product variations but not getting the actual results as I have already gone through several resources and following this resource to implement the product variation process. Can you please describe me further how to do this? This is the code that I think is somehow wrong. Is there any other way to set product variations? $variation_id = woo_insert_post( $variation_post ); $variation = new WooCommerce_Product_Variation( $variation_id ); foreach ($variation_data[‘attributes’] as $attribute => $term_name )

This is not working for me, when I reload the page it reverts to the default order, but the weird thing is that in each individual attribute, the order text field has the correct number

Hi,

First, Thanks for your guide.
I have small question, what should I do to change the order of variations from a different pages?

If you have an array of variations that span on to multiple pages. How do you drag and drop from page 1 to page 2. Where do you drag the three lines to in order to take the attribute to the next page.

i.e. Size ( 0-3 … 19-20 )

When you’re on the terms page, on the top right there is SCREEN OPTIONS. There you can choose how many terms are visible on this page. Increase it to as much as you need.