Price showing as "Free" when payment options are used in product

Hello . . .

I am having a display problem when creating a payment form that allows custom prices/options for each item. 

I have set the Product selector and made a custom label and eight pricing options for each product, and the drop down menu appears for each of the 8 options. However because the main price is over-written by the custom option pricing, the product is listed as "Free" until an option is selected. Is there a way to suppress that and show nothing?

The best it seems I can do is to list the price for the first option, which will change when the buyer selects something different.

Form URL: https://form.jotform.com/90716283912156

Also, the line-wrap for the products is too narrow, cannot see a way to fix that.

To my understanding, you do not want the word "Free" or the price of the product option to appear alongside the name of the product. Also, you want to have the product name to be just in one line.

If that is the case, please inject the following CSS codes to your form to fix the issues you described.

span.form-product-details {

    display: none !important;

}

span.form-product-item {

    width: 100% !important;

}

.form-product-item-detail .form-sub-label {

    display: inline;

    padding-left: 62px;

}

How-to-Inject-Custom-CSS-Codes

If you have other questions or concerns, please feel free to let us know.