How can I make a template for a product type in Commerce? I want to be able to write my own markup for the fields (see image below) of each product type – how do I do this? My main reason for this is that I want to group them with my own HTML rather than the default provided.

I've tried using &lt;?php print render($content['field_available_colors']); ?&gt; and &lt;?php print render($content['product:field_available_colors']); ?&gt; in the regular node--[content_type].tpl.php and that didn't work.

I've also tried making a template specific for the product type, but nothing happens. I've been looking at the latest post in this thread, but I can't get any of the suggestion to work either...

I'd very much appreciate some help here, what am I missing?



Tried to add the following to template.php, but have no clue what to do with it really. Haven't worked in this way before at all, and this seems pretty steep.

function mythemename_preprocess_node(&amp;$vars) {
  $product_display_types = commerce_product_reference_node_types();
  if (isset($vars['type']) &amp;&amp; isset($product_display_types[$vars['node']-&gt;type])) {
    $vars['theme_hook_suggestions'][] = 'node__product__type__' . $vars['node']-&gt;type;
    $vars['classes_array'][] = 'node-product-type';
    if ($vars['view_mode'] == 'product_list') {
      $vars['theme_hook_suggestions'][] = 'node__product__type__product__list';
      $vars['classes_array'][] = 'node-product-type-product-list';
    }
  }
}
I believe that it is a product reference field, and therefore, the template suggestions are different. That is why creating random node template files is not having any effect. What you want to target is the entity being referenced.

You should check what templates or theme hooks exist in Commerce, and derive the templates from that. You can also add your own suggestions when preprocessing.

Here are some threads that will help:


https://www.drupal.org/node/1245354
https://www.drupal.org/node/1245354#comment-11788691
Is there a product.tpl.php for ALL product types in Drupal Commerce?
https://drupalcommerce.org/discussions/911/customize-way-product-displayed
https://drupalcommerce.org/discussions/337/how-theme-product-display


Note that if you add to template.php or introduce new templates, you will need to clear your caches so it is picked up by Drupal.

A bulletproof way to find out would be to do mytheme_preprocess_entity($variables) in your themes template.php file, and dump out $variables when it is preprocessing a product entity. Within it, you will see possible template suggestions for the product entity itself. 

The same applies for fields as well. template_preprocess_field: https://api.drupal.org/api/drupal/modules%21field%21field.module/function/template_preprocess_field/7.x