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.|
|Cells in the Quantity column.|
|Cells in the Name column.|
|Cells in the SKU column.|
|Cells in the Price column.|
|Cells in the Total column.|
|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