Add a remove button to the shopping cart page

In version 2.3.1 of osCommerce, there is no remove button for items placed into the shopping cart, but a plain text link. On top of this, the link text is also “hardcoded”, so it always says “remove”, doesn’t matter what language you have in use in your store.

That is how the shopping cart page look by default

Let’s change this, and let’s create a multilingual button, that will look consistent with all other buttons all over your store. The file we need to work on is

catalog/shopping_cart.php

Make a copy of that file so you can replace the file you are working on, in case you mess anything up. At about line 97 we can see there following piece of code

      $products_name .= '<br /><br />' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . '   or <a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">remove</a>';

To make it a bit more clear what’s happening here, let’s break the code into separate lines

$products_name .= '<br /><br />' .
tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') .
tep_draw_hidden_field('products_id[]', $products[$i]['id']) .
tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') .
'   or <a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">remove</a>';

The “remove” link is following

'   or <a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">remove</a>'

As you can see, the words “or” and “remove” are hardcoded into the file and the result is the plain text link you can see on your screen. This we are going to replace by a nice button. This is the code we are going to use

tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'))

As you can see, the link part, including it’s “action” is exactly same as before. New is, that we use the tep_draw_button function of osCommerce

IMAGE_BUTTON_REMOVE is the text for our button, this we wil add later to file catalog/includes/languages/english.php. The word “trash” is for the icon we want to use on the button, we can use any of the available icons of the jQuery ui theme.

So, our code looks now like this

$products_name .= '<br /><br />' .
tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') .
tep_draw_hidden_field('products_id[]', $products[$i]['id']) .
tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') .
tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'));

and in one line, as it was before, like this

  $products_name .= '<br /><br />' .  tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'));

Copy-pasters in a hurry, can just replace line 97 of their file with this line here

Next thing we need to do is, to define the text we want to have displayed on our new button, this we do in file

catalog/includes/languages/english.php

Here you can add anywhere before the last closing ?> following into the file, it will be better of course if you add it close to the other button text defines

      define('IMAGE_BUTTON_REMOVE', 'Remove');

Please note that this define is globally available all over your sore, so you can use the same constant anywhere else you want to have the text “remove” displayed. You can change the text of course to anything that fit your needs, eg to “kuku” and you need to add the same define to your other main language files in case you use more languages (eg german.php, spanish.php, swahili.php etc)

Lets lake a look now how our shopping cart page look like

Easy not? Enjoy and lets hope that nobody is going to press this

In case you are interested, here’s an other interesting post about how to remove all items from the shopping cart

Front page trash can image taken from wp clipart, thank you guys

multimixer

• Laurent 06/01/2012 at 13:52

  published in November 20, 2010 :
  https://github.com/oscommerce-france/oscommerce2/commit/a188a7cf646e2ca86c506fe826cdc1c15f4931ae

  oscommerce france : a step ahead.

  Reply
• multimixer 06/01/2012 at 14:44

  Hi Laurent

  Yes, that’s true, but people do not download osCommerce from github and also do not search there for upgrades.

  The official osCommerce download does contain the file with the plain remove link and many people have issues with this, that’s why my post.

  It makes me wonder however, why the official download package has not been updated yet, that is not the only issue. Even small fixes like this, would make peoples life much easier

  All credits to you, Vive La France

  Reply
• Biru 09/01/2012 at 14:15

  thanks for this awesome tip.

  I followed it and it works great but I have a slight hick up.

  the quantity, update button are on the same line as the product name which means that if the product name is long the remove button falls under. it doesnt look classy.

  is there anyway we can have a line break from the product name? just like one the “after” pic you have put on.

  your help would be greatly appreciated.

  Thanks

  Reply
• multimixer 09/01/2012 at 14:37

  Hi Biru

  The “after” pic use exactly the same code as posted here, the code starts with $products_name .= ‘<br /><br />’ . etc and this should create a line break under the products name and before the quantity input + buttons

  Reply
• Biru 10/01/2012 at 11:40

  Silly me missed the line break codes.

  Thanks for sharing these info btw. You are a legend.

  One more thing though if you wouldnt mind. Im having issues with having a space between the contents in the “bodycontent” section and the edge of the table.

  For instance in a new oscommerce site where it says “welcome to blabla.com” the “W” is awfully close to the edge which is visible if we change the background. Is there a easy way to edit it? I tried putting “padding” on the stylesheet but it messes up the layout. :/

  Your help would be greatly appreciated.

  Reply
  • multimixer 10/01/2012 at 13:55

    @ Biru, there is no reason to mess up anything, it depends on what exactly you apply the padding

    Depending on how your site is structured you could try one of following
    #bodyContent{margin-top:10px}
    #header + div{margin-bottom:10px}

    Reply
• Atro Tossavainen 10/01/2012 at 13:48

  Thank you very much for this insight and help. The osC site I am working on makes so much more sense now

  Reply
• multimixer 10/01/2012 at 13:56

  Thank you for the comment Atro

  Reply
• Jinx13 21/01/2012 at 17:23

  Just wanna say thank you. This explained a little to me to fix something NOT actually related to thed remove button.
  Without this guide I may not have realised for some time

  Reply

Leave a Reply