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.

<div class="commerce-product-field commerce-product-field-commerce-price field-commerce-price node-12-product-commerce-price">HK$100.00<span>/Month</span></div>

In order to achieve a similar rendering as

enter image description here

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 ?

2 Answers 2


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(&$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 = '<span class="currency">HK$</span><span class="units">'.$parts[0].'</span><span class="decimal">.'.$parts[1].'</span>';
    $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.


Maybe using CSS nth child? http://www.w3schools.com/cssref/sel_nth-child.asp to set the decimal font size and then z index and right margin the per month?

  • This is not making sense because the whole price figure, including the decimal part, was in the same markup element. I don't think there is a CSS selector to target the last 3 characters.
    – jmary
    Commented Mar 22, 2017 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.