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 1)

This osc Shopping Cart sub-page customization is extracted from one of the chapter our eBook. It shows how to customize the design of the default layout of Whats In My Cart Sub-page. Some images may be a bit vague due to resizing to fit the width of webpage.

When visitors click on the “Add to Cart” button of a product, they will be directed to the Shopping Cart Page immediately.  Let’s take a look at the layout of osCommerce Shopping Cart Page.

osc shopping cart page customization

Frankly speaking, the design of the Shopping Cart page is really not up to the standard. The product image, product name, product price and other elements seems to scatter randomly around on the page.

Let’s see how to make the design of Shopping Cart page looks a bit better.

1. Open catalog/shopping_cart.php file with a text editor.

2. Study the codes from line 69 – 130.

The contents of Shopping Cart are mainly generated by this block of codes. Therefore the customization of the Shopping Cart will focus on line 69 – 130.

After studying the codes, the design of the Shopping Cart is really in a mess. There is an outer table. And there is an inner table that contains the product image and product name.  While the Sub-total and checkout buttons are scattered outside the tables. It is a really very strange design.

osc shopping cart page customization

You have an idea to improve the layout:
- Remove the Inner table.
- Group and rearrange all elements neatly inside the Outer table.

Okay! Let’s do it.

3. Navigate to line 69 -78. You can find the HTML codes of the Outer Table and Inner Table.

osc shopping cart page customization

4. Make a <th> heading row for the Outer table, as shown in the diagram below.

To minimize the steps, you use the traditional ways to style the tables. If you like you can use CSS to style the table.

osc shopping cart page customization

The next step is to remove the Inner Table. Please read on.....