How to add Donation under Sell Products option in payment tools

  • Profile Image
    Asked on October 23, 2014 at 05:02 PM

    We are a non-profit and sell multiple products. However, we would also like to accepts tips/donations at the time a product is purchased because a customer is less inclined to go back to our website and make a purchase and donation separately. We currently have a donation setup as a "product" the customer can choose. However, we'd like the customer to be able to enter how much they'd like to tip/donate.

    If this can't currently be done, I'd like to submit this as an enhancement request. Thanks in advance!

  • Profile Image
    Answered on October 23, 2014 at 07:44 PM


    I believe we can make a workaround for that. We can make a custom field letting your customers to donate with a specific amount, this will still be part of your products in the payment options you have. You can follow the steps below.

    1. Go to your payment options, and if you already have you can skip this part.

    2. Add a product for donation. The price will be $1, we will customize this so that the customer can choose or fill in the amount he/she wants.

    3. Click Add New Option and choose Add Quantity Property. This field will act as the main textbox to where the user will fill in the amount that he/she wants to donate.

    Example: Price is $1 x Quantity 24 = $24

    4. We will then have a product, same with the others having a checkbox and label price. *Note: I'm viewing this on my Form Designer, we will use a custom CSS code to inject it in our form so that we can style product Donation.

    5. I used a custom CSS code:

    #input_9_1005.form-checkbox {

        display : none;



    label[for=input_9_1005] b {

        display : none;


    You can inject this using this tutorial 

    Or you can go to your Form Editor->Under Form Style tab->Choose Beta Form Designer, on the right side you will see a CSS panel, you can then inject your CSS code there.


    Please do take note that the html field names and IDs that I used in my CSS code may not apply to you. You can find yours by viewing your form on a page, right clicking on the page and "View page source" or "Inspect Element" find the appropriate fields that you want to apply the changes.

    6. This is now how my form should look like with the Donation product.

    You can view the live form and clone it from here: 


    I hope this helps. If you need further assistance on the CSS code, feel free to contact us any time, we'll be glad to help you.


  • Profile Image
    Answered on October 29, 2014 at 10:52 PM

    Worked great. Thank you!

  • Profile Image
    Answered on October 30, 2014 at 04:40 AM

    Hello lhumc,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    Answered on January 29, 2015 at 12:58 AM

    I have the same issue:  trying to sell reunion tickets for set price and provide a field for donations to a special project.  The donation can be entered in any amount.

    I'm not a computer geek, just a great grandmother trying to help plan a 50th high school reunion.  So, I cannot figure out how to add the CSS code to my form. 

    I tried originally to use your form by cloning it, however, I couldn't figure out how to get my PayPal info. in.  The only way I could find was to delete the entire field and then I was back to where I started.

    Also, I'd like to remove the little check boxes if that's possible as I only have 2 items to list, Tickets and Donation.

    Can you help me?  I think I have provided the right link to my form:

    Thank you in advance for any help you may provide.


  • Profile Image
    Answered on January 29, 2015 at 06:36 AM

    Hello Cheryl,

    I have moved your question a to anew thread and you will be answered here: 

    Thank you!