Style/Iconfont Friendly Submit Buttons for Drupal Commerce

drupal commerce submit button

//  add css classes to the form submit element
function HOOK_form_alter(&$form, &$form_state, $form_id) {

  if (commerce_form_callback($form_id, $form_state)) { // is this a commerce form?

    if(in_array('commerce-add-to-cart', $form['#attributes']['class'])) { // target a specific button, here: "add to cart"
      
      // add classes
      $form['submit']['#attributes'] = array(
        'class' => array('add-to-cart', 'icon-basket-alt') // a class for easy selection in css, then the icon font class
      );

    }
  }
}


// By default (form.inc), submit elements are rendered as <input type="submit" value="Add to cart">
// As input does not support :before or nested markup, replace with <button type="submit">...</button>

function theme_button($variables) {

  $element = $variables['element'];
    $element['#attributes']['type'] = 'submit';
    element_set_attributes($element, array('id', 'name', 'value'));

    $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
    if (!empty($element['#attributes']['disabled'])) {
      $element['#attributes']['class'][] = 'form-button-disabled';
    }

    return '<button' . drupal_attributes($element['#attributes']) . '>'. htmlspecialchars($element['#value']) .'</button>';


}