How do I remove prices from the product list?

  • Brian
    Asked on March 27, 2024 at 7:28 PM

    I am trying to remove the prices from the "product list" but I cannot find a way to remove it or hide it?

    When I type "0" in the amount it switches to "Free". I don't want the price even listed, but still the ability for them to pick the product and quantity.

    Jotform Thread 13347521 Screenshot
  • Lorenz JotForm Support
    Replied on March 27, 2024 at 10:26 PM

    Hi Brian,

    Thanks for reaching out to Jotform Support. If you simply want to hide the prices of the items, then we can do that using Custom CSS code, however, if they select the item, the prices for the total will still be calculated, and will require to pay the total amount on check out. Let me walk you through it:

    1. In the Form builder, click on the blue Roller Paint icon.

    2. From the Form Designer panel, select the Styles Tab. 

    3. Next, scroll down a bit and add the code below inside the Inject Custom CSS area. 

    /* Hide product price */
    span.form-product-details {
    display: none !important;
    }
    /* end */

    How do I remove prices from the product list? Image 1 Screenshot 20

    Is that something that'll work for you?

    Let us know if there's anything else we can help you with.


  • Brian Ward
    Replied on March 29, 2024 at 12:41 PM

    Is there any way to completely remove the payment function from the product order?

    We just need a count of each order, size, material so we can provide estimates.

  • Ylli JotForm Support
    Replied on March 29, 2024 at 12:58 PM

    Hello Brian,

    Thanks for getting back to us. To remove the requirement to pay in the form and keeping the product list to place an order, you can use the Purchase Order integration.

    To change from PayPal to the Purchase Order, please follow these steps:

    1. Open the relevant form.
    2. Go to the Payments tab.
    3. Find your current Payment method.
    4. Click the three dots and select Switch To Another Gateway.
    5. Find the Purchase Order option and select it.

    How do I remove prices from the product list? Image 1 Screenshot 30

    To remove the prices from the products, you can inject the custom CSS code that my colleague shared earlier.

    /* Hide product price */
    span.form-product-details {
    display: none !important;
    }
    /* end */


    How do I remove prices from the product list? Image 2 Screenshot 41

    Keep us updated and let us know if you need any more help.