Change the checkbox to remove from the cart to a styled submit button

Delete word is the most safe direction, with all other icons you are not sure the meaning in other cultures or how clear it is to the lowest dominator of buyer.

i vote for "a styled text link"

Styled link is fine, as long as it looks like a button. Because we want to communicate a "action".

@neokrisch A small opensource lesson, there is no voting only properly argument-ed discussions :)

Sorry, it is not clear why a checkbox is chosen and why it has such an unusual behavior.
1. What if JS is disabled?
2. What if multiple item are to be removed from a form? Clicking on one of the checkboxes starts the action?

@#4
Right, it should be a clear "action". So, button would be the best option. On the other hand, having a checkbox for each item and a bulk delete button in the bottom could be enough.
If I would have to choose between a checkbox and a button, I would prefer a button. Because: a). it can be styled (see below), b). Q-ty input field is already a kind of a checkfox - if you clear it, it removes the item.

@#2
Submit html element can be styled whatever. With image/icon as well (and very often).
As for i18n, buttons (as well as any other Drupal interface controls) are supposed to be translated by Locale > Translate, or by translation files within Commerce module.

Sorry, can not get it. I'm only curious about checkbox+js being chosen for that. I do not understand why would you need it. Why would you need js to replace checkbox with an image if a button can do it right away and can be styled in a much easier and reliably by css?
You say "Major e-commerce players like Amazon.com standardize on removing a single item at a time using an image or text button / link." and then "it will still look like a set of checkboxes that can be checked to remove items from the cart on update". which sounds controversary, and does look like a bulk update. Link/button is a single action. Checkbox is not. And it means that a user will have to check it (one action) and press update (second action). Or it will completely rely on js for this one-click-trick?

"only that would make it much harder for anyone else to enable a multiple removal tool "
Now it is more clear. Dilema.
So, if JS is disabled, everything changes and becomes even worse than with buttons. Not so graceful.
Ok, not a critical. If it becomes very uncomfortable, people will complain, and it will be modified.

Just checked the Amazon... awful, as usually... It has input type="image".
apple.com store has a "Remove" link.
toshibadirect.com - has a "x" round icon.
microsoft.com store - has a "Remove" link.
Visited almost 10 online shops. Well, not so many checkboxes so far...
Checkboxes are very common in e-mail boxes. Not so typical for online shops.

The big advantage of checkboxes (or meaningful icons, or "x" buttons) is that they do not occupy that much space as Delete/Remove button/link.

@mertskeli I am not sure what you are proposing. Delete is far more clear then almost all icons can communicate, especially considering it needs to be translatable. I don't think the space is a problem, if it becomes a problem you can always theme it differently.

@Bojhan
I am for buttons, as mentioned in #5.
The dilema is that multiple operations should not be ignored.
To sum up,
1. I suggest a Delete button per line. Or maybe a Remove.
2. No need for checkboxes, because bulk action can be done by q-ty field + update button.

I dont get what a simple submit is? Drupal commerce needs to provide sensible defaults, just a CSS based gray button with the black text Delete should be fine. As far as I know, all themes that want too can overwrite. I work enough in the Drupal space to know that, sensible defaults are fine in a lot of cases (people will change it as they see fit)

gray button with the black text Delete is a simple submit. "Button" is colloquial, "Submit" is per HTML coding.
So a simple Delete button looks like <input type="submit" value="Delete" />
It can be styled by CSS to whatever you want, including borders/shape/image replacement.
rszrama suggested checkboxes (<input type="checkbox" value="Delete" />) and to convert them to buttons by JS. Imo it is less good (see #7).

If there is no other workaround, lets use checkboxes. It's better than nothing.

Without making the value of the button something specific to the line item I want to delete from the cart, I can't use normal #submit elements in FAPI.

So, why not to rename the line item delete button to "Remove", lets say?

You should be able to use a different submit button name for this (ie. not 'op').

That is awesome, Ryan. Thanks for the tip!

Nice direction, very similar to what's going on at #529110: Users misunderstand "Remove” checkbox on cart page.

From what i can tell (and according to a 3 year old survey found at http://psychology.wichita.edu/surl/usabilitynews/92/shoppingcart.asp) - Stating "Remove" instead of "Delete" would provide better usability. I tend to agree on this one - delete is harsh, remove is way more subtle. when you see "delete" you naturally think twice (which on one hand is good for a shop..) but "remove" is more correct for the action - we're clearly not deleting anything... just removing from the cart... ;)

@asak Am I missing that conclusion? Also I am not sure if its a/b results or just expert review?

@Bojhan - sorry i wasn't clear enough. the conclusion is mine - what the survey shows is that the majority of sites (68% in figure 8) use "Remove", but no conclusion is made as to what's better. it's not reviews or testing - it's just statistical info. personally, i think in cases like this it best to "go with the flock", for that's what most users will be costumed to.

Also - my opinion is that it's more correct regardless of the info in that survey, for the reasons stated above.

My comment above was a bit misleading, sorry... ;)

No problem. I could definitely side with using the reasoning of "Remove" over "Delete".

I dont think we should be closing issues that are not actually finished, it tends to result in very mediocre design that looks unfinished. Lets go with a screenshot and set out clearly the next steps towards fixing.

Thats something I can review :) Actually think its fine to keep it like this, it stays in line with the design of Bartik an we don't have to worry about accessibility because we are going with core. Marking it back to fixed, lets make it a habit to include a last screenshot whenever there is a UI change + commit, that way we can keep design people involved.

Excellent job guys. thanks.

i just changed this button to fit my needs and want to chare it if someone else wants to do the same

function YOURMODULE_form_views_form_commerce_cart_form_default_alter(&$form, &$form_state, $form_id) {
  foreach ($form['edit_delete'] as &$item) {
    $item['#type']='image_button';
    $item['#src']='sites/default/files/images/delete.png';
    $item['#alt']='Delete';
  }
}

I´m not really sure if the ['#alt'] thing is working, because i cant see it in source but i saw it once before the image was loaded so maybe its workin :)

Cheers, Can!

I tried #37 and it seemed OK at first. But then I noticed that if you have 2 or more items in the cart and you want to remove the one at the top, it removes the wrong one (the one at the bottom). If i remove the hook_form_views_form_commerce_cart_form_default_alter code, it works OK again, so it must be related...
Any idea why???

Thanks

I do not understand why exactly the wrong line-item was being deleted, but i managed to solve the problem by changing the code from #37 into:

function myOwnModule_form_views_form_commerce_cart_form_default_alter(&$form, &$form_state, $form_id) {
  foreach ($form['edit_delete'] as &$item) {
	if (is_array($item) && $item['#type'] == 'submit')
	{
		$item['#value'] = '';
	}
  }  
}

and then adding this to my css

.commerce-line-item-views-form input.delete-line-item{
border:none;
background-image:url(../images/delete.png);
width: 20px;
}

After using the code in #37 I got the same issue as @dready2011. Would be great if someone savvy could check what's wrong with the code, because I would like to have a solution which uses a proper image button without a workaround in CSS (see #39).

Problem solved on stackexchange. You need to unset the value:

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