Change order of configuration options in customer product view

Question

I have configurable products with many attributes like size and color in v2.2.7.
They are listed in the admin area and in Stores > Attributes > Attribute Set > Default.
The order currently is "Size", then "Color".

But on the customers view for the product, attributes are listed as "Color" and then "Size".

This post in the magento forums outlines how to do it while creating a configurable product. However, if products are already created and you go to configuration options, there is not a way to edit attributes order without also recreating all configured products.

Making the change suggested in "Stores > Attributes > Product > Storefront Properties" from this post, changes the order of how things show up in layered navigation. But it doesn't change the order of configuration options the customer sees.

I'm trying to make "Size" appear above "Color" when customer is looking at product page. How do I change the order of configuration options for products already created?

UPDATE

• The order attributes show up in customer view / layered navigation is changed from Stores > Attributes > Product > [attribute] > Storefront Properties > [Position].
• The order configuration options show up in customer view / product details page are controlled by position column in the catalog_product_super_attribute table (see accepted answer).
• The order attributes show up in admin section when adding new products is based on the order in Stores > Attributes > Attribute Set > [set] > [Groups]. Note that custom attributes added to the "Product Details" group don't always follow the order in v2.2.7. So it's best to click "Add New" under Groups and add the custom attributes you need to show up in a set order during product on-boarding to the group you created.

Answer 1

The position of the attributes of Configurable Product are stored at catalog_product_super_attribute

Use SQL to update position in PDP

192 = Id attribute Size
193 = Id Attribute Color
update catalog_product_super_attribute set position = 1 where attribute_id = 192 AND product_super_attribute_id <> 0;
update catalog_product_super_attribute set position = 2 where attribute_id = 193 AND product_super_attribute_id <> 0;

update:

Where you can find attribute id => You can look up in the table named eav_attribute

select attribute_id from eav_attribute where attribute_code = '[attribute code]';

Answer 2

• Go to Product page (Admin)
• Configurations then Edit Configurations
• Click Next to set attribute value

• Drag Color after Size

• Hit Next until Generate products

• Save your product and Reindex cache
• Check on frontend

For future products attributes sorting

• Goto Store -> Attributes -> Products
• Open your desired Attribute
• Open tab Storefront Properties
• Set Position value here
• Example: 10 for size, 20 for color