Drupal Commerce, Search API DB and Views | How to display the product variation accordingly to the attribute being applied as filter?
Feature request here

This is not the ideal solution but will do for now. There are 2 steps to it:


At Views UI:


Add all the fields you need into your view and Exclude them from display.
At last add a Global Custom Text field for building your row display. This is my example:

&lt; div class="image">[field_image]&lt; /div>
&lt; h3 class="title" >[title]&lt; /h3>&lt; div class="price">&lt; span
class="old">[field_old_price]&lt; /span>&lt; span>[commerce_price]&lt; /span>&lt; /div>
&lt; div class="addtocart">[add_to_cart_form]&lt; /div>

In your template.php file:


.

/**
 * Implements THEME_views_view_field__VIEWID__DISPLAY__FIELD().
 */
function mytheme_views_view_field__myview__page__nothing($vars) {
  $nid = $vars['row']-&gt;entity;
  $size_attibute_tid = myvalue;
  $row_product_id = $vars['row']-&gt;_entity_properties['field_product_reference:entity object']-&gt;product_id;

  $query = db_select('commerce_product', 'p');
  $query-&gt;join('field_data_field_size_attribute', 't', 't.entity_id = p.product_id');
  $query-&gt;join('field_data_field_product_reference', 'pr', 'pr.field_product_reference_product_id = p.product_id');

  $query
    -&gt;fields('p', array('product_id'))
    -&gt;condition('field_size_attribute', $size_attibute_tid)
    -&gt;condition('pr.entity_type', 'node')
    -&gt;condition('pr.entity_id', $nid);
  $query = $query-&gt;execute()-&gt;fetchAssoc();

  $query_product_id = $query['product_id'];
  if (isset($query_product_id) &amp;&amp;
      $query_product_id != $row_product_id) {

    $node_title = $vars['row']-&gt;_entity_properties['entity object']-&gt;title;
    $node_url = $vars['row']-&gt;_entity_properties['url'];
    $product = commerce_product_load($query_product_id);

    $line_item = commerce_product_line_item_new($product, 1, 0, array(), $product-&gt;type);
    $line_item-&gt;data = array(
      'context' =&gt; array(
        'product_ids' =&gt; array($query_product_id),
      ),
    );
    $add_to_cart_form = drupal_get_form("commerce_cart_add_to_cart_form_$query_product_id", $line_item);
    $add_to_cart_form = drupal_render($add_to_cart_form);

    $price = commerce_currency_format($product-&gt;commerce_price['und'][0]['amount'], $product-&gt;commerce_price['und'][0]['currency_code']);
    $old_price = commerce_currency_format($product-&gt;field_old_price['und'][0]['amount'], $product-&gt;field_old_price['und'][0]['currency_code']);

    $image_variables = $product-&gt;field_image['und'][0]['image_dimensions'] += array(
      'style_name' =&gt; 'my-image-style',
      'path' =&gt; $product-&gt;field_image['und'][0]['uri'],
    );
    $image = theme_image_style($image_variables);
    // You should install https://www.drupal.org/project/commerce_product_urls module
    $image = "&lt;a href='$node_url?id=$query_product_id'&gt;$image&lt;/a&gt;";

    $vars['output'] = "&lt;div class='image'&gt;$image&lt;/div&gt;
      &lt;h3 class='title'&gt;$node_title&lt;/h3&gt;
      &lt;div class='price'&gt;
        &lt;span class='old'&gt;$old_price&lt;/span&gt;&lt;span&gt;$price&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class='addtocart'&gt;$add_to_cart_form&lt;/div&gt;";
  }

  return $vars['output'];
}