Change remove from cart button to an image button I want to change the remove-button, that removes line items from the cart to an image button representing a trash can like this:



The code I am using in a custom module looks like this:

&lt;? php
function mymodule_custom_form_views_form_commerce_cart_form_default_alter(&amp;$form, &amp;$form_state, $form_id) {
  foreach ($form['edit_delete'] as &amp;$item) {
    $item['#type']='image_button';
    $item['#src']='sites/all/themes/mytheme/images/trash.svg';
    $item['#alt']='Remove';
  }
}


That code shows the icon instead of the text as expected, but unfortunately it introduces a major issue: now pressing the button doesn't remove the correponding line item, but wrongly successively removes the last added line-items. So when I added item1, item2, item3 to the cart in this order, then no matter which corresponding remove-button you press, item3 is removed. Next time, you press one of the remove-buttons of the remaining 2 line-items, then item-2 is removed.
What's wrong with the above code?
You need to unset the #value on your image_buttons:

  $item['#type']='image_button';
  $item['#src']='sites/all/themes/mytheme/images/trash.svg';
  $item['#alt']='Remove';
  unset($item['#value']); // this line here


The line item that is deleted is determined by the #triggering_element in your $form_data. This element is determined by a function _form_button_was_clicked($element, &amp;$form_state) in form.inc in the core.

It seems that when you a #value has been set on your image_button, every image button is detected to have been clicked. 

  // line 2227 in form.inc
  elseif (!empty($element['#has_garbage_value']) &amp;&amp; isset($element['#value']) &amp;&amp; $element['#value'] !== '') {
    return TRUE;
  }


That means at the end of the ride, the last image button is always set as the #triggering_element, and the last line item is always removed.

Unsetting the #value fixes that. Setting it to an empty string doesn't, somehow.