Commerce Price Field formatting I'm using a view which is rendering the Product displays as DisplaySuite modes.

Right Now, the generated code for the price looks as follows.

&lt;div class="commerce-product-field commerce-product-field-commerce-price field-commerce-price node-12-product-commerce-price"&gt;HK$100.00&lt;span&gt;/Month&lt;/span&gt;&lt;/div&gt;


In order to achieve a similar rendering as



I need to split the decimal part and the currency into their own markup.

Any idea about how to do that in a clean fashion ?
I have found a working solution for that, even if there might be a more clean solution, at least it works.

In the template.php file of my theme in use I put the function :

  function MYTHEME_preprocess_field(&amp;$vars) {
  if($vars['element']['#field_name'] == 'commerce_price') {                              
    // dpm($vars);
    $price = $vars['element'][0]['#markup'];
    $parts = explode(".",$price);
    $parts[0] = str_replace('HK$', '',$parts[0]);
    $markup = '&lt;span class="currency"&gt;HK$&lt;/span&gt;&lt;span class="units"&gt;'.$parts[0].'&lt;/span&gt;&lt;span class="decimal"&gt;.'.$parts[1].'&lt;/span&gt;';
    $vars['items'][0]['#markup'] = $markup;
  }
}


Once this saved, a markup on which it is possible to act is generated.
The "per month" par is supplied by a field suffix using Display Suite.
The rest is some easy CSS to style the output.

Another method is possible. At uncommenting the dpm($vars) line in the code above, some candidate template files names for the field are provided.