The Shipping Page can display the list of products and totals from the cart page. These elements are optional on the Shipping Page, but most customers like to see them. Although you use the same tags on both the Shopping Cart Page template and the Shipping Page template, the output is slightly different. For example, customers cannot change a product quantity on the Shipping Page, although the quantity is displayed.
If you looked at the Resulting Page for the example above, you probably noticed that everything looks somewhat crowded on the page. By including a CSS style sheet and declaring how each element should look, you can add white space and background colors and other attributes to make the page easier to read.
Here is a list of the CSS selectors used in the product table and order totals. They are a subset of the selectors used in the Shopping Cart Page template.
| table.cart | The table containing the list of products ordered. |
| 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. |
| table.totals | The table containing the various totals. |
| td.totals_txt | The cells containing the label for each charge, such as "Subtotal" or "Shipping." |
| td.totals | The cells containing each charge. |
| td.totals_all_txt | The cell containing the "Total" label. |
| td.totals_all | The cell containing the total charge for the order. |
This example shows a brief style sheet with selectors and declarations for some parts of the product listing and order totals.
Next: Checkout Comments Box