When you change a product attribute on a product display page, ajax loads the fields of the new product.

See here: http://demo.commerceguys.com/ck/tops/drupal-commerce-hoodie

By changing the size, color, etc, you trigger an ajax call that changes the fields such as SKU, images, etc.

My question is, how do you add additional markup to be updated on the attribute(form field) change?

By default, the form will update all fields printed in the template in this format.

<?php print render($content['commerce_price']); ?>

This wraps markup around the price with the following classes.

commerce-product-field commerce-product-field-commerce-price field-commerce-price node-880-product-commerce-price

Im assuming the ajax call is replacing fields by looking at this markup.

So how do I add additional markup, that printed in the node template, to be replaced with ajax when a form field is changed.

Im not sure what to hook into.

Many thanks.


2 Answers 2


You can use hook_commerce_cart_attributes_refresh_alter(). This is invoked when the variation is selected by the user and reacts to changes in the cart widget. It gives you the chance of using AJAX commands, so you basically have the complete control over elements and behaviors. An excellent tutorial is given on https://drupal.stackexchange.com/a/73325.

Commerce itself invokes the hook from the Cart module and there's the Commerce Single Page Checkout sandbox module, which uses the technique for adding a view on the refresh event using ajax_command_replace.

  • Yes. hook_commerce_cart_attributes_refresh_alter is the one I was looking for.
    – Piers
    May 26, 2014 at 8:57

You can use hook_form_alter and check $form_state['default_product'] for product details.

e.g, show markup from a field on the default product.

 * Implements hook_form_FORM_ID_alter
 * Alter commerce add to cart form
function MODULE_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state){

  // Add some generic markup from the selected product field.
  if (isset($form_state['default_product']) && isset($form_state['default_product']->field_extra_markup[LANGUAGE_NONE][0]['value'])){
    $form['extra_markup'] = array(
      '#title' => t('Some markup'),
      '#type' => 'item',
      '#markup' => $form_state['default_product']->field_extra_markup[LANGUAGE_NONE][0]['value'],


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.