If you don't want to build the dynamic list of custom checkout fields in your store's checkout area, then use the {COMPOSITE-CHECKOUT-FIELDS} QuickCode Tag instead. This tag will build the entire table of custom checkout fields, including the necessary HTML code and QuickCode Tags. All with one tag!

The {COMPOSITE-CHECKOUT-FIELDS} QuickCode Tag builds a list of the custom checkout fields with all the necessary components. If no custom checkout fields have been created, then nothing is displayed. The checkout field, its title and its description are all displayed for any of the possible ten custom checkout fields you have created. A copy of each field is automatically repeated for each shipping address in the customer's order.

The {COMPOSITE-CHECKOUT-FIELDS} QuickCode Tag also has its own CSS styles that you can use in your CSS style sheets to control the look of the HTML table it creates. A sample of the CSS code is provided below. To apply these styles to this tag in your store, copy the CSS code below, and then paste it into a CSS style sheet used in your store. Edit the CSS styles at will to control the design of the HTML content.

Also below is a copy of the HTML source code that is used to construct the {COMPOSITE-CHECKOUT-FIELDS} QuickCode Tag. This is the source code that the tag will be translated into when your store page is displayed in a web browser. The HTML is included for informational purposes only, it's just so you can see how the HTML table is built. Note that there are other standard QuickCode Tags embedded within this composite tag. You can do the same when creating your own custom QuickCode Tags.

To customize these fields, create CSS styles titled checkout-field-table , checkout-field-description & checkout-field-title. The form fields generated by this QuickCode Tag will then inherit the attributes of these styles.

For example:

<style type="text/css">
<!--
.checkout-field-table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.checkout-field-description {
background-color: #00458A;
color: #FFFFFF;
}
.checkout-field-title {
font-weight: bold;
}
-->
</style>