If you've followed the previous three examples, you now have the basic framework for your Shopping Cart Page template and you're ready to put in some content. The list of products in the cart is usually given a prominent location on the cart page.
| Resulting Page |
The HTML tags in the table of products have CSS classes, and you can modify the look of the table by defining the selectors for those classes in a style sheet. You can control many aspects of the table, such as the font used, the widths of the cells, and background colors. This example uses the table shade color defined by the merchant for the background color, and it sets column widths and border spacing.
Here is a list of the CSS selectors used in the product table. The th.cart_ selectors are the column headers, the td.cart_ selectors are the product rows, and the td.cart_cp_ selectors are the coupon rows (coupons are only in Shopsite Pro).
| table.cart | The table containing the list of products ordered. |
| th.cart_delete td.cart_delete td.cart_cp_delete |
Cells in the column containing the "Remove" button. |
| th.cart_quantity td.cart_quantity td.cart_cp_quantity |
Cells in the Quantity column. |
| th.cart_name td.cart_name td.cart_cp_name |
Cells in the Name column. |
| th.cart_sku td.cart_sku td.cart_cp_sku |
Cells in the SKU column. |
| th.cart_price td.cart_price td.cart_cp_price |
Cells in the Price column. |
| th.cart_total td.cart_total td.cart_cp_total |
Cells in the Total column. |
| td.cart_op td.cart_op1 td.cart_op2 |
Cell containing product ordering options, and empty cell to the left and right of ordering options, respectively. |
| select.cart | Select list of ordering options. |
| input.button154 | The "Remove" button. |
This example shows a brief style sheet with selectors for some parts of the product listing table.
| Resulting Page |