Is There a Way to Divide the Products Section on a Form into Sub-Sections, Each with Its Own Header?

Example:

Wash Packages:

1

2

3

Detail Packages:

1

2

3

Additional Services

1

2

3

Yes, this can be done in the following manner:

1. For each sub-heading you wish to insert, go into the payment wizard and add it as though you were adding a new product and give it a price of 0

2. Click each "sub-heading" and drag it into the position in which you would like it to appear in the product list

3. Inject CSS to hide the check box of each sub-heading, change the appearance of the sub-headings (for instance, make them bold) and prevent them from being selected when clicked

Regarding the injected CSS, although it's possible to find out what rules should be used to effect the changes, it would be best to use your browser's developer tools. In Chrome, you would right-click one of the items intended to be displayed as a sub-heading and then click Inspect element:

This would cause the developer panel to open at the bottom of the browser window. You should see a highlighted line of code similar to that below:

Take note of the 1005 indicated by the arrow. Every ID associated with that "product" (sub-heading, in this case) will bear that number. Now, have a look at this demo. Examine its source and you will see the following CSS:

#cid_22 > :nth-child(2):after,
#cid_22 > :nth-child(10):after,
#cid_22 > :nth-child(18):after {
content: "";
position: absolute;
background: transparent;
margin-top: -26px;
width: 135px;
height: 30px;
margin-left: 0;
}

#input_22_1018,
[for="input_22_1018"]
.form-product-details,
#input_22_1019,
[for="input_22_1019"]
.form-product-details,
#input_22_1020,
[for="input_22_1020"]
.form-product-details {
display: none;
}

[for="input_22_1018"],
[for="input_22_1019"],
[for="input_22_1020"] {
color: #000;
font-weight: bold;
}

#cid_22 > :nth-child(2):hover,
#cid_22 > :nth-child(10):hover,
#cid_22 > :nth-child(18):hover {
background: #FFF;
} 

Notice how the numbers 1018, 1019 and 1020 are used in the second and third rules. Those are the numbers associated with the Wash Packages, Detail Packages and Additional Services "products" respectively. In your jotform, the numbers will likely be different. So, you would need to substitute the correct ones.

The first rule positions a transparent element over each sub-heading. This prevents the sub-headings from being clicked. cid_22 is the ID of the entire payment field. The > is known as a child selector. To the right of each child selector is an nth-child selector and to the right of each of those is the :after pseudo element. However, it's the numbers in parentheses which I need you to take note of. In my demo, if you inspect the Wash Packages sub-heading you would see the following:

That's why the number in the first pair of parens in the selector is 2. By the same token, the Detail Packages and Additional Services headings are the 10th child and 18th child of cid_22 respectively. So, in your form you would substitute the correct numbers.

The last rule employs the :hover pseudo class selector to prevent the background of each sub-heading from turning grey when hovered over with the mouse. Whatever numbers are used in the parentheses of the first rule's selector should be used in the parens of this rule's selector.

That's how to insert sub-headings in a payment field. If anything above is unclear, please let us know.

Thanks