How do I add text after the amount for each product in the Payment Wizard?

  • Profile Image
    ewinder
    Asked on October 25, 2016 at 11:03 AM

    Hello,

    I am trying to add text to the opposite side of the payment amount and do not know how to do this. When I create a product in the Payment Wizard, the only option available is to put the "Name" before the "Price." I would like to put the "Price" before the "Name."

    Right now, the products look like this:

    Scholarship that funds nearly 100% of a full-time student's tuition $2,000.00

    Our client would like it to look like this:

    $2,000.00 Scholarship that funds nearly 100% of a full-time student's tuition

     

    I found a CSS code in one of the old questions, but it adds the same text to the end of every product. I need to be able to put a different description for each product. Here is the code I found: 

    .form-product-details::after {

    content : "none";

    }

     

    Thank you for your time and assistance!

  • Profile Image
    Kiran
    Answered on October 25, 2016 at 01:18 PM

    Please try injecting the following CSS code to your JotForm to change the position of amount in the products listed.

    span.form-product-details {

    display: none;

    }

    .form-product-name:before {

    font-weight: 700;

    }

    #product-name-input_3_1011:before {

    content: '$2000.00 ';

    }

    #product-name-input_3_1010:before {

    content: '$1000.00 ';

    }

    #product-name-input_3_1009:before {

    content: '$750.00 ';

    }

    #product-name-input_3_1008:before {

    content: '$500.00 ';

    }

    #product-name-input_3_1007:before {

    content: '$250.00 ';

    }

    #product-name-input_3_1006:before {

    content: '$125.00 ';

    }

    #product-name-input_3_1005:before {

    content: '$50.00 ';

    }

    #product-name-input_3_1003:before {

    content: '$25.00 ';

    }

    #product-name-input_3_1004:before {

    content: '$1.00 ';

    }

    The products should be displaying as shown in the screenshot below:

    Hope this information helps!