How to add CSS classes to buttons of Drupal Commerce checkout forms?

Question

How can I add a bootstrap btn-success class to the Drupal Commerce Checkout button in the cart form?

The Update cart button already has btn-info but I can't find btn-info anywhere in the code.

If would also like to adapt buttons in other parts as I expect btn-success buttons to lead to higher conversion.

Bootstrap has great classes, I don't want to fiddle with CSS to try and recreate that, I just want to use the Bootstrap classes.

I'm okay with adding some PHP code to my theme's template.php, probably _form_alter() and this is probably the way to do it. But how exactly?

Answer 1

According that you have default views_form_commerce_cart_form_default form for your cart, this should do the job. Put the following lines in a custom module:

function MYMODULE_form_views_form_commerce_cart_form_default_alter(&$form, &$form_state, $form_id) {
  $form['actions']['checkout']['#attributes']['class'] = array('btn-success');
}

If not ok, check the ID of your form with

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  drupal_set_message("Form ID is : " . $form_id); 
}

and apply the same above snippet with function MYMODULE_form_FORM_ID_alter.

EDIT : to apply btn-success to Continue buttons of the cart, checkout, review pages:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {

  switch ($form_id) {

    case 'views_form_commerce_cart_form_default':
      $form['actions']['checkout']['#attributes']['class'] = array('btn-success');
      break;

    case 'commerce_checkout_form_checkout':
    case 'commerce_checkout_form_review':
      $form['buttons']['continue']['#attributes']['class'] = array('btn-success');
      break;   
  }
}  

To do it yourself next time : in your hook form alter() module, check the form_id, dsm($form); and browse the dsm tree to find your needle...

Answer 2

It is difficult to add classes to generated content like that. It is doable but generally not necessary. See this related post and comments for some light on this subject.

You can target the buttons with CSS using a cascade.

The cart page has the body class .page-cart and the form buttons has a class .form-actions. So, target the buttons with inputlike so:

.page-cart .form-actions input { some css here }

If you are being overridden, let me know in a comment and I can help with that. A link would be useful.

Answer 3

adding css to the buttons on the cart is the same as adding css to anything else. look at the page where the button is. right click on the button and select inspect element. The browser will display the DOM tree at the position of that element. Look for a point in that element or its parent elements that you can use to target that element. type up your css in your style sheet to target that element. This is how you should do it for anything in drupal. let drupal do the hard work of rendering the page then look at what it makes and style from the output.

Answer 4

With COMMERCE Version: 7.x-1.13 :

function MY_MODULE_form_alter(&$form, &$form_state, $form_id) {   

   if ($form_id = 'form_commerce_cart_add_to_cart') {    
         $form['submit']['#attributes']['class'][] = 'btn-success';
   }

}