Once the tshirt has important content fields and the t-shirt variation
fields have differentiating fields figured out, the product page may not
look as clean the designer envisioned. It's likely that there are a
number of labels for fields (like price, product image, SKU, etc) that
you would rather not display. There are two different
locations you will need to manage in order to get the desired output on
your product page.
NOTE: It's recommended that if you are using display modes to affect the product pages, that you use the "show weights" check box. The reason for this is that when a product is rendered, all fields, from the variation to the actual product get sorted based on weight. So if you just use the drag and drop methods, you will not get the granular control you might expect.
To fully control the display of all the fields it's helpful to think of the fields as being a part of one big group.
Above, our T-shirt Product fields (body, variations) are rendered with our T-shirt Product Variation fields (Price, Image). In order to achieve this order, the field weights must be manually set to go in order, as if they were in a large group.
Product field weight can be managed here:
Product Variation field weight can be managed here:
FANCY FEATURE ALERT: You may have noticed that product variation fields can be displayed INDEPENDENTLY of the variations field. Lots of work has gone in to making sure these fields get replaced easily and consistently when a new product is selected on the add-to-cart form. This was developed specifically to allow fine-tuned control of how a store would want to present different pieces of information. Perhaps you really need the picture of the selected t-shirt to appear before the body field of the product. Just change the weight :)
To do this, just create a copy of
commerce-product.html.twig from the
product module in commerce to your theme's template directory.
Make changes in the new
commerce-product.html.twig file and it will
reflect only in the product pages.
Don't forget to rebuild cache.
Found errors? Think you can improve this documentation? edit this page