I'm quite new to Magento so maybe this is a stupid question.

I have some filters set up in the layer navigation, one of them is the size of the products we're selling.

I'd like to know if it's possible to reorder the options inside that size filter because now they are appearing in alphabetic order but I'd like to display them something like: XS-S-M-L-XL. Below image is a screenshot of how they are displaing right now.

Current display status

I've read a lot of questions and posts but they are only to rearrange the entire filters on the layered navigation, not the options inside them.

Hope I've been clear enough for you to understand. If any further details are needed just let me know!

Thanks in advance.

  • Please follow this magento.stackexchange.com/questions/140927/…
    – nishu
    Commented Jun 25, 2019 at 8:42
  • @nishu That is not what I asked for. The question you linked is to change the order of the entire filters, not just the options inside them. But thank you anyways!
    – GuillermoG
    Commented Jun 25, 2019 at 8:47
  • Hey can you drag and drop the options to some other place in your size attribute in admin and save the attribute, fronted layered navigation option sequence will change accordingly.
    – nishu
    Commented Jun 25, 2019 at 9:42
  • @GuillermoG have you try my answer? Commented Jun 25, 2019 at 9:52
  • @nishu That was it! The options didn't have that thing that lets you drag them but they are still draggable. Write a propper answer, if you want, and I will accept it. Thank you!
    – GuillermoG
    Commented Jun 25, 2019 at 10:56

2 Answers 2


To rearrange Size attribute options

In the admin, edit the attribute and in the options section of attribute. try to drag and drop the option to required place and save the attribute.

Clear cache and it will work on the frontend.

  • Thank you! That did the trick ;)
    – GuillermoG
    Commented Jun 25, 2019 at 11:03

To rearrange Size Attribute value in layered navigation you have to override below core file.


The renderer.phtml file is responsible for display HTML for attribute in layerd navigation.

In renderer.phtml the file you can see they apply switch case (switch ($swatchData['swatches'][$option]['type']) method to display attribute like size, color etc..

In the switch case function you need to look in to case '0': because Size attribute type is executed in case '0':

So you have to sort this code ($swatchData['swatches'][$option]['value']) using php function or any other method to display size attrinute value in XS-S-M-L-XL

To override template file see How to override phtml file in magento2

I hope it helps!

  • I'm sure it do the trick, but the answer I was looking for is Nishu's answer. Thank you anyways!!
    – GuillermoG
    Commented Jun 25, 2019 at 10:57
  • Great!! it's so easy then why should go for customization. Good answer @nishu :) Commented Jun 25, 2019 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.