0

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?

Screenshot

4 Answers 4

7
+50

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...

6
  • Do you mean: $form['actions']['checkout']['#attributes']['class'][] = 'btn-success'; ... a developer doesn't necessarily know if the parent modules sets a css class now -- or will need to in a future release of the module, so custom classes should be appended to those that exist already.
    – tenken
    Commented Aug 27, 2014 at 20:59
  • @tenken either with $form['actions']['checkout']['#attributes']['class'][] = 'btn-success'; or $form['actions']['checkout']['#attributes']['class'] = array('btn-success'); the btn-success custom class is appended to existing ones. I understand what you suggest but it seems that Drupal does not overwrite the class array, but adds the custom value in any case... Do you agree?
    – Kojo
    Commented Aug 28, 2014 at 12:53
  • I'm not sure, I thought in a past project I had overwritten css classes by accident -- maybe @Clive can confirm?
    – tenken
    Commented Aug 28, 2014 at 16:21
  • It works for the cart, but not for the checkout forms, commerce_checkout_form_checkout. This works for the cart_form but not for the checkout_forms: if (in_array($form_id, array('views_form_commerce_cart_form_default', 'commerce_checkout_form_checkout', 'commerce_checkout_form_review'))) { $form['actions']['checkout']['#attributes']['class'] = array('btn-success'); }
    – the
    Commented Aug 29, 2014 at 9:05
  • Unfortunately dpm($form) is merely giving my Array().
    – the
    Commented Aug 29, 2014 at 9:30
0

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.

3
  • 1
    I want to use the btn-success class, I don't want to target the buttons with CSS.
    – the
    Commented Aug 25, 2014 at 11:04
  • If you want to add CSS to the elements of a page created by Drupal Commerce, you have two options. Write a module to override the theme template or use jQuery to parse the DOM onload and add the CSS. Commented Aug 26, 2014 at 15:08
  • 1
    Or third options, the answer by Kojo that I thnik is the straightforward, write a simple module that implements the right form alter hook,
    – sanzante
    Commented Aug 27, 2014 at 20:24
0

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.

0

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';
   }

}

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.