Injected product variation fields intermingle with product fields and there's no way to change the relative weights

I came across this issue whilst trying to work out how to position the price field on a commerce product from the variation.
I went with the pseudo field route for the whole injected fields.

WIP here https://github.com/andybroomfield/commerce_injected_fields_display if its useful to anyone.

It seems that there is a solution for this in the drupal commerce2 documentation at https://docs.drupalcommerce.org/commerce2/developer-guide/products/displaying-products/product-display.

As the documentation states: "The fields from the Product variation type display are combined with those of the Product type display. At this point, you may be wondering how to control the positions of the Product variation fields, in relation to the Product fields. When a product is rendered, all the product and product variation fields are sorted based on weight. To control the field positions, you should use the Show row weights link to explicitly set the weight for each field. This link is located at the top-right of each Manage display configuration form."

https://docs.drupalcommerce.org/user/pages/03.commerce2/02.developer-gui...

I followed the directions from https://docs.drupalcommerce.org/commerce2/developer-guide/products/displ... and was unable to get the fields to render in the order that I specified using the weights across the Product and Product Variation display settings. I tried the following:

[Product Variation] Media image = 0
[Product] Body = 1
[Product] Variations/Add to Cart form = 2
[Product Variation] List Price = 3
[Product Variation] Price = 4

The actual display I'm getting:

[Product Variation] Media image
[Product Variation] List Price
[Product Variation] Price
[Product] Body
[Product] Variations/Add to Cart form

Same here, I can't move the price field using the weight selector.
What's the way forward for a site builder - use Panels? Or spend hours learning Twig?
I don't really want to do either. Bring back tpl.php... and don't even get me started on Composer :(

Can confirm this with the latest Commerce release: with some magic (manually inserting row weights) can move almost all fields except price and title of variation.

It is probably related, but the field order in form is also different, so fields really intermingle

Yes, documentatn mentions this, but you can change the row values till the world end - some do not match in the output.
For example I cannot put Sku above Price field

This gets even more fun with the Field Layout module. For a quick custom solution, we've used hook_preprocess_commerce_product() to move the PV fields into the same region as the variations field of the product.

function hook_preprocess_commerce_product(&$variables) {
  $variables['product']['_field_layout']['main']['variation__field_layout'] =  $variables['product']['variation__field_layout'];
  unset($variables['product']['variation__field_layout']);
}

You can also grab the weight from a PV field or hard code it.

function hook_preprocess_commerce_product(&$variables) {
  $variables['product']['_field_layout']['main']['variation__field_layout'] =  $variables['product']['variation__field_layout'];
  $variables['product']['_field_layout']['main']['variation__field_layout']['#weight'] = $variables['product']['_field_layout']['main']['variation__field_layout']['content']['price']['#weight'];
  unset($variables['product']['variation__field_layout']);
}

#12 works for me.

#3 is closest to solve this problem in appropriate way, since this solution would work with any extra display modules (Panels, Field Group, Display Suite, etc. ), but instead of one virtual "Injected Variation Fields" it should have each field exposed separately.

This is also similar approach as in Drupal 7 Commerce.

Oh jeez ... first time I've actually configured a "normal" product display for D8/9, previously I was just displaying individual variation entities. This is just an awful site building experience.

I agree injected pseudo-fields managed in the same place as product fields is the way to go, with one pseudo-field per injected variation field.

Please elaborate how to implement #12.

@Drupal_hippie, you put the code in a custom module (or theme). For example, if your module was called "my_module" the function would be called my_module_preprocess_commerce_product().

At a minimum you'd need a my_module.info.yml file and a my_module.module file to put the function in. Drupal.org has some docs on creating modules but it's mostly a reference rather than a guide. There are some good guides on other sites.

@imclean, now it's clear, many thanks to you and to all contributors!
I was able to implement #12 as a module.
Looks like code is quite old and throws some errors in current Drupal version, but I think it's possible to fix it. With no luck for now though.

@Drupal_hippie. I recommend the devel module and kint, installed with composer composer require kint-php/kint.

Within the hook use kint($variables) or ksm($variables) to see the value of $variables.

@imclean
Nice modules, will surely try them. Thank you, I appreciate your advise!

____________
I tried kint and found it very interesting, thanks!
Also I found symfony var dumper and can recommend it as well, at least it doesn't kill my server instantly ;)
https://drupal.stackexchange.com/questions/211928/how-can-i-make-kint-lo...

It works as designed, no need for any coding or modules.

When setting the product-type display, use "show row weights" and number accordingly. Then go to your corresponding variation display and number the variations sequentially as you would like them positioned in the product display.

For example:
Product display
image - 0
body - 1

Product variation
price - 2
stock level - 3

Product display
add to cart form - 4
categories - 5
tags - 6