Make selection option in payment field drop down/numbered?

  • Profile Image
    npapadmin
    Asked on January 18, 2019 at 07:27 PM

    Hello,

    How can I make the payment options in the payment field have a drop down menu to the right with number options, so thay may take one or more courses? And then the Tuition field total that up?

    Also, I'd luke to indent two of the options in same payment field.

    See screen shot.



  • Profile Image
    Mike_G
    Answered on January 18, 2019 at 11:49 PM

    To meet your requirements that you showed us in your screenshot, please inject the following CSS codes to your form.

    /*align quantity drop-down of product item*/

    .form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail br, .form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail .form-sub-label-container .form-sub-label {

        display:  none !important;

    }

    .form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail .form-sub-label-container {

        display: inline !important;

    }

    /*indent last 2 product item*/

    .form-product-item.hover-product-item:nth-child(n+6) {

        text-indent: 30px !important;

    }

    How-to-Inject-Custom-CSS-Codes

    Result:



    1547873218t23_45_37.png

  • Profile Image
    npapadmin
    Answered on January 19, 2019 at 01:07 AM

    Hmmm thank you but not working. There is other CSS code there so not sure...

    Please check out the CSS code there and let me know why it's not working.


  • Profile Image
    npapadmin
    Answered on January 19, 2019 at 01:08 AM

    Also I'd like to make the indented text smaller, is that possible?

    "Registration Fee (required if not yet paid): 165.00
     Annual Student Dues (required if not yet paid): 85.00"

  • Profile Image
    jherwin
    Answered on January 19, 2019 at 05:45 AM

    I have added two custom CSS code to the code provided by my colleague, this will make the indented text smaller.

    /*align quantity drop-down of product item*/

    .form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail br, .form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail .form-sub-label-container .form-sub-label {

         display:  none !important;

    }

    .form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail .form-sub-label-container {

         display: inline !important;

    }

    /*indent last 2 product item*/

    .form-product-item.hover-product-item:nth-child(n+6) {

         text-indent: 30px !important;

    }

    span#product-name-input_18_1012.form-product-name{

        font-size:18px!important;

    }

    span#product-name-input_18_1013.form-product-name{

       font-size:14px!important;

    }

    By the way, you can't see the quantity selector because you did not enable it in your Payment Settings.

    Please enable it, refer to my screencast:
    1547894625paymentsettings.gif

    Result:
    1547894677resulty.png

    Guide: How to Inject Custom CSS Codes.

  • Profile Image
    npapadmin
    Answered on January 19, 2019 at 12:18 PM

    Thank you much, this is perfect!

  • Profile Image
    npapadmin
    Answered on January 19, 2019 at 01:14 PM

    Hi, one last thing- 

    I just tried deleting "Tuition Total" from the payment selection options and the indented option below jumped back to being un-indented. See screenshot. Tried figuting out the CSS code but not sure?1547921653Capture2.PNG

  • Profile Image
    npapadmin
    Answered on January 19, 2019 at 01:16 PM

    After deletion:

    1547921764Capture3.PNG

  • Profile Image
    Mike_G
    Answered on January 19, 2019 at 02:35 PM

    To fix the issue, please update the following custom CSS codes in your form.


    1547926508t14_33_16.png

    Let us know if you need any further assistance.

  • Profile Image
    npapadmin
    Answered on January 19, 2019 at 03:19 PM

    Thank you!