The - commerce-product.html.twig - file does not contain a complete list of the built-in/default product entity fields that the .twig file can reference when creating a twig file with explicit reference to the individual product entity fields. For example, one of the built-in, default, product entity fields is - .body - but it is not listed in the comment section of this .twig file. More importantly, none of the quite incomplete documentation at the following links provides any information about the built-in/default fields that exist for any of the various commerce entities.
https://docs.drupalcommerce.org/commerce2/developer-guide/products/theme...
https://docs.drupalcommerce.org/commerce2/user-guide/products/edit-a-pro...
(some documentation pages are even completely empty)
Furthermore, attempt to use the - product_entity - or - product_url - variables listed in the - commerce-product.html.twig - file's comment section causes complete page display failure, with an "unexpected error" error message.
Among the field variable documentation and usage information that would be helpful, is the proper syntax to use when creating explicit individual product field output, and the name of the field that will display the "add to cart" form/button, when also display specific fields. It would also be helpful to have an example of how to reference the individual fields of the variation from within the - commerce-product.html.twig - file, so that the product fields and the variation fields can be interleaved. For example, a frequent use case for this would be:
variation.image
product.body
variation.{other field}
variation.{other field}
[add-cart-form/button] (what is the field name / syntax for that?)
where in the example use case just above, there is a single product description (.body field), but the variation contains the product image(s) (and other varying fields) so that the images and other variation fields can change dynamically as the variation changes (e.g. color or whatever), but with field order output interleaved between product entity fields and variation entity fields, (without additional .css wrangling) so that it presents the needed fields in order as close to as needed before final CSS styled output.
(default - commerce-product.html.twig - file)
{#
/**
* @file
*
* Default product template.
*
* Available variables:
* - attributes: HTML attributes for the wrapper.
* - product: The rendered product fields.
* Use 'product' to print them all, or print a subset such as
* 'product.title'. Use the following code to exclude the
* printing of a given field:
* @code
* {{ product|without('title') }}
* @endcode
* - product_entity: The product entity.
* - product_url: The product URL.
*
* @ingroup themeable
*/
#}
<article{{ attributes }}>
{{- product|without('variation_attributes') -}}
</article>
-------------------------------
Also, testing out the following test/example .twig, it displays the body field as expected, and it displays the individual variation fields (but only if "rendered entity" is selected for the "Variations" field on the product type, while choosing format "add to cart form"
on the Variations field produces an 'add to cart" button, but not the variation fields)), in the order specified at the variation type "manage display" page, but the following .twig does not display the "add to cart" form/button. What field/variable is required to produce that output? There doesn't appear to be any documentation of this basic/fundamental information, not in the .twig files, and the /commerce/product/* source directory tree does not contain a readme.md file with such information/documentation either.
{#
/**
* @file
*
* basic test product template.
*
*
* @ingroup themeable
*/
#}
<article{{ attributes }}>
{{ product.body }}
{{ product.variations }}
</article>
Please provide this much needed, essential information/documentation.