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

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

  • 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 Aug 27 '14 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 Aug 28 '14 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 Aug 28 '14 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'); } – guaka Aug 29 '14 at 9:05
  • Unfortunately dpm($form) is merely giving my Array(). – guaka Aug 29 '14 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.

  • 1
    I want to use the btn-success class, I don't want to target the buttons with CSS. – guaka Aug 25 '14 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. – Brandon Bearden Aug 26 '14 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 Aug 27 '14 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, privacy policy and cookie policy

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