Commerce - Theme Add-to-Cart form on Product Display page

Question

I have a Drupal Commerce project setup on top of D7-22. I've overridden the template file for my product display (node--product-display.tpl.php), and have managed to render the product fields, as well as the Add-to-cart form with all of the attributes. I know that <?php print render($content)?> will actually render the <form> for the attributes and Add-to-Cart button, but I would like to customize the HTML layout of the form and add some other elements to it. For example:

1. I'd like to position the Add to Wishlist button next to the Add to Cart button
2. I'd like to add some HTML next to one of the attribute fields that is rendered (the Size select box).

Using the Devel module, I was able to pick up fields like product:commerce_price and product:sku, but none of the attributes or buttons within the actual <form>. I'm currently using jQuery to inject HTML into the form...but it's a hack am not all that comfortable with pushing into production.

Is there any way in my tpl.php file to print out the form attributes, quantity textbox and buttons individually?

Cheers!

Answer 1

Here's a good start on your first form alter for add to cart:

function MODULENAME_form_alter(&$form, &$form_state, $form_id){
  // Add to cart form overrides
  if(substr($form_id, 0, 30) == 'commerce_cart_add_to_cart_form'){
    kpr($form);
  }
}

Answer 2

To edit the "add to cart" form you can use hook_form_alter() or edit the function commerce_cart_add_to_cart_form() in commerce_cart module. In there you can add a second submit button called "wishlist" and add the HTML to the attribute widget. The commerce_cart_add_to_cart_form() function is quite long but it should be doable.