osCommerce v2.3.3 Tutorials | osCommerce eBook Store | osCommerce Tutorials | osCommerce Home

osCommerce v2.3.3 What's In My Cart Shopping Cart Sub-page Customization (Part 6)

Let’s continue with Part 5 of osCommerce Shopping Cart Sub-page customization.

The remove button is too close with the Update button. Let's fix the problem.

33. Replace the “'   ' . TEXT_OR” codes with two line breaks.

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

34. Refresh browser to see the changes.

osc shopping cart page customization

The design of shopping cart looks very good now.

But, you are still not quite satisfactory with the Checkout and PayPal button. Let’s see what can you done with the layout of these two buttons.

You have a very good idea:
- Move the Checkout button and PayPal to the left side
- Align them in horizontal level, with Checkout button on the left side, PayPal button on the right side.

This idea is very good. Let’s see how to do that.

35. Navigate to line 137 – 155.

osc shopping cart page customization

You need to insert a Div layer to contain the Checkout and PayPal button.

36. Insert a Div layer to contain the Checkout and PayPal button

<div style="width:300px; margin-top:20px;">

Obviously, the new Div layer should insert above line 137, and close below line 155.

37. Navigate to line 137.

<div class="buttonSet">

38. Replace line 137 with the following codes.

<div style="float:left;">

The Checkout button will then float to the left.

The next step is floating the PayPal button to the right.

39. Navigate to line 155.

<p align="right"><?php echo $value; ?></p>

40. Replace line 155 with the following codes:

<div style="float:right;"><p style="float:left; margin-top:5px; padding-right:10px;"><?php echo TEXT_ALTERNATIVE_CHECKOUT_METHODS; ?></p> <p style="float:right; margin-top:0px;"><?php echo $value; ?></p></div>

You need a Div layer floating to the right to contain the PayPal button.

41. Navigate to line 148.

<p align="right" style="clear: both; padding: 15px 50px 0 0;"><?php echo TEXT_ALTERNATIVE_CHECKOUT_METHODS; ?></p>

42. Remove this line.

The “– OR  –“ text was moved to the Div layer containing the PayPal button.

43. Refresh browser to see the final results.

osc shopping cart page customization

44. Try to add more items to the shopping cart.  The shopping cart is working perfectly!

osc shopping cart page customization

Once you layout the shopping cart table, you can freely and easily to style the table to any design you like.

You can also use CSS to style the shopping cart tables to any design you like.

This is the end of customizing osCommerce Whats In My Cart Shopping Cart Sub-page.