Change sort order of attribute dropdowns and options in Magento 2

It is a common practice to use Magento configurable product type for the products with changeable properties. These properties are displayed through dropdowns with specific options, customers can choose from. It may happen that you need to update the sort order of attribute dropdowns in Magento 2 or change the order of values within dropdowns.

Let's take a laptop as an example. Purchasing a laptop, users can choose from different colors, capacity, and style. Suppose, you have created a product with a color dropdown displaying first, style second, and capacity the third. But you want the "style" option to be displayed first. Let's see how to change the dropdown display from the admin.

Change Magento 2 Attribute Sort Order of Dropdowns and Options Via Admin

Update the order of values within a dropdown

It is a common situation when you want to sort the options for size from the smallest to the biggest, place the options in the alphabetical order, etc.

To change order of attribute values in a dropdown via your store backend:

1. Navigate to Stores >Attributes >Product in your store admin.


2. Reach a necessary attribute in the list and open it in the edit mode.


3. Drag the attribute value to the desired position.




4. Press Save Attribute to apply the changes.

If we go to the product page, we'll see that positions of values within the dropdown has changed.

Change sort order of dropdowns

Magento 2 allows to update the position of dropdowns at a configurable product page only via configuration editing. The attributes, used for variations, should be reordered on the second step of the configuration wizard. Here are the steps to be fulfilled.

1. Navigate to Products->Catalog in Magento admin.


2. Find the product, for which you want to update dropdown positions, enable its editing and click Edit Configurations button in Product Details tab to open configuration wizard.


3. Move to Attribute Values step, consolidating attributes and their values, drag-and-drop attributes to rearrange them as you need.




4. Continue with configuration update and click Generate Products button on the last step of the wizard.


5. Press Save button on product page, clear cache in backend and check dropdown order at the frontend.

Update Dropdown Display Without Product Regeneration

If configuration update is too much work for you to be performed just to change dropdown display, you can choose another way. Store Manager for Magento allows you to manage position of Magento 2 attributes easily within one window.

1. Find desired configurable product in the catalog within Store Manager application.


2. Navigate to Associated Products tab of the lower grid.


3. Update positions for configurable attributes in Super Product Attributes Configuration section as the screenshot below shows.





4. Just change the focus and check whether updates are applied.

Change Sort Order of Magento Attribute Dropdowns Via Import

If you want to edit attributes sort order for existing configurable products, you can do it in a few clicks using the flexible import tool with Store Manager for Magento. Let's see how it works.

Here is a sample product with two options, color being the first on the list and size being the second.

Here is a file that we've prepared for import. As you can see, it has only four columns:

• Product identifier (SKU, ID)
• Column with SKUs of associated to configurable simple products (column 2 at the screenshot)
• Configurable attributes (color and size)
• Attribute position of configurable products where you indicate numbers that correspond to sort order of attributes in previous column.

If you are uploading new configurable products with associated items, you need to include more fields in your import file. Check this step-by-step tutorial on how to create Magento 2 configurable products via import.

Let’s see what we have got as a result.

As you can see, attribute dropdowns for this Magento configurable products are now displayed in correct order.

---

---

Related Articles:

COMMENTS